Let's solve freeCodeCamp's intermediate algorithm scripting challenge, 'Convert HTML Entities'.
Starter Code
function convertHTML(str) {
return str;
}
convertHTML("Dolce & Gabbana");
Instructions
Convert the characters &
, <
, >
, "
(double quote), and '
(apostrophe), in a string to their corresponding HTML entities.
Test Cases
convertHTML("Dolce & Gabbana") should return "Dolce & Gabbana".
convertHTML("Hamburgers < Pizza < Tacos") should return "Hamburgers < Pizza < Tacos".
convertHTML("Sixty > twelve") should return "Sixty > twelve".
convertHTML('Stuff in "quotation marks"') should return "Stuff in "quotation marks"".
convertHTML("Schindler's List") should return "Schindler's List".
convertHTML("<>") should return "<>".
convertHTML("abc") should return "abc".
Our Approach
The instructions for this challenge are short and to the point.
Our one input is
str
, a string. Looking at the test cases, length and characters vary. Some have white spaces, some have non-letter characters, another is all letters.We must return a string.
We need to convert the non-letter characters to their HTML entities within the
str
and return that.
For reference -
Character | HTML Entity |
---|---|
& | & |
< | < |
> | > |
" (double quote) | " |
' (apostrophe) | ' |
Like a few other challenges, I think it would be beneficial to split up str
into an array to better evaluate the input.
"Dolce & Gabbana".split('');
// [ 'D', 'o', 'l', 'c', 'e', ' ', '&', ' ', 'G', 'a', 'b', 'b', 'a', 'n', 'a' ]
The above looks like an eye sore but I think it will be easier to single out the characters we are looking to change.
We can create a variable to hold the str.split('')
.
const strSplit = str.split('');
The next step will be to loop through our newly created array, going to each index to see if it is equal to one of the special characters we're looking for.
We'll use a for loop and a switch statement. We can make each special character a case and then change that specific index to the HTML entity of the special character.
for (let i = 0; i < strSplit.length; i++) {
switch(strSplit[i]) {
case "&":
strSplit[i] = "&";
break;
case "<":
strSplit[i] = "<";
break;
case ">":
strSplit[i] = ">";
break;
case "'":
strSplit[i] = "'"
break;
case '"':
strSplit[i] = """
break;
}
}
Our array is now updated with the special characters changed. The last step would be to convert the array back into a string. We can accomplish that using join()
.
return strSplit.join('');
That is all!
Our Solution
function convertHTML(str) {
const strSplit = str.split('');
for (let i = 0; i < strSplit.length; i++) {
switch(strSplit[i]) {
case "&":
strSplit[i] = "&";
break;
case "<":
strSplit[i] = "<";
break;
case ">":
strSplit[i] = ">";
break;
case "'":
strSplit[i] = "'"
break;
case '"':
strSplit[i] = """
break;
}
}
return strSplit.join('');
}
Links & Resources
'Convert HTML Entities' Challenge on fCC
Thank you for reading!
Top comments (1)
Thanks sir. Your approaching , explanation and solution are so good and easy to understand for me .