2

Através de pesquisas no SO inglês, aprendi a fazer decodificação e codificação de entidades HTML da seguinte forma:

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;
   }       
}({}));

Eu gostaria de uma solução mais elegante (expressão regular ou qualquer outra coisa) para converter entidades HTML, ao invés de criar um textarea e retornar o valor dele.

Alguém pode ajudar?

3
  • Por acaso algo como isso? stackoverflow.com/questions/1229518/… Commented 6/02/2015 às 16:55
  • 1
    Olha "mais elegante" não seria um caminho e RegEx pode ajudar muito, mas não serve para todos objetivos, no seu próprio exemplo você usou DOM (createElement) isto é totalmente aceitável, pois entidades html também fazem parte do DOM, e acredite o seu código terá bem aceitável ("talvez" melhor do qualquer outra técnica). Portanto de entidade html fazem parte do DOM, não vejo mal em usar o próprio DOM para convertê-las. Outra coisa, da maneira que você fez o código fica bem menor e na minha opinião é a indentação combinado com códigos pequenos e organizados que farão a elegância :)
    – Syzoth
    Commented 6/02/2015 às 17:05
  • Só outro detalhe Wallace, a sua função wm.decodeHTML = function (html) { não está fechada, falta um } após o return
    – Syzoth
    Commented 6/02/2015 às 17:19

3 Respostas 3

3

Eu uso duas funções que achei na internet, faça um teste:

//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();
}

Ou como o autor preferiu com 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);
    };
})();

Fonte: https://stackoverflow.com/questions/1229518/javascript-regex-replace-html-chars

7
  • 1
    É a mesma coisa que eu fiz, porém com jQuery. Estou a procura de outras soluções (como regex por exemplo) Commented 6/02/2015 às 16:47
  • Não entendo a negativação, pois você mesmo disse "...regexp ou qualquer outra coisa" (MAXTERS, 2015). Commented 6/02/2015 às 16:56
  • Eu também não vejo necessidade deste voto negativo, soa até meio mal, mas acho que é porque você postou um código já com a mesma funcionalidade e ele pediu algo com RegEx ao invés de criar um textarea (no caso ele deve ter se referido ao uso de DOM). Acho que você deveria apenas editar a resposta :)
    – Syzoth
    Commented 6/02/2015 às 17:08
  • @GuilhermeNascimento Obrigado, fiz exatamente isso! :) Commented 6/02/2015 às 17:11
  • Só uma coisa para ajudar Rafael, a segunda função só "decodifica", acho que o autor necessita de ambos. :) Mas mesmo assim +1
    – Syzoth
    Commented 6/02/2015 às 17:13
3

Não entendi muito bem mas oque você esta tentando fazer é transformar html em text e text em html? porque se for tem esse jeito usando replace.

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

E para voltar pro html:

var string="&ld;div&gd;oi&ld;/div&gd";
string.replace(/&lt;/g,"<").replace(/&gt;/g,">"); // <div>oi</div>
2
  • Sua função está errada. Não é &ld; é &lt; :)
    – Syzoth
    Commented 6/02/2015 às 17:16
  • Obrigado por essa observação @gui ;).... Commented 6/02/2015 às 17:17
1

Pode-se fazer assim também (código retirado do 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];
  });
}

A expressão [&<>"'\/] vai corresponder a qualquer caractere presente na lista &<>"'\/, se o replace tiver êxito será retornado através de entityMap o valor convertido.

Fiddle

Para fazer o caminho reverso basta inverter a ordem da lista e a expressão:

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .