Saltar al contenido

Codificar entidades html en javascript

Anduvimos recabado en distintos sitios para regalarte la respuesta a tu inquietud, si tienes preguntas déjanos tu duda y respondemos con mucho gusto, porque estamos para servirte.

Solución:

Puede usar expresiones regulares para reemplazar cualquier carácter en un rango Unicode dado con su equivalente de entidad html. El código sería algo como esto:

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 &#nnn; donde nnn es el valor Unicode que obtenemos de 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í, arriba, no usa jQuery)

Hacer estas conversiones no resuelve todos los problemas: asegúrese de estar usando la codificación de caracteres UTF8, asegúrese de que su base de datos almacene las cadenas en UTF8. Tú todavía puede ver casos en los que los caracteres no se muestran correctamente, según 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 robusta. La solución sugerida en esa respuesta anteriormente tenía:

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

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

los m bandera 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 excepto los símbolos ASCII seguros e imprimibles en la entrada (¡incluidos los símbolos astrales!), e implementa todas las referencias de caracteres con nombre (no solo las de HTML4), utilizar el él Biblioteca (descargo de responsabilidad: esta biblioteca es mía). De su README:

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

También vea esta respuesta relevante de desbordamiento de pila.

Tuve el mismo problema y creé 2 funciones para crear entidades y traducirlas de nuevo a caracteres normales. Los siguientes métodos traducen cualquier string a entidades HTML y de vuelta 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-9s]+/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]);
    )
;

A continuación, 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 

Puntuaciones y reseñas

Si te sientes impulsado, eres capaz de dejar un post acerca de qué te ha impresionado de esta división.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *