Solución fácil para codificar entidades HTML en JavaScript

1. Utilice String.prototype.toHtmlEntities() para codificar una cadena en entidades HTML
2. Utilice String.fromHtmlEntities() para codificar cadenas de entidades HTML
3. Utilice la función unescapeHTML() para codificar entidades HTML en JavaScript

Este artículo explica las mejores soluciones para codificar entidades HTML en JavaScript. El siguiente código de ejemplo traduce cualquier cadena a entidades HTML y de nuevo al prototipo de cadena.

Utilice String.prototype.toHtmlEntities() para codificar una cadena en entidades HTML

En el siguiente código JavaScript,

• String.prototype.toHtmlEntities = function() devuelve una cadena que contiene entidades HTML con la ayuda del método .replace().
• .replace() busca el valor de la cadena dada y lo cambia con el nuevo valor deseado / especificado.
• .prototype es un objeto en JavaScript. Se asocia con funciones y objetos de forma predeterminada.
• String.charCodeAt() devuelve el Unicode del carácter que ha descrito el índice en una cadena.

/**
 * Conversion of 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) + ';';
  });
};

Utilice String.fromHtmlEntities() para codificar cadenas de entidades HTML

En las siguientes declaraciones de JavaScript, hemos creado:

• String.fromHtmlEntities = function(string) que recibe cualquier cadena que contenga entidades HTML.
• Aquí, en el ejemplo, el valor de cadena dado en .replace() es /&#\d+;/gm que se reemplaza con una function(s) que devuelve una cadena String.fromCharCode.
• String.fromCharCode es un método que devuelve una cadena generada por una secuencia.

/**
 * Creation of string from HTML entities
 */
String.fromHtmlEntities = function(string) {
  return (string + '').replace(/&#\d+;/gm, function(s) {
    return String.fromCharCode(s.match(/\d+/gm)[0]);
  })
};

Después de eso, use la función como se muestra a continuación.

• Aquí hay una variable var str que se inicializa con una cadena que contiene caracteres especiales (†®¥¨©˙∫ø…ˆƒ∆...).
• Se llama a una función .toHtmlEntities con esta cadena de caracteres especial var str.
• console.log es una función predeterminada de JavaScript que muestra valores en el cuadro de registro.

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

La salida de la consola es la siguiente.

"Entities:"
"Test´†®¥¨©˙∫ø…ˆƒ∆÷∑™ƒ∆æø𣨠ƒ™en tést"
"String:"
"Dummy Test´†®¥¨©˙∫ø…ˆƒ∆÷∑™ƒ∆æø𣨠ƒ™en tést"

Utilice la función unescapeHTML() para codificar entidades HTML en JavaScript

Puede comprobar estas funciones en compiladores de JavaScript en línea o fuera de línea. Le ayuda a mostrar la cadena sin que el navegador lea su HTML. Esto se puede hacer de otra manera. Puede crear un objeto de entidades HTML.

• Una variable var htmlEntities contiene objetos de caracteres especiales y símbolos.
• Una función unescapeHTML(str) recibe una cadena y devuelve valores con la ayuda de las condiciones .replace().

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

No hay ninguna versión nativa de entidades HTML en JavaScript. Si solo necesita lo básico para que el navegador no se interprete como HTML. El proyecto PHP.js, que es una tarea para trasladar las capacidades locales de cada PHP a JavaScript, también contiene un modelo. En este sentido, lo he mantenido sencillo y he utilizado lo siguiente:

function EntitiesHtml(string) {
  return String(string)
      .replace(/&/g, '&')
      .replace(/>/g, '>')
      .replace(/</g, '&lt;')
      .replace(/"/g, '&quot;');
}