1

I am looping through an array of letters and am trying to find only &, <, >, " and ' characters to replace them with their HTML entities...

Here is my code

function convertHTML(str) {

    // html entity switch block
    function entify(char){
        alert(char);
        switch (char) {
            case '&':
                return '&​amp;';
            case '<':
                return '&​lt;';
            case '>':
                return '&​gt;';
            case '"':
                return '&​quot;';
            case '\'':
                return '&​apos;';
        }
    }


    // convert string into an array
    str = str.split('');
    // loop through the array
    for (var i = 0; i < str.length; i++) {
        // compare each to the regular expression, if it matches then it needs to be replaced with an html entity
        console.log(str[i]);
        str[i] = str[i].replace(/[&<>"']/g, entify);
    }
    str = str.join('');
    console.log(str);
    return str;
}

convertHTML("&");

Unfortunately my regular expression doesn't seem to be picking up the characters and I'm not even triggering the entify function.

Why is that?

Jethro Hazelhurst
  • 3,230
  • 7
  • 38
  • 80
  • 1
    Is the objective to HTML encode a string? If so there are OOTB solutions: https://stackoverflow.com/questions/1219860/html-encoding-lost-when-attribute-read-from-input-field#answer-1219983 – charles-allen Sep 02 '17 at 11:56
  • 1
    Hi there CodeConfident, it was for this challenge on FreeCodeCamp: https://www.freecodecamp.org/challenges/convert-html-entities – Jethro Hazelhurst Sep 02 '17 at 11:57
  • That's really cool. Incidentally the solution I linked (abusing jQuery) fails on the quotes! – charles-allen Sep 02 '17 at 12:01

2 Answers2

2

Use this (which calls entify for each match using an arrow function) :

function convertHTML(str) {
    // html entity switch block
    function entify(char){
        switch (char) {
            case '&':
                return '&​amp;';
            case '<':
                return '&​lt;';
            case '>':
                return '&​gt;';
            case '"':
                return '&​quot;';
            case '\'':
                return '&​apos;';
        }
    }

    // convert string into an array
    str = str.split('');
    // loop through the array
    for (var i = 0; i < str.length; i++) {
        // compare each to the regular expression, if it matches then it needs to be replaced with an html entity
        str[i] = str[i].replace(/[&<>"']/g, (a) => entify(a) );
    }
    str = str.join('');
    console.log(str);
    return str;
}

 convertHTML("Hello, World! It's  \">_<\"  great to be here & live.");
 // => "Hello, World! It&​apos;s  &​quot;&​gt;_&​lt;&​quot;  great to be here &​amp; live."
DjaouadNM
  • 22,013
  • 4
  • 33
  • 55
2

Call entify as a callback:

function convertHTML(str) {

    // html entity switch block
    function entify(char){
       // alert(char);
        switch (char) {
            case '&':
                return '&​amp;';
            case '<':
                return '&​lt;';
            case '>':
                return '&​gt;';
            case '"':
                return '&​quot;';
            case '\'':
                return '&​apos;';
        }
    }


    // convert string into an array
    str = str.split('');
    // loop through the array
    for (var i = 0; i < str.length; i++) {
        // compare each to the regular expression, if it matches then it needs to be replaced with an html entity
        //console.log(str[i]);
        str[i] = str[i].replace(/[&<>"']/g, function(m) {return entify(m);});
        //                          here ___^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    }
    str = str.join('');
    return str;
}

console.log(convertHTML(">"));
Toto
  • 89,455
  • 62
  • 89
  • 125
  • 2
    Hmm, interesting, all the examples here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace just pass in the function name... `str[i] = str[i].replace(/[&<>"']/g, entify);` I need to learn more about callbacks. – Jethro Hazelhurst Sep 02 '17 at 12:06
  • 1
    What happens if you use a different param name? I thought char was a keyword? (incidentally I think you're passed a string not a char). Edit: apparently it was a reserved word, but never allocated, and is no longer reserved https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Future_reserved_keywords_in_older_standards – charles-allen Sep 02 '17 at 12:11