Cómo quitar HTML de una cadena de texto (extraer solo contenido de texto) en JavaScript

Normalmente, en el lado del servidor, puede usar una serie de funciones PHP (como strip_tags) y para eliminar HTML y formatos desagradables. Sin embargo, si no puede usar el servidor (o usa Node.js) para realizar esta tarea, aún puede usar Javascript para hacerlo. En este artículo, encontrará 3 formas de eliminar las etiquetas html de una cadena en Javascript.

1. Crea un elemento DOM temporal y recupera el texto.

Esta es la forma preferida (y recomendada) de quitar el HTML de una cadena con Javascript. El contenido de un elemento div temporal será la cadena HTML proporcionada para eliminar, luego, desde el divelemento, devuelva la innerTextpropiedad:

/**
 * Devuelve el texto de una cadena HTML
 * 
 * @param {html} String The html string
 */
function stripHtml(html){
    // Crea un nuevo elemento div
    var temporalDivElement = document.createElement("div");
    // Establecer el contenido HTML con el dado
    temporalDivElement.innerHTML = html;
    // Recuperar la propiedad de texto del elemento (compatibilidad con varios navegadores)
    return temporalDivElement.textContent || temporalDivElement.innerText || "";
}

var htmlString= "<div><h1>Hello World</h1>\n<p>It's me, Mario</p></div>";

//Hola Mundo
//Soy yo Mario
console.log(stripHtml(htmlString));

El único problema de esto (y la ventaja) es que el navegador manejará la cadena proporcionada como HTML, eso significa que si la cadena HTML contiene algún tipo de Javascript interpretable para el navegador, entonces se ejecutará:

// Esto no hará nada más que recuperar el texto
stripHtml("<script>alert(\"Hello\");</script>")

// Pero esto ...
stripHtml("<img onerror='alert(\"Oh Oh this is not good, i could do something evil with this javascript\")' src='inexistent-image-source'>")

Por lo tanto, debe usar esto solo si confía en el origen de la cadena HTML.

2. Si estás utilizando jQuery

Si usa jQuery, puede simplificar el código desde el primer paso. El siguiente código hará lo mismo que el código del primer paso (las advertencias también se aplican):

var htmlString= "<div>\n <h1>Hello World</h1>\n <p>This is the text that we should get.</p>\n <p>Our Code World &#169; 2017</p>\n </div>";

var stripedHtml = $("<div>").html(htmlString).text();

// Hola Mundo
// Este es el texto que deberíamos obtener.
// Our Code World © 2017
console.log(stripedHtml);

3. Con una expresión regular

Si está trabajando en un entorno de nodo, donde no hay ningún método documentcreateElement, puede usar una expresión regular para reemplazar todas las etiquetas HTML de una cadena:

var htmlString= "<div><h1>Hello World</h1>\n<p>It's me, Mario</p></div>";

var stripedHtml = htmlString.replace(/<[^>]+>/g, '');

//Hello World
//It's me, Mario
console.log(stripedHtml);

Este método funcionará perfectamente, pero solo eliminará los símbolos menor que y más que ( <>), lo que significa que las entidades html no se eliminan de la cadena como se muestra en el siguiente ejemplo:

var htmlString= "<div>\n <h1>Hello World</h1>\n <p>This is the text that we should get.</p>\n <p>Our Code World &#169; 2017</p>\n </div>";

var stripedHtml = htmlString.replace(/<[^>]+>/g, '');

// Hello World
// This is the text that we should get.
// Our Code World &#169; 2017
console.log(stripedHtml);

La entidad &#169; debe traducirse como un símbolo de copyright, sin embargo, sigue ahí como una entidad html. Eso es claramente una desventaja si lo comparas con el primer método, pero no te preocupes, no todo está perdido (todavía no). Puede usar Javascript para decodificar las htmlentities en caracteres legibles ( lea este artículo para aprender cómo lograrlo ). El siguiente ejemplo eliminará todo el html usando la instrucción de reemplazo mencionada anteriormente y convertirá las htmlentities en caracteres legibles por humanos usando la biblioteca he :

var htmlString= "<div>\n <h1>Hello World</h1>\n <p>This is the text that we should get.</p>\n <p>Our Code World &#169; 2017</p>\n </div>";

var stripedHtml = htmlString.replace(/<[^>]+>/g, '');
var decodedStripedHtml = he.decode(stripedHtml);

// Hello World
// This is the text that we should get.
// Our Code World &#169; 2017
console.log(stripedHtml);

// Hello World
// This is the text that we should get.
// Our Code World © 2017
console.log(decodedStripedHtml);

Como puede ver, usando la biblioteca convertimos las entidades html restantes en su valor legible. Tenga en cuenta que no necesita usar necesariamente la biblioteca he porque puede crear su propia función decodificar htmlentities si lee este artículo .

Que te diviertas ❤️!

Esto podria interesarte

Conviertete en un programador más sociable