Decodificar entidades HTML usando JavaScript

1. Decodificar entidades HTML usando Vanilla JavaScript
2. Decodificar entidades HTML utilizando la biblioteca he

Las entidades HTML son un conjunto de códigos de caracteres utilizados para representar caracteres reservados por HTML. Comienza con el ampersand & y termina con un punto y coma ;. Esta imagen le proporciona una lista de códigos de caracteres HTML con su respectivo nombre de entidad.

Este artículo verá cómo decodificar la siguiente cadena usando JavaScript. Esta cadena contiene varios caracteres como a, b, c y entidades de caracteres HTML como &nbps;, <, ', etc.

var str = 'Give&nbsp;us some&#39;<h2>time</h2>&#39; &amp; space <br> Please';

La cadena completa se almacena dentro de la variable str. Hay dos formas de decodificar entidades HTML. Una forma es usar JavaScript estándar y la otra es usar una biblioteca externa.

La biblioteca externa que usaremos es la biblioteca he. Esta es una de las bibliotecas más utilizadas para codificar y decodificar entidades HTML.

Decodificar entidades HTML usando Vanilla JavaScript

Una de las formas más sencillas de decodificar entidades HTML es usar JavaScript estándar. La etiqueta utilizada para lograr esto es textarea.

Primero, crearemos una función llamada decodeEntity(), que toma una cadena como entrada. Pasaremos la variable str a esta función como argumento.

Dentro de esta función, primero crearemos un elemento textarea usando document.createElement() y luego almacenaremos la referencia de esta variable dentro de la variable textarea.

function decodeEntity(inputStr) {
  var textarea = document.createElement('textarea');
  textarea.innerHTML = inputStr;
  return textarea.value;
}
console.log(decodeEntity(str));

Producción :

var str = "Give&nbsp;us some&#39;<h2>time</h2>&#39; &amp; space <br> Please";
var he = require('he');
console.log(he.decode(str));

Guardaremos la cadena str dentro del textarea usando la propiedad innerHTML. El navegador convierte automáticamente el str a su formato HTML adecuado en este paso. Se decodificarán todas las entidades HTML y se conservarán todas las etiquetas HTML.

Finalmente, usando el textarea.value, devolveremos el valor de la cadena decodificada.

Decodificar entidades HTML utilizando la biblioteca he

El he es una biblioteca externa para codificar y decodificar entidades HTML escritas en JavaScript. Esta biblioteca se puede descargar fácilmente ejecutando el siguiente comando. El node.js (cualquier versión) debe estar instalado en su sistema para que el siguiente comando se ejecute correctamente.

Para obtener más información sobre la biblioteca he, visite este enlace.

npm install he

Después de haber instalado la biblioteca he, podemos importar esa biblioteca dentro de nuestro archivo JavaScript usando la función require y pasar el nombre de la biblioteca, he, como una cadena a esta función.

Luego almacenaremos la referencia de eso dentro de una variable llamada he. Puede usar cualquier nombre para representar esta variable.

var str = 'Give&nbsp;us some&#39;<h2>time</h2>&#39; &amp; space <br> Please';
var he = require('he');
he.decode(str);

La librería he tiene una función llamada decode() que toma dos parámetros html y options.

El parámetro html es una cadena que consta de entidades HTML codificadas y es obligatorio pasar. El parámetro options es opcional y toma dos valores isAttributeValue y strict. No necesitamos este segundo parámetro, por lo que no lo usaremos.

Pasaremos la variable str mencionada anteriormente a la función he.decode(), y la salida resultante será la siguiente.

Give us some '<h2>time</h2>'&space<br>Please

Es fácil decodificar entidades HTML utilizando una biblioteca de JavaScript externa.