Follow

Follow

# Convert HTML Entities - JavaScript Solution & Walkthrough

## (11/21) Learn how to solve coding challenges using FreeCodeCamp's curriculum.

Benjamin Semah
Â·Apr 27, 2022Â·

• 11/21 Convert HTML Entities
• Understanding the Challenge
• Pseudocode
• Solving the Challenge
• Final Solution
• Congratulations!

## 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 &amp; Gabbana`.

This is because the corresponding HTML entity for `&` is `&amp;`

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)
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;

• `&` = `&amp;`
• `<` = `&lt;`
• `>` = `&gt;`
• `"` = `&quot;`
• `'` = `&apos;`

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!

Â