What is the best way to convert Javascript entities to Javascript?

2

Through English OS searches, I learned how to decode and encode HTML entities as follows:

var wm = (function(wm){ 
   wm.encodeHTML = function (html) {
        var t = document.createElement('textarea');
        t.innerHTML = html;
        return t.innerHTML;
   }    
   wm.decodeHTML = function (html) {
        var t = document.createElement('textarea');
        t.innerHTML = html;    
        return t.value;
   }       
}({}));

I'd like a more elegant solution (regular expression or whatever) to convert HTML entities, rather than creating a textarea and returning the value of it.

Can anyone help?

    
asked by anonymous 06.02.2015 / 17:44

3 answers

3

I use two functions that I found on the internet, take a test:

//https://stackoverflow.com/questions/1219860/html-encoding-in-javascript-jquery
function htmlEncode(value) {
    //create a in-memory div, set it's inner text(which jQuery automatically encodes)
    //then grab the encoded contents back out.  The div never exists on the page.
    return $('<div/>').text(value).html();
}

function htmlDecode(value) {
    return $('<div/>').html(value).text();
}

Or as the author preferred with RegEx:

var replaceHtmlEntites = (function() {
    var translate_re = /&(nbsp|amp|quot|lt|gt);/g,
        translate = {
            'nbsp': String.fromCharCode(160), 
            'amp' : '&', 
            'quot': '"',
            'lt'  : '<', 
            'gt'  : '>'
        },
        translator = function($0, $1) { 
            return translate[$1]; 
        };

    return function(s) {
        return s.replace(translate_re, translator);
    };
})();

Source: link

    
06.02.2015 / 17:46
3

I do not understand very well but what are you trying to do is to transform html into text and text into html? because if it is it has that way using replace.

var string="<div>oi</div>";
string.replace(/</g,"&lt;").replace(/>/g,"&gt;"); // &ld;div&gd;oi&ld;/div&gd;

And to go back to pro html:

var string="&ld;div&gd;oi&ld;/div&gd";
string.replace(/&lt;/g,"<").replace(/&gt;/g,">"); // <div>oi</div>
    
06.02.2015 / 18:08
1

You can do this too (code taken from mustache.js ):

var entityMap = { // Lista de entidades
    "&": "&amp;",
    "<": "&lt;",
    ">": "&gt;",
    '"': '&quot;',
    "'": '&#39;',
    "/": '&#x2F;'
};

function escapeHtml(str) {
  return String(str).replace(/[&<>"'\/]/g, function (s) {
    return entityMap[s];
  });
}

The expression [&<>"'\/] will match any character present in the &<>"'\/ list, if replace succeeds it will be returned with entityMap converted value.

Fiddle

To make the reverse path simply reverse the order of the list and the expression:

var entityMap = { // Lista de entidades
    '&amp;': '&',
    '&lt;': '<',
    '&gt;': '>',
    '&quot': '"',
    '&#39;': "'",
    '&#x2F;': '/'
};

function unescapeHtml(str) {
  return String(str).replace(/&amp;|&lt;|&gt;|&quot|&#39;|&#x2F;/g, function (s) {
    return entityMap[s];
  });
}

Fiddle

    
07.02.2015 / 13:01