Dejar de escapar (escape) entidades HTML

A veces al inyectar c贸digo HTML con secuencias de escape en nuestros scripts, generalmente entidades HTML, podemos observar que dichas entidades no son impresas en sus caracteres correspondientes.

Una soluci贸n es crear un dicionario de datos para utilizar estas entidades como clave (property) y obtener como valor su correspondiente car谩cter.

El problema lo podemos observar en las siguientes capturas:

En la captura se observa el texto 'CSS – Sintaxis
Problemas con las HTML entities
En la captura observamos la soluci贸n: CSS - Sintaxis
Lo que deseamos es esto

Descripci贸n del c贸digo

En primer lugar creamos el diccionario de datos. Un objeto con las HTML entities como propiedad y el car谩cter que deseemos representar como valor:

interface keysValueStr {
  [key: string]: string; 
}

const UNESCAPE_HTML_OBJECT: keysValueStr = {
  '&': '&',
  '&lt;': '<',
  '&gt;': '>',
  '&#39;': "'",
  '&quot;': '"',
  '&#8221;': '"',
  '&#8220;': '"',
  '&#8211;': '-',
}

Cuando nos llegue el c贸digo HTML en formato String y 茅ste contenga alguna o algunas entidades HTML podremos utilizar nuestro diccionario de datos (el objeto creado anteriormente) vali茅ndonos de sus claves (property) para obtener el valor o car谩cter deseado.

A continuaci贸n mostramos el c贸digo para generar un String de las claves encontradas del objeto. Cada una de estas claves separadas por el car谩cter 鈥潀鈥:

const properties = Object.getOwnPropertyNames(UNESCAPE_HTML_OBJECT).join('|')

Finalmente implement茅 la funci贸n que obtiene los caracteres finales a partir de las HTML entities que hacen de clave:

const unescapeHTML = (str: string) =>
  str.replace(
    new RegExp(properties, 'g'),
    tag =>
      (UNESCAPE_HTML_OBJECT[tag] || tag)
  );

Todo junto

interface keysValueStr {
  [key: string]: string; 
}

const UNESCAPE_HTML_OBJECT: keysValueStr = {
  '&amp;': '&',
  '&lt;': '<',
  '&gt;': '>',
  '&#39;': "'",
  '&quot;': '"',
  '&#8221;': '"',
  '&#8220;': '"',
  '&#8211;': '-',
}

const properties = Object.getOwnPropertyNames(UNESCAPE_HTML_OBJECT).join('|')

const unescapeHTML = (str: string) =>
  str.replace(
    new RegExp(properties, 'g'),
    tag =>
      (UNESCAPE_HTML_OBJECT[tag] || tag)
  );

Ejemplo de uso

const strHTML = 'CSS &#8211; Sintaxis'
console.log(unescapeHTML(strHTML)) // <- CSS - Sintaxis