Initial Idea with Convert HTML Entities

Tell us what’s happening:

Below I have my initial idea. It’s nothing much but I’m testing the waters to see if I’m on the right track. I feel skeptical about the transformation of str into an array. Also, I don’t know if it’s necessary/useful/feasible to “convert” an array into an object literal. Perhaps I should be saying object-array or array-objecr?
But anyway, I’d like to know if there’s anything with promise in my initial idea

Your code so far


function convertHTML(str) {
  //convert str into array
  //convert array into object literal
  //use key-value pairs within object literal to assign particular symbols to HTML entities
  //convert back into str
    return str;
}

convertHTML("Dolce & Gabbana");

Your browser information:

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

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

Be careful on how you do it, you can certainly solve this with an object, but be careful on what you put in that object.
You don’t need to covert your string in an object, using an object is not a bad way, but what object?

Use:
.replace() & object literal to solve this problem.

Example:

const plural = {
     'y':  "ies"
};
let str = "Pony";

str.replace(/y/g, ((letter) => plural[letter]));

// Ponies

No reason to convert to different data types.

I’m only passing one test. The code is below:


function convertHTML(str){ 
  const strArr = [
    {"/[\"\w+\"]/" : /[\w+]/},
    ]
  return str;
}

convertHTML("Dolce & Gabbana");

That said, I’ve been wondering why I’m passing. The code doesn’t necessarily have any relation to str, so why would it pass? Also, I thought that some sort of method (like replace()) would be needed to bring the code to finality and produce a result. This didn’t happen with the above code and I’m wondering why…

Furthermore, I thought that I could do the entire thing in regex. So, in a previous attempt I tried to use key value pairs to do this. I’ve posted that attempt below. The only one that passed was the one I posted above, but I’m wondering why this didn’t happen with any of the rest of them as I used the same syntax for all of them…or at least I think I did.

function convertHTML(str) {
var strArr = [
    {key: "&", value:/["&"]/}, 
    {key: "<", value: /["&lt"]/}, 
    {key: ">", value: /["&gt;"]/}, 
    {key: "''", value: /["&quot;"]/}, 
    {key:"'", value: /["&apos;"]/}, 
    {key: "<>", value: /["&lt;&gt;"]/}, 
    {key: "/[\"\w+\"]/", value: /[\w+]/} 
    ]
return str;
}

Do I even need to use a method in this challenge?
At first I thought that I could use character classes (i.e. \D for"&", but this seemed far too broad. I got rid of this anyway because it seems like a slipshod approach, although the fact that the last test passed bugs me and I was wondering if someone could tell me why.

convertHTML('abc') should return 'abc'

This doesn’t have html entities to convert, if you don’t do anything stupid this will always pass.

You don’t need replace if you don’t want to, but you still need a way to connect the symbols with the html thing, be that statements, object lookup, arrays… it can be anything, you just have to put the right logic flow in there

I’m still passing the last test, so I haven’t done anything too silly…but I’m also passing nothing else.

I think that I have a good structure even if my syntax is probably way off, but…

What I’m looking for are

  1. Acknowledgement that my approach needs complete revamping because the way I’m going about this actually hindering the computer’s ability to work…perhaps with incorrect syntax with object array or incorrect lookup terminology for them.

  2. Nudges, suggestions where I’ve zigged and should’ve zagged. For example, I think that my problem probably occurs in my if statement. I think that it’s become too complex and that it could be simpler. (I think the entire thing could be simpler…I even wonder if forEach could be used…but I have no idea if this is correct but an acknowledgement that I’m on to something would give me greater confidence in pursuing it, which is really all I’m looking for.)

Once again, thank you for parsing through my efforts.


function convertHTML(str) {
  //set up key-value pairs for reference
const htmlObj = [
  {key: "&", value: "&amp;"},
  {key: "<", value: "&lt;"},
  {key: ">", value: "&gt;"},
  {key: "'", value: "&apos;"},
  {key: "<>", value: "&lt;&gt;"}
]
  //run 2d loops: during the first loop run through indexes of str AND during the second loop run through the key-value pairs.
for(let i = 0; i < str.length; i++){
  for(let j = 0; j < htmlObj.length; j++){
  //if an element from the initial str array matches an element assigned to "key", then replace that particular "key" element in string with its companion element labled "value"
    if(str[i]===htmlObj[j]["key"]){
     str[i].replace(htmlObj[j]["key"], htmlObj[j]["value"]);
    }
  }
}

  return str;
}

convertHTML("Dolce & Gabbana");

Congrats on solving it… but…
you don’t need to use key and value in your htmlObj.

function convertHTML(str) {

    const convert = {
        '&': "&amp;",
        '<': "&lt;",
        '>': "&gt;",
        '"': "&quot;",
        '\'': "&apos;"
    };

    return str.replace(/[&<>'"]/g, ((char) => convert[char]));
    
}

convertHTML("Dolce & Gabbana");

This is two characters so it would never
work in your loop, but you already have these two characters so you don’t need this, you are also missing the case for the "

You are trying to change directly one element of a string, you can’t do that.
The method is for whole the string
You don’t need to check if something is present if you use replace, if it is not present replace will simply not work so the if statement is not needed.

These are a few hints that you can choose to look at if you are stuck:
They are extra hints about this issue and about other issues that will come up once you solve this particular one

Extra hint: two loops are a bit much in the way you are doing, you need only one

Extra hint: loop only on the key/value pairs, replace will already check the whole string


These are for an other issue that will come up later:

Extra hint: some of the symbols appear more than once, you need to match them all - check the browser console

Extra hint: could the g tag in a regex be of any use?

Extra hint: using the array of objects you need to use the method to create a regex expression from a variable

So, all this is starting to make a lot of sense and I can follow my logic but I’m still not passing anything. I’m console logging the crap out of my code but either nothing’s coming up or it’s the unaltered content of str without the HTML entity in place of the symbol.

I’m really sure that I’m just not including something essential in my syntax.
I feel confident that it’s my if statement. Something’s off about it. I don’t know if I’m using htmlObj in the wrong place, or if it’s my str variable.

I only want to know if it’s a syntax issue and I’ll start looking through the code again or if it’s something deeper than that?


function convertHTML(str) {
 //create key-value directory of HTML entities in array of objects
 const htmlObj = [
   {'&':'&amp;'},
   {'<':'&lt;'},
   {'>':'&gt;'},
   {'\'':'&apos;'},
   {'"':'&quot;'}
 ];
 //create variable containing regex code to search for relavent symbols
 const regex = /[&<>'"]/g;
 //loop through array of objects and if element in array equals symbol in regex, then execute replace method on that element in str for the element in regex
 for(let i = 0; htmlObj.length; i++){
if(htmlObj[i] === regex){
  str.replace(i, regex)
 }
 }
  return str;
}

convertHTML("Dolce & Gabbana");

It’s kinda close.

First issue is str.replace(regexp|substr, newSubstr|function)

“Happy”.replace(“H”, “h”); // happy

You’re searching for i, which is a number. ie str.replace(i, regex);

You have defined an array that contain objects,
So htmlObj[i]=== regex will never be true, one is an object, the other a regular expression

Why do you need to check that those symbols are in your object? They are, you have created the array to have them, you have created the regex to have them.

Try reading this again and see if it gives you any inspiration:

This

 //create key-value directory of HTML entities in array of objects
 const htmlObj = [
   {'&':'&amp;'},
   {'<':'&lt;'},
   {'>':'&gt;'},
   {'\'':'&apos;'},
   {'"':'&quot;'}
 ];

Is not a key-value directory of HTML entities. It is an array of objects. This is a key-value directory:

const htmlObj = {
   '&':'&amp;',
   '<':'&lt;',
   '>':'&gt;',
   '\'':'&apos;',
   '"':'&quot;'
};

The second one allows you to actually look things up.

Thank you all. I figured it out.

1 Like