Solving "Convert HTML Entities" / freeCodeCamp Algorithm Challenges

#freecodecamp #algorithms #challenge #javascript

Let's solve freeCodeCamp's intermediate algorithm scripting challenge, 'Convert HTML Entities'.

Starter Code

function convertHTML(str) {
  return str;
}

convertHTML("Dolce & Gabbana");

Instructions

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

Test Cases

convertHTML("Dolce & Gabbana") should return "Dolce &amp; Gabbana".
convertHTML("Hamburgers < Pizza < Tacos") should return "Hamburgers &lt; Pizza &lt; Tacos".
convertHTML("Sixty > twelve") should return "Sixty &gt; twelve".
convertHTML('Stuff in "quotation marks"') should return "Stuff in &quot;quotation marks&quot;".
convertHTML("Schindler's List") should return "Schindler&apos;s List".
convertHTML("<>") should return "&lt;&gt;".
convertHTML("abc") should return "abc".

Our Approach

The instructions for this challenge are short and to the point.

Our one input is str, a string. Looking at the test cases, length and characters vary. Some have white spaces, some have non-letter characters, another is all letters.
We must return a string.
We need to convert the non-letter characters to their HTML entities within the str and return that.

For reference -

Character	HTML Entity
&	`&`
<	`<`
>	`>`
" (double quote)	`"`
' (apostrophe)	`'`

Like a few other challenges, I think it would be beneficial to split up str into an array to better evaluate the input.

"Dolce & Gabbana".split('');
// [ 'D', 'o', 'l', 'c', 'e', ' ', '&', ' ', 'G', 'a', 'b', 'b', 'a', 'n', 'a' ]

The above looks like an eye sore but I think it will be easier to single out the characters we are looking to change.

We can create a variable to hold the str.split('').

const strSplit = str.split('');

The next step will be to loop through our newly created array, going to each index to see if it is equal to one of the special characters we're looking for.

We'll use a for loop and a switch statement. We can make each special character a case and then change that specific index to the HTML entity of the special character.

switch (MDN)

for (let i = 0; i < strSplit.length; i++) {
    switch(strSplit[i]) {
    case "&":
      strSplit[i] = "&amp;";
      break;
    case "<":
      strSplit[i] = "&lt;";
      break;           
    case ">":
      strSplit[i] = "&gt;";
      break;
    case "'":
      strSplit[i] = "&apos;"
      break;
    case '"':
      strSplit[i] = "&quot;"
      break;       
  }
}

Our array is now updated with the special characters changed. The last step would be to convert the array back into a string. We can accomplish that using join().

return strSplit.join('');

That is all!

Our Solution

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

  return strSplit.join('');
}