HTML Entities - problem with '<>' string check

Hello there, fellow freeCodeCampers!

I’m working on the Convert HTML Entities challenge. It’s still incomplete as I’m not taking all test cases into account (especially the ‘abc’ one). However, I’m experiencing a weird error with the ‘<>’ test case. It’s supposed to return '&​lt;&​gt;', but what I get is '<&gt;'. :man_shrugging:

This is my code so far:

function convertHTML(str) {
  // &colon;&rpar;
  let charEntities = {
    '&': '&amp;',
    '>': '&gt;',
    '<': '&​lt;',
    '"': '&quot;',
    '\'': '&apos;'
  };
  let newStr = '';

  for (let i = 0; i < str.length; i++) {
    for (var j in charEntities) {
      if (str[i] == j) {
        newStr = str.split(str[i]).join(charEntities[j]);
      }
    }
  }
  return newStr;

Testing it on both VS Code and Repl.it yields the same result as mentioned above. The editor over at fCC doesn’t even return any replacements, just the same ‘<>’.

I tried several variations using both symbols, but the problem seems to arise as soon as both symbols are present in the same string.

I’d truly appreciate your help!

Thanks!

Due to a bug which has been fixed but not moved to production, you probably copied/pasted the values from the challenge instructions which have a hidden character throwing off the tests. If you manually type out the values for your charEntities object properties, you should pass the challenge unless you have some other logic issues (which I did not test).

EDIT: You still have some logic issues, because even after manually typing the values, your function incorrectly returns <&gt; instead of &​lt;&​gt; for convertHTML("<>") and incorrectly returns a blank string instead abc for convertHTML("abc"),

Thanks for your quick response, Randell!

About the logic issues, yes, they’re expected because, as I said in my original post, it’s still incomplete – I need to cover for the ‘abc’ case, for example.

I have manually typed the values in both VS Code and Repl.it and get the same results. What really draws my attention is how the error happens whenever ‘<’ and ‘>’ appear in the same string.

I can’t do it myself right now but maybe if you check your code with this tool you can see where it goes wrong

http://pythontutor.com/javascript.html

For the FreeCodeCamp console showing <> that’s because it is rendered in the page and the html elements are converted to the symbols when rendered

Actually, found - considering you always start from str to get the value of newStr this will work only for one html entity to convert, because the next one will start again from str deleting what you did previously

1 Like

Thanks for your feedback!

I will check my code using your suggested tool. However, do notice that some successful test cases I’ve run include two or more HTML entities.

I’ll get back here with any findings.

Thanks again!

More of the same entity or different ones?

Sorry, was busy with something else all day yesterday.

So, to answer your questions, this, for example:

console.log(convertHTML('Hamburgers > Pizza > Tacos'));

gives out the correct answer:

Hamburgers &gt; Pizza &gt; Tacos

Also, rechecking this, yes, good point.

Will have to rethink this approach. Thanks for the hint!

This works because you have the same entity repeated, the other situation in which it doesn’t work is when you have different entities in the same string

All right, so I changed my logic.

Instead of creating a new string every time over I splitted it into an array first, checked against the object entities and reassigned the array items that fulfilled the condition, joining the array back into a string at the end:

function convertHTML(str) {
  // &colon;&rpar;
  let charEntities = {
    '&': '&amp;',
    '>': '&gt;',
    '<': '&​lt;',
    '"': '&quot;',
    '\'': '&apos;'
  };
  let newStr = '';
  let strArr = str.split('');

  for (let i = 0; i < strArr.length; i++) {
    for (var j in charEntities) {
      if (strArr[i] == j) {
        strArr[i] = charEntities[j];
      }
    }
  }
  newStr = strArr.join('');
  return newStr;
}

The code above passes all tests in VS Code, Repl.it, and JavaScript Tutor.

However, over at the freeCodeCamp’s exercise page, it fails for two cases:

* convertHTML("Hamburgers < Pizza < Tacos")
* convertHTML("<>")

These are basically the same edge cases that got me rethinking my approach in the first place. Again, these two cases pass everywhere else. Could it be a bug in fCC? Should I report it? Is there a workaround?

Again, thanks in advance!

Scrape that! It was, again, a hidden character problem here: '<': '&​lt;',

Solved it for good! :sweat_smile: :smiley: