Convert HTML Entities - Why isn't this working?

JavaScript
1

I am trying to do a key-value lookup approach to solve this problem.

However when I console.log convertHTML(“Hamburgers < Pizza < Tacos”) , only the following is output:

Hamburgers &​lt; Pizza

Why does the code terminate before looping through the next characters in the string, in this case, < Tacos is missed out? I thought the output should have resulted in:

Hamburgers &​lt; Pizza &​lt; Tacos

Also, FCC states I am not passing the first test but when I console log what convertedStr is in the end for convertHTML(“Dolce & Gabbana”), it is Dolce &​amp; Gabbana

This is identical to what my function returns but it is not passing that test.


function convertHTML(str) {
  let convertedStr = ''

  const convert = {
    "&" : "&​amp;",
    "<" : "&​lt;",
    ">" : "&​gt",
    "'" : "&​apos;"
  }
  for (let i = 0 ; i<str.length ; i++) {


   if(convert.hasOwnProperty(str[i])) {

   convertedStr = convertedStr + convert[str[i]]

   } else {
     convertedStr = convertedStr +str[i]
   }

   console.log(convertedStr)

   



  }


  return convertedStr;
}

convertHTML("Hamburgers < Pizza < Tacos")

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/convert-html-entities/

2

Looks like you are just replacing convertedStr to a new string everytime when the condition is met instead of adding onto it.

3

@NiSofwareEngineer You actually have 3 separate issues:

  1. Some of values of the convert object properties have a “hidden” character in them. There is a known bug if you try and copy and paste the HTML entities, then you will accidentally copy the hidden characters which will throw off the tests. Just manually type out these to avoid this problem.

  2. One of your HTML entities was missing an ending semi-colon.

  3. You only have 4 properties in your convert object, but you should have 5. You are missing one of the characters which needs to be converted.

4

Make sure your return statement is not placed inside of the for-loop else the function will return without completing the loop.
I see you have not implemented condition for double quotes. Maybe adding that will pass all the tests.

5

As mentioned above, there were some unseen characters, pasting into an editor you’ll see something similar to this: &•​apos; for each key value in your convert object.

Edit:

That said, a more functional approach would be using the pre-exsisting method .replace() which you can read more about at MDN. This method is a prototype of String and is chainable. It does not change the string, it returns a new string instead of modifying the existing string and you can utilize regex’s global flag to replace multiple occurrences e.g. /&/g.

Also, In modern browsers, benchmarks show this method as having a slight edge over your approach in terms of performance.

function replace(str) {
  return str
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;') // ..etc.
}

function replace(string) {
  return string
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/'/g, '&apos;')
}

console.log(replace("Taco's > Hamburgers & pizza")) // Taco&apos;s &gt; Hamburgers &amp; pizza