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 = {
  '&': '&',
  '<': '<',
  '>': '>',
  '&#39;': "'",
  '"': '"',
  '&#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 = {
  '&': '&',
  '<': '<',
  '>': '>',
  '&#39;': "'",
  '"': '"',
  '&#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

By Xurxo González Tenreiro

Informático de mente inquieta con grandes ideas en el ámbito de la progamación. Especialista en el desarrollo web e interesado en el análisis SEO. Me encanta mi labor en el ámbito de la divulgación por lo cual he ampliado mis horizontes al ámbito de la educación y formación en el desarrollo de aplicaciones web. También como gestor de contenidos web soy muy puntilloso con la divulgación y la elaboración de publicaciones en la red.

Leave a Reply

Your email address will not be published. Required fields are marked *


The reCAPTCHA verification period has expired. Please reload the page.

This site uses Akismet to reduce spam. Learn how your comment data is processed.