Convert HTML Entities Challenge in JavaScript

Introduction

Converting HTML Entities is a coding challenge where we translate certain special characters into their corresponding HTML-encoded forms. We will be given a string with a sentence where these HTML Entities will be used, and we need to replace each special character with its corresponding HTML Entity.

These are five Entities that need to be translated (&, <, >, ", ') Our job is to replace each special entity with a specific type in the sentence, and each of these will be translated as you can see in the table below:

As you can see, we need to translate each of them into their corresponding types.

If this still feels unclear, don’t worry I’ll walk you through it with an example. I haven’t demonstrated the whole problem with a clear example.

For instance, we will be given the sentence Dolce & Gabbana and we need to replace all the special HTML Entities into their required types, this sentence has only one special entity & we need to replace this with &amp; and the output will be Dolce &amp; Gabbana. All we have to do is replace all the special entities with the translated values.

Example

let str = 'Hamburgers < Pizza < Tacos';

Step 1: we need to translate all these (&, <, >, ", ') special characters from this sentence(str) like shown in the table above.

Step 2: Replace all these (&, <, >, ", ') special characters with translated values in the sentence.

Final Output: Hamburgers &lt; Pizza &lt; Tacos

Hopefully, you will understand this problem clearly. Now it is time to start solving this by Coding.

Practically Solve

function convertHTML(str) {
 let strToArr = str.split("");
  for(let i = 0; i < strToArr.length; i++) {
   switch(strToArr[i]) {
     case '&':
     strToArr[i] = '&amp;';
     break;
     case '<':
     strToArr[i] = '&lt;';
     break;
     case '>':
     strToArr[i] = '&gt;';
     break;
     case '"':
     strToArr[i] = '&quot;';
     break;
     case "'":
     strToArr[i] = '&apos;';
     break;
   }
 }
 return strToArr.join('');
}

console.log(convertHTML("Dolce & Gabbana"));

Breaking Down the Code

Let’s simplify this solution by breaking it down:

As you can see, there is a function named convertHTML and a parameter str, where our sentence is stored. It is a simple basic function in JavaScript.

Now, within the function, we need to start operating on our given str to solve this challenge, keeping all the considerations I mentioned above in mind. First, we need to convert our given str (sentence) into an array so that we can start a loop to access the inner elements and modify them as needed. We achieve this by using the JavaScript built-in method split(). As you can see below:

Note: Make sure not to add spaces between the quotations within the split(''). Using the split method with spaces will return an output that we don’t need for this case.

let strToArr = str.split("");

After converting our str (sentence) into an array, we used a for loop to access the inner elements for modification as needed. Within the loop, we started a switchcondition to make decisions, similar to how we use if/else conditions.

The switch condition works the same way as the if/else condition; we prefer it over if/else when we need to apply many conditions, as it helps us avoid the trap of nested if/else statements. Overall, we use it to keep our code easy and clean.

switch(strToArr[i]) {
 case '&':
 strToArr[i] = '&';
 break;
 case '<':
 strToArr[i] = '&lt;';
 break;
 case '>':
 strToArr[i] = '&gt;';
 break;
 case '"':
 strToArr[i] = '&quot;';
 break;
 case "'":
 strToArr[i] = '&apos;';
 break;
}

You can see that in this condition, we use case for comparison, unlike the if/else condition, where we use the is-equal-to operator (===) for comparing values. After each case, we use the return value in the second line of case '>': and the break keyword to terminate each case statement. We can add as many conditions as we want by following the same steps without compromising code readability.

case '<':
strToArr[i] = '&lt;';
break; 

case <: This step is for comparing the value. It checks if any character within the str (sentence) is like this <.

strToArr[i] = &lt;: This step returns the final value after the case is evaluated as true.

break: This step closes the switch condition.

We need to succeed in replacing all the HTML Entities with our desired translated values. Finally, we need to return the str (sentence). We did the same; you can check below:

strToArr.join('');

We used the join('') method while returning our strToArr (sentence) because we had converted our str into an array, but now we need to return it as a string. The join('') method will convert our array back into a string.