Codificar entidades HTML en JavaScript

Estoy trabajando en un CMS que permite a los usuarios ingresar contenido. El problema es que cuando añaden símbolos ®, es posible que no se muestre bien en todos los navegadores. Me gustaría configurar una lista de símbolos que se deben buscar y luego convertir a la entidad html correspondiente. Por ejemplo

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

Después de la conversión, es necesario envolverlo en una <sup>etiqueta, lo que da como resultado esto:

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

Porque es necesario un tamaño de fuente y un estilo de relleno determinados:

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

¿JavaScript sería algo como esto?

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([?]);
}

Donde "[?]" significa que hay algo de lo que no estoy seguro.

Detalles adicionales:

• Me gustaría hacer esto con JavaScript puro, no con algo que requiera una biblioteca como jQuery, gracias.
• El backend es Ruby
• Usando RefineryCMS que está construido con Ruby on Rails

Sep 12 '13 02:09 JGallardo

La respuesta actualmente aceptada tiene varias cuestiones. Esta publicación los explica y ofrece una solución más sólida. La solución sugerida en esa respuesta anteriormente tenía:

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

La ibandera es redundante ya que ningún símbolo Unicode en el rango de U+00A0 a U+9999 tiene una variante mayúscula/minúscula que esté fuera de ese mismo rango.

La mbandera es redundante porque ^no $se utilizan en la expresión regular.

¿Por qué el rango U+00A0 a U+9999? Parece arbitrario.

De todos modos, para obtener una solución que codifique correctamente todos los símbolos ASCII excepto los seguros e imprimibles en la entrada (¡incluidos los símbolos astrales!) e implemente todas las referencias de caracteres con nombre (no solo los de HTML4), use la biblioteca he (descargo de responsabilidad: esta biblioteca es mía ). Desde su LÉAME:

él (para “entidades HTML”) es un codificador/decodificador de entidades HTML robusto escrito en JavaScript. Admite todas las referencias de caracteres con nombre estandarizados según HTML , maneja símbolos ambiguos y otros casos extremos tal como lo haría un navegador , tiene un amplio conjunto de pruebas y, a diferencia de muchas otras soluciones de JavaScript, maneja perfectamente los símbolos Unicode astrales. Hay una demostración en línea disponible.

Consulte también esta respuesta relevante de Stack Overflow .

May 23 '2014 16:05 Mathias Bynens

Tuve el mismo problema y creé 2 funciones para crear entidades y traducirlas a caracteres normales. Los siguientes métodos traducen cualquier cadena a entidades HTML y nuevamente al prototipo de cadena.

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

Luego puedes usarlo de la siguiente manera:

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

Salida en consola:

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

Nov 19 '2014 15:11 ar34z