Convert HTML Entities - JavaScript Solution & Walkthrough

11/21 Convert HTML Entities

Convert the characters &, <, >, " (double quote), and ' (apostrophe), in a string to their corresponding HTML entities.

function convertHTML(str) {

  return str;
}

convertHTML("Dolce & Gabbana");

Credit: FreeCodeCamp.org

Understanding the Challenge

In this challenge, just as the name suggests, you are expected to convert some characters to their corresponding HTML entities.

The characters to be converted are &, <, >, ", and '.

You'll be given a string str as an argument. The string may or may not contain any of these characters. Your challenge is to check if the given string contains one or more of these characters.

If it does, then you'll return the string but with the character replaced with its corresponding HTML entity.

For example convertHTML("Dolce & Gabbana") should return Dolce & Gabbana.

This is because the corresponding HTML entity for & is &

If the given string does not contain any of the characters to be converted, your convertHTML() function should return the given string just as it is.

For example convertHTML("abc") should return abc.

Alright. Time for some pseudocode.

Pseudocode

Given a string(str)
  Split the string to get access to the individual characters
  Map over the splitted string
  if the character is '&', '<', '>', " or '
    return the appropiate HTML equivalent
  Otherwise, return the character as it is
  Join the splitted string
return the joined string.

Solving the Challenge

The first thing we need to do is to split the given string (str). That way, we will have access to each of the individual characters that makes up the given string.

Fortunately, JavaScript has a .split() method we can use for that purpose. We'll serve the result of the split in a variable called strSplit.

const strSplit = str.split('')

console.log(strSplit) // [ 'D', 'o', 'l', 'c', 'e', ' ', '&', ' ', 'G', 'a', 'b', 'b', 'a', 'n', 'a' ]

Note: We pass an empty string '' to the .split() method. This is what helps us to split the string into an array of individual characters.

Now that we have an array of the individual characters, we can use the .map() method to check all the characters one by one. Remember, the .map() would return to us a new array based on what we tell it to do. Let's save this new array in a variable called strMap

So, for each character, we want to check if its any of the characters below. &, <, >, ", and '.

If it is, we return its corresponding HTML entity instead of the character to the new array to be returned by the .map() method. Otherwise, we return the character just as it is.

The corresponding HTML entities for the characters are as follows;

& = &
< = <
> = >
" = "
' = '

We can use if else statements inside the .map() method to check for the presence of any of these characters and return their corresponding HTML entities.

However, I think this is a situation where using the switch statement would make your code more readable.

If you're not familiar with the switch statement, I would encourage you to first solve it using if else statements, then you can read about the switch statement and refactor your code.

  const strMap = strSplit.map(character => {
    switch (character) {
    case "&":
      return "&amp;";
    case "<":
      return "&lt;";
    case ">":
      return "&gt;";
    case '"':
      return "&quot;";
    case "'":
      return "&apos;";
    default:
      return character;
    }
  });

We use the default keyword to return a character in the array just as it if it is not one of the characters to be converted.

The next thing to do is to join the characters in the strMap array to become a string. let's save that string in a variable called finalStr.

Once again, JavaScript has a .join() method we can use for that purpose.

const finalStr = strMap.join('')

Note that we pass the same argument of an empty string '' to the .join() method, just as we did when using the .split() method earlier.

Finally, we return finalStr and our function is complete!

  return finalStr;

Final Solution

function convertHTML(str) {
  const strSplit = str.split('')

  const strMap = strSplit.map(character => {
    switch (character) {
    case "&":
      return "&amp;";
    case "<":
      return "&lt;";
    case ">":
      return "&gt;";
    case '"':
      return "&quot;";
    case "'":
      return "&apos;";
    default:
      return character;
    }
  });

  const finalStr = strMap.join('')  

  return finalStr;
}

convertHTML("Dolce & Gabbana") // Dolce &amp; Gabbana

Congratulations!

You just cracked the eleventh challenge in this series.

Cheers and happy coding!