DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,864 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Viren B
Viren B

Posted on • Originally published at virenb.cc

Solving "Convert HTML Entities" / freeCodeCamp Algorithm Challenges

'Convert HTML Entities'

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
& &amp;
< &lt;
> &gt;
" (double quote) &quot;
' (apostrophe) &apos;

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('');
}

Links & Resources

'Convert HTML Entities' Challenge on fCC

freeCodeCamp

Donate to FCC!

Solution on my GitHub

Thank you for reading!

Top comments (1)

Collapse
 
thiha007 profile image
Thiha007 • Edited on

Thanks sir. Your approaching , explanation and solution are so good and easy to understand for me .

Classic DEV Post from 2020:

js visualized

πŸš€βš™οΈ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! πŸ₯³

Happy coding!