Codificar y decodificar entidades HTML usando Javascript puro

HTML no válido, marcado interrumpido y otros efectos secundarios indeseables del trabajo con cadenas html sin que se escapen correctamente en Javascript, es un problema al que se ha enfrentado al menos 1 de cada 5 desarrolladores web (que trabaja con aplicaciones dinámicas).

Javascript en sí no proporciona métodos nativos para manejarlo, a diferencia de PHP (nuestro hermoso lenguaje del lado del servidor) que ofrece las funciones htmlentitieshtml_entity_decodehtml_entity_encode listas para usar.

Codifica y decodifica todo

Si eres uno de esos desarrolladores psicóticos (como yo) al que no le gusta agregar una gran parte de código en sus proyectos, es posible que desees usar el siguiente fragmento.

Esta pieza de código funciona a la perfección en ambos sentidos, codificar y decodificar. Espera como primer parámetro la cadena (decodificada o codificada según el método) y devuelve la cadena procesada.

No proporciona demasiada personalización, pero funciona bien (menos para tener solo un par de líneas). Tenga en cuenta que el método encode convertirá cada carácter en su carácter html .

Si desea reemplazar solo aquellos caracteres extraños que rompieron su html (<,>, /, \ etc) siga leyendo y no use este método, de lo contrario, este fragmento es útil.

(function(window){
	window.htmlentities = {
		/**
		 * Convierte una cadena a sus caracteres html por completo.
		 *
		 * @param {String} str String with unescaped HTML characters
		 **/
		encode : function(str) {
			var buf = [];
			
			for (var i=str.length-1;i>=0;i--) {
				buf.unshift(['&#', str[i].charCodeAt(), ';'].join(''));
			}
			
			return buf.join('');
		},
		/**
		 * Convierte un conjunto de caracteres html en su carácter original.
		 *
		 * @param {String} str htmlSet entities
		 **/
		decode : function(str) {
			return str.replace(/&#(\d+);/g, function(match, dec) {
				return String.fromCharCode(dec);
			});
		}
	};
})(window);

El código anterior crea una variable global (en la ventana) llamada htmlentities. Este objeto contiene los 2 métodos de codificación y decodificación.

Para convertir una cadena normal a sus caracteres html, use el método encode:

htmlentities.encode("Hello, this is a test stríng > < with characters that could break html. Therefore we convert it to its html characters.");
// Output
"&#72;&#101;&#108;&#108;&#111;&#44;&#32;&#116;&#104;&#105;&#115;&#32;&#105;&#115;&#32;&#97;&#32;&#116;&#101;&#115;&#116;&#32;&#115;&#116;&#114;&#237;&#110;&#103;&#32;&#62;&#32;&#60;&#32;&#119;&#105;&#116;&#104;&#32;&#99;&#104;&#97;&#114;&#97;&#99;&#116;&#101;&#114;&#115;&#32;&#116;&#104;&#97;&#116;&#32;&#99;&#111;&#117;&#108;&#100;&#32;&#98;&#114;&#101;&#97;&#107;&#32;&#104;&#116;&#109;&#108;&#46;&#32;&#84;&#104;&#101;&#114;&#101;&#102;&#111;&#114;&#101;&#32;&#119;&#101;&#32;&#99;&#111;&#110;&#118;&#101;&#114;&#116;&#32;&#105;&#116;&#32;&#116;&#111;&#32;&#105;&#116;&#115;&#32;&#104;&#116;&#109;&#108;&#32;&#99;&#104;&#97;&#114;&#97;&#99;&#116;&#101;&#114;&#115;&#46;"

Para convertir una cadena html codificada en caracteres legibles, utilice el método de decodificación:

htmlentities.decode("&#72;&#101;&#108;&#108;&#111;&#44;&#32;&#116;&#104;&#105;&#115;&#32;&#105;&#115;&#32;&#97;&#32;&#116;&#101;&#115;&#116;&#32;&#115;&#116;&#114;&#237;&#110;&#103;&#32;&#62;&#32;&#60;&#32;&#119;&#105;&#116;&#104;&#32;&#99;&#104;&#97;&#114;&#97;&#99;&#116;&#101;&#114;&#115;&#32;&#116;&#104;&#97;&#116;&#32;&#99;&#111;&#117;&#108;&#100;&#32;&#98;&#114;&#101;&#97;&#107;&#32;&#104;&#116;&#109;&#108;&#46;&#32;&#84;&#104;&#101;&#114;&#101;&#102;&#111;&#114;&#101;&#32;&#119;&#101;&#32;&#99;&#111;&#110;&#118;&#101;&#114;&#116;&#32;&#105;&#116;&#32;&#116;&#111;&#32;&#105;&#116;&#115;&#32;&#104;&#116;&#109;&#108;&#32;&#99;&#104;&#97;&#114;&#97;&#99;&#116;&#101;&#114;&#115;&#46;");
// Output
"Hello, this is a test stríng > < with characters that could break html. Therefore we convert it to its html characters."

Nota: siéntase libre de copiar cada función e incluirla en su proyecto como desee.

Usando una biblioteca

Como una tarea que no es fácil de lograr, existe una biblioteca increíble que resolverá este problema por ti.

He.js  (para "entidades HTML") es un codificador / decodificador de entidad HTML robusto escrito en JavaScript. Es compatible con todas las referencias personaje llamado estandarizadas como por HTML , tiradores de los símbolos de unión ambiguos y otros casos extremos al igual que lo haría un navegador , cuenta con un amplio conjunto de pruebas, y al contrario de muchas otras soluciones de JavaScript,  que maneja símbolos Unicode astrales muy bien. Hay una demostración en línea disponible.

Codificar

Esta función toma una cadena de texto y codifica (por defecto) cualquier símbolos que no son símbolos ASCII imprimibles y &<>"', y `, sustituyéndolos por referencias de caracteres.

// Usando la configuración predeterminada global (por defecto es "falso"):
he.encode('foo © bar ≠ baz ???? qux');
// → 'foo &#xA9; bar &#x2260; baz &#x1D306; qux'

// Pasando un objeto Ê»options` a Ê»encode`, para codificar explícitamente todos los símbolos:
he.encode('foo © bar ≠ baz ???? qux', {
 'encodeEverything': true
});
// → '&#x66;&#x6F;&#x6F;&#x20;&#xA9;&#x20;&#x62;&#x61;&#x72;&#x20;&#x2260;&#x20;&#x62;&#x61;&#x7A;&#x20;&#x1D306;&#x20;&#x71;&#x75;&#x78;'

// Esta configuración se puede combinar con la opción Ê»useNamedReferences`:
he.encode('foo © bar ≠ baz ???? qux', {
 'encodeEverything': true,
 'useNamedReferences': true
});
// → '&#x66;&#x6F;&#x6F;&#x20;&copy;&#x20;&#x62;&#x61;&#x72;&#x20;&ne;&#x20;&#x62;&#x61;&#x7A;&#x20;&#x1D306;&#x20;&#x71;&#x75;&#x78;'

Descodificar

Esta función toma una cadena de HTML y decodifica cualquier referencia de carácter numérico y con nombre en ella utilizando el algoritmo descrito en la sección 12.2.4.69 de la especificación HTML .

he.decode('foo &copy; bar &ne; baz &#x1D306; qux');
// → 'foo © bar ≠ baz ???? qux'

Que te diviertas ❤️!

Esto podria interesarte

Conviertete en un programador más sociable