Codificar entidades html em javascript

Estou trabalhando em um CMS que permite aos usuários inserir conteúdo. O problema é que quando eles adicionam símbolos ®, eles podem não ser exibidos bem em todos os navegadores. Eu gostaria de criar uma lista de símbolos que devem ser pesquisados ​​e, em seguida, convertidos para a entidade html correspondente. Por exemplo

® => ®
& => &
© => ©
™ =>™

Após a conversão, ele precisa ser embalado em uma <sup>tag, resultando em:

® => <sup>&reg;</sup>

Como um tamanho de fonte e estilo de preenchimento específicos são necessários:

sup { font-size: 0.6em; padding-top: 0.2em; }

O JavaScript seria algo assim?

var regs = document.querySelectorAll('®');
  for ( var i = 0, l = imgs.length; i < l; ++i ) {
  var [?] = regs[i];
  var [?] = document.createElement('sup');
  img.parentNode.insertBefore([?]);
  div.appendChild([?]);
}

Onde "[?]" Significa que há algo sobre o qual não tenho certeza.

Detalhes adicionais:

• Eu gostaria de fazer isso com JavaScript puro, não algo que requer uma biblioteca como o jQuery, obrigado.
• Backend é Ruby
• Usando RefineryCMS, que é construído com Ruby on Rails

Você pode usar regex para substituir qualquer caractere em um determinado intervalo Unicode por seu equivalente de entidade html. O código seria mais ou menos assim:

var encodedStr = rawStr.replace(/[\u00A0-\u9999<>\&]/g, function(i) {
   return '&#'+i.charCodeAt(0)+';';
});

Este código substituirá todos os caracteres no intervalo fornecido (unicode 00A0 - 9999, bem como e comercial, maior e menor que) por seus equivalentes de entidade html, que é simplesmente de &#nnn;onde nnnestá o valor Unicode que obtemos charCodeAt.

Veja em ação aqui: http://jsfiddle.net/E3EqX/13/ (este exemplo usa jQuery para seletores de elemento usados ​​no exemplo. O próprio código base, acima, não usa jQuery)

Fazer essas conversões não resolve todos os problemas - certifique-se de usar a codificação de caracteres UTF8, certifique-se de que seu banco de dados está armazenando as strings em UTF8. Você ainda pode ver casos em que os caracteres não são exibidos corretamente, dependendo da configuração da fonte do sistema e de outros problemas fora do seu controle.

Documentação

• String.charCodeAt- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/charCodeAt
• Entidades de caracteres HTML - http://www.chucke.com/entities.html

A resposta aceita atualmente tem vários problemas. Este post os explica e oferece uma solução mais robusta. A solução sugerida nessa resposta anteriormente tinha:

var encodedStr = rawStr.replace(/[\u00A0-\u9999<>\&]/gim, function(i) {
  return '&#' + i.charCodeAt(0) + ';';
});

O isinalizador é redundante, pois nenhum símbolo Unicode no intervalo de U + 00A0 a U + 9999 tem uma variante em maiúsculas / minúsculas que esteja fora desse mesmo intervalo.

O msinalizador é redundante porque ^ou$ não é usado na expressão regular.

Por que o intervalo U + 00A0 a U + 9999? Parece arbitrário.

De qualquer forma, para uma solução que codifica corretamente todos, exceto os símbolos ASCII seguros e imprimíveis na entrada (incluindo símbolos astrais!) E implementa todas as referências de caracteres nomeados (não apenas aqueles em HTML4), use a biblioteca he (isenção de responsabilidade: esta biblioteca é minha ) De seu README:

ele (para "entidades HTML") é um codificador / decodificador de entidade HTML robusto escrito em JavaScript. Ele suporta todas as referências de caracteres nomeados padronizados como por HTML , lida com ampersands ambíguos e outros casos extremos como um navegador faria , tem um amplo conjunto de testes e - ao contrário de muitas outras soluções JavaScript - ele lida perfeitamente com símbolos Unicode astrais. Uma demonstração online está disponível.

Veja também esta resposta relevante do Stack Overflow .

Eu tive o mesmo problema e criei 2 funções para criar entidades e traduzi-las de volta para caracteres normais. Os métodos a seguir traduzem qualquer string em entidades HTML e de volta ao protótipo String

/**
 * Convert a string to HTML entities
 */
String.prototype.toHtmlEntities = function() {
    return this.replace(/./gm, function(s) {
        // return "&#" + s.charCodeAt(0) + ";";
        return (s.match(/[a-z0-9\s]+/i)) ? s : "&#" + s.charCodeAt(0) + ";";
    });
};

/**
 * Create string from HTML entities
 */
String.fromHtmlEntities = function(string) {
    return (string+"").replace(/&#\d+;/gm,function(s) {
        return String.fromCharCode(s.match(/\d+/gm)[0]);
    })
};

Você pode então usá-lo da seguinte forma:

var str = "Test´†®¥¨©˙∫ø…ˆƒ∆÷∑™ƒ∆æø𣨠ƒ™en tést".toHtmlEntities();
console.log("Entities:", str);
console.log("String:", String.fromHtmlEntities(str));

Saída no console:

Entities: Dit is e´†®¥¨©˙∫ø…ˆƒ∆÷∑™ƒ∆æø𣨠ƒ™en t£eést
String: Dit is e´†®¥¨©˙∫ø…ˆƒ∆÷∑™ƒ∆æø𣨠ƒ™en t£eést 

Sem qualquer biblioteca, se você não precisar oferecer suporte ao IE <9, poderá criar um elemento html e definir seu conteúdo com Node.textContent :

var str = "<this is not a tag>";
var p = document.createElement("p");
p.textContent = str;
var converted = p.innerHTML;

Aqui está um exemplo: https://jsfiddle.net/1erdhehv/

Atualizar: Isso só funciona para entidades de tag HTML (&, <e>).

Você pode usar isso.

var escapeChars = {
  '¢' : 'cent',
  '£' : 'pound',
  '¥' : 'yen',
  '€': 'euro',
  '©' :'copy',
  '®' : 'reg',
  '<' : 'lt',
  '>' : 'gt',
  '"' : 'quot',
  '&' : 'amp',
  '\'' : '#39'
};

var regexString = '[';
for(var key in escapeChars) {
  regexString += key;
}
regexString += ']';

var regex = new RegExp( regexString, 'g');

function escapeHTML(str) {
  return str.replace(regex, function(m) {
    return '&' + escapeChars[m] + ';';
  });
};

https://github.com/epeli/underscore.string/blob/master/escapeHTML.js

var htmlEntities = {
    nbsp: ' ',
    cent: '¢',
    pound: '£',
    yen: '¥',
    euro: '€',
    copy: '©',
    reg: '®',
    lt: '<',
    gt: '>',
    quot: '"',
    amp: '&',
    apos: '\''
};

function unescapeHTML(str) {
    return str.replace(/\&([^;]+);/g, function (entity, entityCode) {
        var match;

        if (entityCode in htmlEntities) {
            return htmlEntities[entityCode];
            /*eslint no-cond-assign: 0*/
        } else if (match = entityCode.match(/^#x([\da-fA-F]+)$/)) {
            return String.fromCharCode(parseInt(match[1], 16));
            /*eslint no-cond-assign: 0*/
        } else if (match = entityCode.match(/^#(\d+)$/)) {
            return String.fromCharCode(~~match[1]);
        } else {
            return entity;
        }
    });
};

Se você quiser evitar codificar entidades html mais de uma vez

function encodeHTML(str){
    return str.replace(/([\u00A0-\u9999<>&])(.|$)/g, function(full, char, next) {
      if(char !== '&' || next !== '#'){
        if(/[\u00A0-\u9999<>&]/.test(next))
          next = '&#' + next.charCodeAt(0) + ';';

        return '&#' + char.charCodeAt(0) + ';' + next;
      }

      return full;
    });
}

function decodeHTML(str){
    return str.replace(/&#([0-9]+);/g, function(full, int) {
        return String.fromCharCode(parseInt(int));
    });
}

# Exemplo

var text = "<a>Content &#169; <#>&<&#># </a>";

text = encodeHTML(text);
console.log("Encode 1 times: " + text);

// &#60;a&#62;Content &#169; &#60;#&#62;&#38;&#60;&#38;#&#62;# &#60;/a&#62;

text = encodeHTML(text);
console.log("Encode 2 times: " + text);

// &#60;a&#62;Content &#169; &#60;#&#62;&#38;&#60;&#38;#&#62;# &#60;/a&#62;

text = decodeHTML(text);
console.log("Decoded: " + text);

// <a>Content © <#>&<&#># </a>

Caracteres especiais HTML e seus ESCAPE CODES

Os caracteres reservados devem ser escapados por HTML: Podemos usar um escape de caractere para representar qualquer caractere Unicode [Ex: & - U + 00026] em HTML, XHTML ou XML usando apenas caracteres ASCII. Referências de caracteres numéricos [ Ex: e comercial (&) - &] & Referências de caracteres nomeados [Ex: &] são tipos de character escape used in markup.

Entidades Predefinidas

    Original Character     XML entity replacement    XML numeric replacement  
                  <                                    &lt;                                           &#60;                    
                  >                                     &gt;                                         &#62;                    
                  "                                     &quot;                                      &#34;                    
                  &                                   &amp;                                       &#38;                    
                   '                                    &apos;                                      &#39;                    

Para exibir marcas HTML como uma forma normal na página web que usamos <pre>, <code>marcas ou podemos escapar deles. Escapar da string substituindo qualquer ocorrência do "&"caractere pela string "&"e quaisquer ocorrências do ">"caractere pela string ">". Ex:stackoverflow post

function escapeCharEntities() {
    var map = {
        "&": "&",
        "<": "&lt;",
        ">": "&gt;",
        "\"": "&quot;",
        "'": "&apos;"
    };
    return map;
}

var mapkeys = '', mapvalues = '';
var html = {
    encodeRex : function () {
        return  new RegExp(mapkeys, 'g'); // "[&<>"']"
    }, 
    decodeRex : function () {
        return  new RegExp(mapvalues, 'g'); // "(&amp;|&lt;|&gt;|&quot;|&apos;)"
    },
    encodeMap : JSON.parse( JSON.stringify( escapeCharEntities () ) ), // json = {&: "&amp;", <: "&lt;", >: "&gt;", ": "&quot;", ': "&apos;"}
    decodeMap : JSON.parse( JSON.stringify( swapJsonKeyValues( escapeCharEntities () ) ) ),
    encode : function ( str ) {
        var encodeRexs = html.encodeRex();
        console.log('Encode Rex: ', encodeRexs); // /[&<>"']/gm
        return str.replace(encodeRexs, function(m) { console.log('Encode M: ', m); return html.encodeMap[m]; }); // m = < " > SpecialChars
    },
    decode : function ( str ) {
        var decodeRexs = html.decodeRex();
        console.log('Decode Rex: ', decodeRexs); // /(&amp;|&lt;|&gt;|&quot;|&apos;)/g
        return str.replace(decodeRexs, function(m) { console.log('Decode M: ', m); return html.decodeMap[m]; }); // m = &lt; &quot; &gt;
    }
};

function swapJsonKeyValues ( json ) {
    var count = Object.keys( json ).length;
    var obj = {};
    var keys = '[', val = '(', keysCount = 1;
    for(var key in json) {
        if ( json.hasOwnProperty( key ) ) {
            obj[ json[ key ] ] = key;
            keys += key;
            if( keysCount < count ) {
                val += json[ key ]+'|';
            } else {
                val += json[ key ];
            }
            keysCount++;
        }
    }
    keys += ']';    val  += ')';
    console.log( keys, ' == ', val);
    mapkeys = keys;
    mapvalues = val;
    return obj;
}

console.log('Encode: ', html.encode('<input type="password" name="password" value=""/>') ); 
console.log('Decode: ', html.decode(html.encode('<input type="password" name="password" value=""/>')) );

O/P:
Encode:  &lt;input type=&quot;password&quot; name=&quot;password&quot; value=&quot;&quot;/&gt;
Decode:  <input type="password" name="password" value=""/>

var htmlEntities = [
            {regex:/&/g,entity:'&'},
            {regex:/>/g,entity:'>'},
            {regex:/</g,entity:'&lt;'},
            {regex:/"/g,entity:'&quot;'},
            {regex:/á/g,entity:'&aacute;'},
            {regex:/é/g,entity:'&eacute;'},
            {regex:/í/g,entity:'&iacute;'},
            {regex:/ó/g,entity:'&oacute;'},
            {regex:/ú/g,entity:'&uacute;'}
        ];

total = <some string value>

for(v in htmlEntities){
    total = total.replace(htmlEntities[v].regex, htmlEntities[v].entity);
}

Uma solução de array

Se você já estiver usando jQuery, tente html().

$('<div>').text('<script>alert("gotcha!")</script>').html()
// "&lt;script&gt;alert("gotcha!")&lt;/script&gt;"

Um nó de texto na memória é instanciado e html()chamado nele.

É feio, desperdiça um pouco de memória e não tenho ideia se é tão completo quanto algo como a hebiblioteca, mas se você já estiver usando jQuery, talvez esta seja uma opção para você.

Retirado da postagem do blog Codifique entidades HTML com jQuery por Felix Geisendörfer.

Às vezes, você só deseja codificar cada caractere ... Esta função substitui "tudo menos nada" no regxp.

function encode(e){return e.replace(/[^]/g,function(e){return"&#"+e.charCodeAt(0)+";"})}

function encode(w) {
  return w.replace(/[^]/g, function(w) {
    return "&#" + w.charCodeAt(0) + ";";
  });
}

test.value=encode(document.body.innerHTML.trim());

<textarea id=test rows=11 cols=55>www.WHAK.com</textarea>

Confira o tutorial de Ourcodeworld Ourcodeworld - codifique e decodifique entidades html com javascript

Mais importante ainda, o exemplo da biblioteca he

he.encode('foo © bar ≠ baz ???? qux');
// → 'foo © bar ≠ baz 𝌆 qux'

// Passing an `options` object to `encode`, to explicitly encode all symbols:
he.encode('foo © bar ≠ baz ???? qux', {
 'encodeEverything': true
});

he.decode('foo © bar ≠ baz 𝌆 qux');
// → 'foo © bar ≠ baz ???? qux'

Esta biblioteca provavelmente tornaria sua codificação mais fácil e melhor gerenciada. É popular, atualizado regularmente e segue as especificações HTML. Ele em si não tem dependências, como pode ser visto no package.json

Aqui está como implementei a codificação. Eu me inspirei nas respostas dadas acima.

function encodeHTML(str) {
  const code = {
      ' ' : ' ',
      '¢' : '¢',
      '£' : '£',
      '¥' : '¥',
      '€' : '€', 
      '©' : '©',
      '®' : '®',
      '<' : '&lt;', 
      '>' : '&gt;',  
      '"' : '&quot;', 
      '&' : '&amp;',
      '\'' : '&apos;'
  };
  return str.replace(/[\u00A0-\u9999<>\&''""]/gm, (i)=>code[i]);
}

// TEST
console.log(encodeHTML("Dolce & Gabbana"));
console.log(encodeHTML("Hamburgers < Pizza < Tacos"));
console.log(encodeHTML("Sixty > twelve"));
console.log(encodeHTML('Stuff in "quotation marks"'));
console.log(encodeHTML("Schindler's List"));
console.log(encodeHTML("<>"));

uma das maneiras fáceis de codificar ou decodificar entidades HTML,
basta chamar uma função com um argumento ...

Decodificar entidades HTML

function decodeHTMLEntities(text) {
  var textArea = document.createElement('textarea');
  textArea.innerHTML = text;
  return textArea.value;
}

Decodificar entidades HTML (JQuery)

function decodeHTMLEntities(text) {
  return $("<textarea/>").html(text).text();
}

Codificar entidades HTML

function encodeHTMLEntities(text) {
  var textArea = document.createElement('textarea');
  textArea.innerText = text;
  return textArea.innerHTML;
}

Codificar entidades HTML (JQuery)

function encodeHTMLEntities(text) {
  return $("<textarea/>").text(text).html();
}

Você pode usar o charCodeAt()método para verificar se o caractere especificado tem um valor superior a 127 e convertê-lo em uma referência de caractere numérico usando toString(16).

replaceHtmlEntities(text) {
  var tagsToReplace = {
    '&': '&',
    '&lt;': '<',
    '&gt;': '>',
  };
  var newtext = text;
  for (var tag in tagsToReplace) {
    if (Reflect.apply({}.hasOwnProperty, this, [tagsToReplace, tag])) {
      var regex = new RegExp(tag, 'g');
      newtext = newtext.replace(regex, tagsToReplace[tag]);
    }
  }
  return newtext;
}