Entidades HTML

A la hora de mostrar texto plano en una página web debemos tener la precaución de reemplazar algunos caracteres con significado especial (como < o >) por sus correspondientes entidades HTML (en el ejemplo, < y >), de forma que el navegador los muestre tal cual (en lugar de intentar interpretarlos).

Versión «función»

/*

 * Inserta entidades HTML para mostar un texto como HTML

 */

function txt2html(texto){ // v2005-09-18

    var salida=texto;

    salida=salida.replace(/&/g, '&amp;');

    salida=salida.replace(/"/g, '&quot;');

    salida=salida.replace(/'/g, '&#039;');

    salida=salida.replace(/</g, '&lt;');

    salida=salida.replace(/>/g, '&gt;');

    return salida;

}

/*

 * Reemplaza algunas entidades HTML por el carácter que representan

 */

function html2txt(html){ // v2005-09-18

    var salida=html;

    salida=salida.replace(/&gt;/g,   '>');

    salida=salida.replace(/&lt;/g,   '<');

    salida=salida.replace(/&#039;/g, "'");

    salida=salida.replace(/&quot;/g, '"');

    salida=salida.replace(/&amp;/g,  '&');

    return salida;

}

Versión «método del objeto String»

/*

 * Inserta entidades HTML para mostar un texto como HTML

 */

String.prototype.encodeHTML=function(){ // v2005-09-18

    var salida=this;

    salida=salida.replace(/&/g, '&amp;');

    salida=salida.replace(/"/g, '&quot;');

    salida=salida.replace(/'/g, '&#039;');

    salida=salida.replace(/</g, '&lt;');

    salida=salida.replace(/>/g, '&gt;');

    return salida;

}

/*

 * Reemplaza algunas entidades HTML por el carácter que representan

 */

String.prototype.decodeHTML=function(){ // v2005-09-18

    var salida=this;

    salida=salida.replace(/&gt;/g,   '>');

    salida=salida.replace(/&lt;/g,   '<');

    salida=salida.replace(/&#039;/g, "'");

    salida=salida.replace(/&quot;/g, '"');

    salida=salida.replace(/&amp;/g,  '&');

    return salida;

}

Ejemplo de uso

var foo='<b>Hola, mundo</b>';

document.write('<p>' + txt2html(foo) + '</p>');

document.write('<p>' + foo.encodeHTML() + '</p>');

var foo='&lt;b&gt;Hola, mundo&lt;/b&gt;';

document.write('<p>' + html2txt(foo) + '</p>');

document.write('<p>' + foo.decodeHTML() + '</p>');

El chascarrillo

Un error muy típico es generar dinámica y alegremente un campo de formulario con lo que sea que tengamos en una variable, lo que puede conducir a un HTML como <input type="text" name"autor" value="Leopoldo "Alas" Clarín"> que tendrá al pobre usuario preguntándose por qué sólo aparece Leopoldo en la casilla. Lo correcto sería <input type="text" name"autor" value="Leopoldo "Alas" Clarín">.

Y no, no se confundan ustedes, el visitante de la página no tiene que andar reemplazando cada comilla por ". Sólo debe hacerse cuando el HTML de la página se genere con JavaScript.

Historial

v2005-09-18: Añadimos a las funciones la palabra clave var para convertir las variables en locales (señor, qué despiste).; Primera versión de los métodos.
v2005-08-30: Primera versión de las funciones.