freeCodeCamp Algorithm Challenge Guide: Convert HTML Entities

freeCodeCamp Algorithm Challenge Guide: Convert HTML Entities
0.0 0

#1

:triangular_flag_on_post: Remember to use Read-Search-Ask if you get stuck. Try to pair program :busts_in_silhouette: and write your own code :pencil:

:checkered_flag: Problem Explanation:

  • You have to create a program that will convert HTML entities from string to their corresponding HTML entities. There are only a few so you can use different methods.

:speech_balloon: Hint: 1

  • You can use regular Expressions however I didn’t in this case.

try to solve the problem now

:speech_balloon: Hint: 2

  • You will benefit from a chart with all the html entities so you know which ones are the right ones to put.

try to solve the problem now

:speech_balloon: Hint: 3

  • You should separate the string and work with each character to convert the right ones and then join everything back up.

try to solve the problem now

Spoiler Alert!

687474703a2f2f7777772e796f75726472756d2e636f6d2f796f75726472756d2f696d616765732f323030372f31302f31302f7265645f7761726e696e675f7369676e5f322e676966.gif

Solution ahead!

:beginner: Basic Code Solution:

function convertHTML(str) {
  // Split by character to avoid problems.

  var temp = str.split('');

  // Since we are only checking for a few HTML elements I used a switch

  for (var i = 0; i < temp.length; i++) {
    switch (temp[i]) {
      case '<':
        temp[i] = '&lt;';
        break;
      case '&':
        temp[i] = '&amp;';
        break;
      case '>':
        temp[i] = '&gt;';
        break;
      case '"':
        temp[i] = '&quot;';
        break;
      case "'":
        temp[i] = "&apos;";
        break;
    }
  }

  temp = temp.join('');
  return temp;
}

//test here
convertHTML("Dolce & Gabbana");

Code Explanation:

Explain solution here and add any relevant links

Relevant Links

:rocket: Run Code

:sunflower: Intermediate Code Solution:

function convertHTML(str) {
//Chaining of replace method with different arguments
  str = str.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;').replace(/'/g,"&apos;");
return str;
}

// test here
convertHTML("Dolce & Gabbana");

:rocket: Run Code

Code Explanation:

Explain solution here and add any relevant links

Relevant Links

:rotating_light: Advanced Code Solution:

function convertHTML(str) {
  // Use Object Lookup to declare as many HTML entities as needed.
  var htmlEntities = {
    '&':'&amp;',
    '<':'&lt;',
    '>':'&gt;',
    '\"':'&quot;',
    '\'':"&apos;"
  };
  //Use map function to return a filtered str with all entities changed automatically.
  return str.split('').map(function(entity){
    return htmlEntities[entity] || entity;
  }).join('');
}

// test here
convertHTML("Dolce & Gabbana");

:rocket: Run Code

Code Explanation:

  • Create a object to use the Lookup functionality to easily find the characters.
  • Split the original string by characters and use map to check for the changed html entity or use the same one. Alternatively you could use Regex str.replace(/&|<|>|"|'/gi.
  • The a function is added which is what returns the converted entity or the original one if there is no conversion. If you go the regex route then you just have to return the matched hits. return html[entity];
  • Lastly we join all the characters once again.

Note that if you went the regex route then you don’t need to join anything, just make sure you return the whole operation or save it to a variable and then return it.

Relevant Links

:clipboard: NOTES FOR CONTRIBUTIONS:

  • :warning: DO NOT add solutions that are similar to any existing solutions. If you think it is similar but better, then try to merge (or replace) the existing similar solution.
  • Add an explanation of your solution.
  • Categorize the solution in one of the following categories — Basic, Intermediate and Advanced. :traffic_light:
  • Please add your username only if you have added any relevant main contents. (:warning: DO NOT remove any existing usernames)

See :point_right: Wiki Challenge Solution Template for reference.


#2

#3

#4

String.prototype.replace() can take a function on the second argument, then use the function to create a switch statement.

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

convertHTML("Dolce & Gabbana");

#5

Here’s how I approached it:

function convertHTML(str) {
  
  var characters = [/&/g, /</g, />/g, /\"/g, /\'/g];
  var entities = ["&amp;", "&lt;", "&gt;", "&quot;", "&apos;"];
  
  for(var i = 0; i < characters.length; i++) {
    str = str.replace(characters[i], entities[i]);
  }
  
  return str;
}

#6

Lots of similar variations possible, here’s mine, replace() method with an inline function:

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

#7

I wrote out the basic code adding in comments:

function convertHTML(str) {
  var temp = str.split('');//turns string into an array of letters
  for (var i=0;i<temp.length;i++){ //loops through the temp array
switch (temp[i]) { //start of a switch statement
  case '&': //if you see an &
    temp[i]='&amp;'; //change it to &amp;
    break; //end of this case
  case '<': //if you see a <
    temp[i]='&lt;';//change it to &lt;
    break;//end case
  case '>'://if you see a >
    temp[i]='&gt;';//change it to &gt;
    break;//end case
  case '"'://if you see a " inside '
    temp[i]='&quot;';//change it to &qout;
    break;//end case
  case "'"://if you see a ' inside "
    temp[i]="&apos;";//change it to &apos;
    break;//end case and switch
}
  }
  temp = temp.join(''); //turns the array back into a string
  return temp;
}

convertHTML("Shindler's List");

And then my own version using if statements:

function convertHTML(str) {
  var temp = str.split('');//turns string into an array of letters
 for (var i=0;i<temp.length;i++){ //loops through the temp array
if (temp[i]==='&') { //if you see an &
    temp[i]='&amp;'; //change it to &amp;
} else if (temp[i]==='<'){//if you see a <
    temp[i]='&lt;';//change it to &lt;
  } else if (temp[i]==='>'){//if you see a >
    temp[i]='&gt;';//change it to &gt;
  } else if (temp[i]==='"'){//if you see a " inside '
    temp[i]='&quot;';//change it to &qout;
  } else if (temp[i]==="'"){//if you see a ' inside "
    temp[i]="&apos;";//change it to &apos;
  }
  }
  temp = temp.join(''); //turns the array back into a string
  return temp;
}

convertHTML("Dolce & Gabbana");

#8

Not very sophisticated, but it works.

function convertHTML(str) {
  // &colon;&rpar;
  var toHTML = {
    "&" : "&amp;", 
    "<" : "&lt;", 
    ">" : "&gt;",
    '"' : "&quot;",
    "'" : "&apos;"
  }
  str = str.replace(/&/g, toHTML["&"]);
  str = str.replace(/</g, toHTML["<"]);
  str = str.replace(/>/g, toHTML[">"]);
  str = str.replace(/\"/g, toHTML["\""]);
  str = str.replace(/\'/g, toHTML["'"]);

  return str;
}

convertHTML("Dolce & Gabbana");

#9

Here is my solution:

function convertHTML(str) {
   

    var expressions = {

        "&": "&amp;",
        "<": "&lt;",
        ">": "&gt;",
        "\"": "&quot;",
        "\'": "&apos;"
    };

    for (var i in expressions) {
        str = str.replace(new RegExp(i, 'g'), expressions[i]);
    }

    return str;
}

convertHTML("Dolce & Gabbana");

#10

the simplest one, but not the best, its slow…
Here is my solution:

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

convertHTML("Dolce & Gabbana");

#11

Here is my Solution:

function convertHTML(str) {
// :slight_smile:

function convert(match, offset, string) {
if (string[offset] === ‘&’){
return ‘&’;
} else if (string[offset] === ‘<’){
return ‘<’;
} else if (string[offset] === ‘>’) {
return ‘>’;
} else if (string[offset] === “’”) {
return ‘’’;
} else if (string[offset] === ‘"’) {
return ‘"’;
}

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

}

convertHTML(‘Stuff in “quotation marks”’);


#12

Probably not the most elegant or efficient but for those of you who like to you use for loops and if statements when possible, like myself, here’s how I did it. If this is a method I should be trying to stay away from for some reason please let me know.

function convertHTML(str) {
  // &colon;&rpar;
  
  var newString = str;
  
  for (var i = 0; i < str.length; i++){
    if (str[i] == '&') {
      newString = newString.replace(/&/gi, '&amp;');
    }
    else if (str[i] == '<'){
      newString = newString.replace(/</gi, '&lt;');
    }
    else if (str[i] == '>'){
      newString = newString.replace(/>/gi, '&gt;');
    }
    else if (str[i] == '"') {
      newString = newString.replace(/"/gi, '&quot;');
    }
    else if (str[i] == "'") {
      newString = newString.replace(/'/gi, '&apos;');
    }
    
  }
  
  return newString;
}

convertHTML("<>");

// loop through the string until you find &, <, >, ", or '.

//once you find a particular character, replace with corresponding HTML entitites

#13

Hi, I know how to solve the problem in another way, but what is the problem with this code? When I run the test it fails in some of the tests, but I can’t see where.

My code example is:

 function convertHTML(str) {
 
 var characters = ['&','<','>','\'','\"'];
 var htmlEntities = ['&amp;','&lt;','&gt;',"&apos;",'&quot;'];
 var re = /[&<>'"]/g;
 
 
 return str.replace(re,function(character) {
   for ( var i = 0; i < characters.length; i++ ) {
     if ( character == characters[i] ) {
       character = htmlEntities[i];
     }
   }
   return character;
 });
}

#14

My solution:

function convertHTML(str) {
  
  const regEx  = /&|<|>|"|'/g;
  const output = str.replace(regEx, function(match) {
    switch(match) {
      case '&':
        match = '&amp;';
        break;
      case '<':
        match = '&lt;';
        break;
      case '>':
        match = '&gt;';
        break;
      case '"':
        match = '&quot;';
        break;
      case "'": 
        match = '&apos;';
        break;
    }
    return match;
  });
  
  return output;
  
}

convertHTML("Dolce & Gabbana");

#15
    function convertHTML(str) {
      // &colon;&rpar;
      var rAnd=/&/g;
      var rLess=/</g;
      var rGreat=/>/g;
      var rDobQ=/"/g;
      var RSinQ=/'/g;
      var strNew;
      
     
      for(var i=0; i<str.length; i++){
        
        var key=str.charAt(i);
        //console.log(key);
            if(key==='&'){
             
              strNew=str.replace(rAnd , '&amp;');
            }
            
         else   if(key==='<'){
             
              strNew=str.replace(rLess , '&lt;');
            }
            
            
          else  if(key==='>'){
             
              strNew=str.replace(rGreat , '&gt;');
            }
            
           else if(key==='"'){
             
              strNew=str.replace(rDobQ , '&quot;');
            }
            
          else  if(key==="'"){
             
              strNew=str.replace(RSinQ , '&apos;');
            }
        
        
        
      }
      return strNew;
    }
    convertHTML("Hamburgers < Pizza < Tacos");
    convertHTML("<>");

When I m passing <> to convertHTML is produce wrong output can anybody explain why I m getting wrong output


#16

Here’s my solution

function convertHTML(str) {
// :slight_smile:
var entity={
’&’ :"&",
’>’ :">",
’<’ :"<",
’"’ :""",
"’" :"’"
};
var regex;
for(var key in entity){
regex= new RegExp(key, ‘g’);
str=str.replace(regex,entity[key]);
}
return str ;
}

convertHTML(“Dolce & Gabbana”);


#17

This solution worked for me:

function convertHTML(str) {
  
  var lookup = {
    "&": "amp",
    "<": "lt",
    ">": "gt",
    "\"": "quot",
    "'": "apos",
  };
  
  // define regEx
  var regEx = /[&'<>"']/g;
  
  // replace and match with lookup object
  var htmlString = str.replace(regEx, function(i) {
    return '&' + lookup[i] + ';';
  });

  return htmlString;
}

convertHTML("Dolce & Gabbana");

#18

  • i had to do some research for this one
  • but basically, i found out i could search for multiple characters with one function
  • then just use return instead of breaks
  • i am not exactly sure of the order that the interpreter or regex engine or whatever does all this stuff, but the code works and it is simple

#19

I like yours the best! I dont know about speed but 10/10 for readability.

You could make your regex even a tiny bit shorter with using [] instead of | --> /[&<>’"]/g;


#20

I build two solutions. The first one with regex, a switch, replace and a loop and the second one just with an object and replace because I wasnt very satisfied with my first solution.

// 1st solution
function convertHTML(str) {
  // &colon;&rpar;
    var regex = /[&<>\'\"]/g;
    var strMatch = str.match(regex);
    if(strMatch !== null) {
        for (var i = 0; i < strMatch.length; i++) {
            switch(strMatch[i]) {
            case "&":
                str = str.replace(strMatch[i], "&amp;");
                break;
            case "<":
                str = str.replace(strMatch[i], "&lt;");
                break;
            case ">":
                str = str.replace(strMatch[i], "&gt;");
                break;
            case '"':
                str = str.replace(strMatch[i], "&quot;");
                break;
            case "'":
                str = str.replace(strMatch[i], "&apos;");
                break;
            }    
        }    
    }
    
    return str;
}

convertHTML("Dolce & Gabbana");


// 2nd solution
function convertHTML(str) {
  // &colon;&rpar;
    var regex = /[&<>'"]/g;
    var charObj = {
        "&": "&amp;",
        "<": "&lt;",
        ">": "&gt;",
        '"': "&quot;",
        "'": "&apos;"
    };
        
    return str.replace(regex, function(char) {
        return charObj[char];
    });
}

convertHTML("Dolce & Gabbana");