Codificar entidades html en javascript

Estoy trabajando en un CMS que permite a los usuarios ingresar contenido. El problema es que cuando agregan símbolos ®, es posible que no se muestren 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, debe estar envuelto en una <sup>etiqueta, lo que resulta en esto:

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

Debido a que es necesario un tamaño de fuente y un estilo de relleno particulares:

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

¿El 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 algo que requiera una biblioteca como jQuery, gracias.
• El backend es Ruby
• Usando RefineryCMS que está construido con Ruby on Rails

Puede usar expresiones regulares para reemplazar cualquier carácter en un rango Unicode dado con su entidad html equivalente. El código se vería así:

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

Este código reemplazará todos los caracteres en el rango dado (unicode 00A0 - 9999, así como ampersand, mayor y menor que) con sus equivalentes de entidad html, que es simplemente de &#nnn;dónde nnnestá el valor Unicode que obtenemos charCodeAt.

Véalo en acción aquí: http://jsfiddle.net/E3EqX/13/ (este ejemplo usa jQuery para los selectores de elementos usados ​​en el ejemplo. El código base en sí mismo, arriba, no usa jQuery)

Hacer estas conversiones no resuelve todos los problemas; asegúrese de utilizar la codificación de caracteres UTF8, asegúrese de que su base de datos esté almacenando las cadenas en UTF8. usted todavía puede ver casos en los que los caracteres no se muestran correctamente, dependiendo de la configuración de fuentes del sistema y otros problemas fuera de su control.

Documentación

• 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

La respuesta actualmente aceptada tiene varios problemas. 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 de mayúsculas / minúsculas que esté fuera de ese mismo rango.

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

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

De todos modos, para 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 las de HTML4), use la biblioteca he (descargo de responsabilidad: esta biblioteca es mía ). De su archivo README:

él (para "entidades HTML") es un codificador / decodificador de entidad HTML robusto escrito en JavaScript. Admite todas las referencias de caracteres con nombre estandarizadas según HTML , maneja símbolos de unión ambiguos y otros casos extremos como lo haría un navegador , tiene un extenso conjunto de pruebas y, al contrario de muchas otras soluciones de JavaScript , maneja bien los símbolos Unicode astrales. Hay una demostración en línea disponible.

También vea esta respuesta relevante de Stack Overflow .

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 vuelven 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 puede 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 

Sin ninguna biblioteca, si no necesita admitir IE <9, puede crear un elemento html y establecer su contenido con Node.textContent :

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

Aquí hay un ejemplo: https://jsfiddle.net/1erdhehv/

Puedes usar esto.

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

Si desea evitar codificar entidades html más de una 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));
    });
}

# Ejemplo

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 especiales HTML y sus ESCAPE CODES

Los caracteres reservados deben tener formato de escape HTML: podemos utilizar un carácter de escape para representar cualquier carácter Unicode [Ej: & - U + 00026] en HTML, XHTML o XML utilizando sólo caracteres ASCII. Referencias de caracteres numéricos [ Ej: ampersand (&) - &] & Referencias de caracteres con nombre [Ej: &] son ​​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 mostrar etiquetas HTML como un formulario normal en una página web usamos <pre>, <code>etiquetas o podemos escapar de ellas. Escapando de la cadena reemplazando con cualquier ocurrencia del "&"carácter por la cadena "&"y cualquier ocurrencia del ">"carácter por la cadena ">". 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);
}

Una solución de matriz

Si ya está usando jQuery, intente html().

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

Se crea una instancia de un nodo de texto en memoria y html()se llama en él.

Es feo, desperdicia un poco de memoria y no tengo idea si es tan completo como algo como la hebiblioteca, pero si ya está usando jQuery, tal vez esta sea una opción para usted.

Tomado de la publicación del blog Codificar entidades HTML con jQuery por Felix Geisendörfer.

A veces solo desea codificar todos los caracteres ... Esta función reemplaza "todo menos nada" en 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>

Consulte el tutorial de Ourcodeworld Ourcodeworld: codifique y decodifique entidades html con javascript

Más importante aún, el ejemplo de la biblioteca

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 probablemente haría su codificación más fácil y mejor administrada. Es popular, se actualiza regularmente y sigue las especificaciones HTML. En sí mismo no tiene dependencias, como se puede ver en el package.json

Así es como implementé la codificación. Me inspiré en las respuestas dadas anteriormente.

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("<>"));

Puede utilizar el charCodeAt()método para comprobar si el carácter especificado tiene un valor superior a 127 y convertirlo en una referencia de carácter numérico utilizando 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;
}