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.
Hints
Hint 1
You can use regular Expressions however I didn’t in this case.
Hint 2
You will benefit from a chart with all the html entities so you know which ones are the right ones to put.
Hint 3
You should separate the string and work with each character to convert the right ones and then join everything back up.
Solutions
Solution 1 (Click to Show/Hide)
function convertHTML(str) {
// Split by character to avoid problems.
var temp = str.split("");
// Since we are only checking for a few HTML elements, use a switch
for (var i = 0; i < temp.length; i++) {
switch (temp[i]) {
case "<":
temp[i] = "<";
break;
case "&":
temp[i] = "&";
break;
case ">":
temp[i] = ">";
break;
case '"':
temp[i] = """;
break;
case "'":
temp[i] = "'";
break;
}
}
temp = temp.join("");
return temp;
}
//test here
convertHTML("Dolce & Gabbana");
Code Explanation
Assign temp to str.split(''), which creates an array containing each individual character in the passed in string.
Pass each character in the newly created array into a switch() statement.
Replace the HTML entities with their corresponding HTML entity string (i.e. '&' becomes '&' in line 51)
temp.join('') converts the array of characters into a string to be returned.
function convertHTML(str) {
// Use Object Lookup to declare as many HTML entities as needed.
const htmlEntities = {
"&": "&",
"<": "<",
">": ">",
'"': """,
"'": "'"
};
// Using a regex, replace characters with it's corresponding html entity
return str.replace(/([&<>\"'])/g, match => htmlEntities[match]);
}
// test here
convertHTML("Dolce & Gabbana");
Code Explanation
Create an object to use the Lookup functionality and easily find the characters.
Use replace() to replace characters with regex.
The first argument for replace() is a regex that catches all the target characters and puts them into a capturing group.
The second arguments for replace() is a function with the matched character as a parameter. It returns the correspondant entity from htmlEntities.
function convertHTML(str) {
// Use Object Lookup to declare as many HTML entities as needed.
const htmlEntities = {
"&": "&",
"<": "<",
">": ">",
'"': """,
"'": "'"
};
//Use map function to return a filtered str with all entities changed automatically.
return str
.split("")
.map(entity => htmlEntities[entity] || entity)
.join("");
}
// test here
convertHTML("Dolce & Gabbana");
Code Explanation
Create an object to use the Lookup functionality and 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.
The a function is added which is what returns the converted entity or the original one if there is no conversion.
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.
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]='&'; //change it to &
break; //end of this case
case '<': //if you see a <
temp[i]='<';//change it to <
break;//end case
case '>'://if you see a >
temp[i]='>';//change it to >
break;//end case
case '"'://if you see a " inside '
temp[i]='"';//change it to &qout;
break;//end case
case "'"://if you see a ' inside "
temp[i]="'";//change it to '
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]='&'; //change it to &
} else if (temp[i]==='<'){//if you see a <
temp[i]='<';//change it to <
} else if (temp[i]==='>'){//if you see a >
temp[i]='>';//change it to >
} else if (temp[i]==='"'){//if you see a " inside '
temp[i]='"';//change it to &qout;
} else if (temp[i]==="'"){//if you see a ' inside "
temp[i]="'";//change it to '
}
}
temp = temp.join(''); //turns the array back into a string
return temp;
}
convertHTML("Dolce & Gabbana");
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) {
// :)
var newString = str;
for (var i = 0; i < str.length; i++){
if (str[i] == '&') {
newString = newString.replace(/&/gi, '&');
}
else if (str[i] == '<'){
newString = newString.replace(/</gi, '<');
}
else if (str[i] == '>'){
newString = newString.replace(/>/gi, '>');
}
else if (str[i] == '"') {
newString = newString.replace(/"/gi, '"');
}
else if (str[i] == "'") {
newString = newString.replace(/'/gi, ''');
}
}
return newString;
}
convertHTML("<>");
// loop through the string until you find &, <, >, ", or '.
//once you find a particular character, replace with corresponding HTML entitites
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 = ['&','<;','>',"'",'";'];
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;
});
}
function convertHTML(str) {
const regEx = /&|<|>|"|'/g;
const output = str.replace(regEx, function(match) {
switch(match) {
case '&':
match = '&';
break;
case '<':
match = '<';
break;
case '>':
match = '>';
break;
case '"':
match = '"';
break;
case "'":
match = ''';
break;
}
return match;
});
return output;
}
convertHTML("Dolce & Gabbana");
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) {
// :)
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], "&");
break;
case "<":
str = str.replace(strMatch[i], "<");
break;
case ">":
str = str.replace(strMatch[i], ">");
break;
case '"':
str = str.replace(strMatch[i], """);
break;
case "'":
str = str.replace(strMatch[i], "'");
break;
}
}
}
return str;
}
convertHTML("Dolce & Gabbana");
// 2nd solution
function convertHTML(str) {
// :)
var regex = /[&<>'"]/g;
var charObj = {
"&": "&",
"<": "<",
">": ">",
'"': """,
"'": "'"
};
return str.replace(regex, function(char) {
return charObj[char];
});
}
convertHTML("Dolce & Gabbana");
