Convert HTML Entities / string.replace()

Convert HTML Entities / string.replace()
0.0 0

#1

Tell us what’s happening:

i have no idea ow to use str.replace();
not sure i understand the documentation on how to use a function as the thing to be replaced with.
and i’m not sure how to make a “dictionary” of keys to reference what to be replaced with. (switch statement? object? array with .map() ?)

in short , absolutely lost

ignore my code, its my 127th try, and absolutely useless.

mostly what i want to know is how to use string.replace(); since thats what this exercise seems to be about.

Your code so far

function convertHTML(str) {
  // :)
  var Regcheck = /\W\s/gi;
   var htmlListObj = {'&':"&",
                      "<":"&lt;",
                      ">":"&gt;",
                      "'":"&quot;",
                      '"':"&apos;"};

 /* var a = str.split(" ");
 for(var i = 0;i<a.length;i++){
   if(a[i] === Regcheck )
 }*/
  var b = "";
 for(var i = 0;i<str.length;i++){
   if(str[i].match(Regcheck) === htmlListObj[i]){
     return str.replace(htmlListObj[key],htmlListObj[value]);
   }
 }
  //return b;
  
}

convertHTML("Dolce & ^ $ Gabbana");

Your browser information:

Your Browser User Agent is: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.81 Safari/537.36.

Link to the challenge:


#2

Your htmlListObj looks great. You can definitely use this object when replacing the text. This challenge has many different solutions. Some involve using replace and others do not.

Since you have a for loop iterating through str, you solve without using the replace function. You could do that by first creating a new variable (let’s call it result) and assigning it a blank string. Basically, since you already have a for loop, you can check if each character has a key in the htmlListObj (use hasOwnProperty for this). If it does then you can lookup the value of the key and concatenate it to the result variable. If it does not have a key, then you would just concatenate the current character. Then after you have iterated through the entire str variable, you would return the new result variable.

The most basic way to use the replace function for this challenge is to create a new variable (let’s call it result) and use replace to convert all the & to &amp; and assign the value returned from the replace function back to result. Then you would just repeat the process for the other 4 special characters which need to be converted.

To avoid giving you the solution, I will just show you how replace can be used with a regular expression.

Let’s say we have the following code:

var str = "a ab abc abcd abcde abcdef abcdefg";

If I want to use the replace function to change every instance of letter a to letter z, then I could do this:

var result = str.replace(/a/g, "z"); // now str looks like "z zb zbc zbcd zbcde zbcdef zbcdefg"

The /a/g is a regular expression which says find “a” across the entire string (the g) on which replace was called and replace with the letter z. You can learn more about using Regular Expressions here.

Again, there are many other ways (shorter and less code) and variations of what I have shown you here to solve this challenge. Hopefully, I have given you enough to continue down the path of solving the challenge on your own. If you have any more questions, just let us know.


#3

is concatenating the result int o the output of the loop a “best practice” or the only way?

i’m going to come back here once i solve this, i need to know what the shortest way of solving this is.


#4

i figured it out


function convertHTML(str) {
  // &colon;&rpar;
  var Regcheck = /\W\s/gi;
   var htmlListObj = {'&':"&amp;",
                      "<":"&lt;",
                      ">":"&gt;",
                      '"':"&quot;",
                      "'":"&apos;"};

 var a = str.split("");
 var b =[];
  
   
    for (var i in a) {
    
      if (htmlListObj.hasOwnProperty(a[i])) {
          b.push( htmlListObj[a[i]]);
       }else{b.push(a[i]);} 
     }

var c = b.join("");
 
  return c;
  
}

convertHTML('Stuff in "quotation marks"');

whats the shorter way of doing this? how would i use .replace(); ?


#5

This is not very elegant, but it does use replace:

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

#6

you can shove multiple methods on the end of a return statement!!! eureka! i would have never figured that out

shouldn’t there be a way to make a single function to cover all possibilities, and make one replace statement?


#7

You could do the following, but you still need a conversions object again. I used ES6 syntax to make it shorter

function convertHTML(str) {
  const conversions = {'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&apos;'};
  return str.replace(/[&<>"']/g, find => conversions [find]);
}

#8

what does => do?
i don’t know where to find that in the documentation.
and when did you declare what find is?


#9

The => is syntax for arrow function. It is part of the ES6 syntax and is used a lot now. See arrow function documentation here. After reading the documentation, you should see that find is just an argument I created for use with the function.

Without arrow functions, I could still have written the solution as:

function convertHTML(str) {
  const conversions = {'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&apos;'};
  return str.replace(/[&<>"']/g, function(find) { return conversions[find] });
}

#10

that was EXACTLY what i was looking for!
how did you know to use the function in .replace() like that?


#11

You just have to read the documentation. There are many optional features of most JavaScript functions, but you have to read and study them in detail to know or you stumble upon them in someone else’s code (like today) and then you ask a question.


#12

i did, but i didn’t understand HOW to implement it like you did, HOW did you do it?


#13

HOW did you do it?

I am not sure how else to answer how I did it. The how it is implemented is the code itself. Read Specifying a function as a parameter in the replace function documentation for more information of how to implement it.