Quitar etiquetas HTML de una cadena en JavaScript
- Eliminar etiquetas HTML con expresiones regulares
-
Eliminar etiquetas HTML con
textContent - Eliminar etiquetas HTML con jQuery
-
Eliminar etiquetas HTML con
DOMParser - Eliminar etiquetas HTML con el paquete String-Strip-HTML
Este artículo presenta cómo quitar etiquetas HTML de una cadena usando diferentes métodos con ejemplos.
Eliminar etiquetas HTML con expresiones regulares
Puede crear un patrón de expresión regular que coincida con las etiquetas HTML en su cadena. Como resultado, puede reemplazar cada coincidencia con una cadena vacía.
Esto elimina efectivamente las etiquetas HTML de la cadena.
Definimos un patrón de expresión regular en el siguiente código que reemplaza las etiquetas HTML. Sin embargo, no es a prueba de balas.
Cualquiera puede romper el patrón de expresión regular proporcionando HTML mal formado. Entonces, si el HTML mal formado contiene algo de JavaScript, podría ejecutarse.
O bien, el patrón elimina la cadena completa y, a cambio, obtiene una cadena vacía.
let html = '<h1 class=\'header_tag\'>hello <i>world</i></h1>';
let cleanHTML = html.replace(/<\/?[^>]+(>|$)/gi, '');
console.log(cleanHTML);
Producción :
hello world
Ahora, pruebe el mismo código con un HTML mal formado:
let html = '<div data="score> 42">Hello</div>';
let cleanHTML = html.replace(/<\/?[^>]+(>|$)/gi, '');
console.log(cleanHTML);
Producción :
42">Hello
Eliminar etiquetas HTML con textContent
El método textContent devolverá el texto de una cadena HTML. Es perfecto para prevenir ataques de Cross-Site Scripting.
Hemos usado textContent para eliminar las etiquetas HTML en nuestro código de ejemplo a continuación. Sin embargo, tenga en cuenta lo siguiente cuando utilice nuestro enfoque:
- El HTML es válido dentro de un elemento
<div>. Eso es porque HTML en un<cuerpo>o<html>no es válido dentro de un elemento<div>. - El método
textContentincluirá texto dentro de un elemento<script>. Entonces, si la cadena contiene elementos<script>, este método contextContentdevolverá su contenido. - Basado en el punto anterior, asegúrese de que el HTML no tenga elementos
<script>. - Asegúrate de que el HTML no sea
nulo. - El HTML es de una fuente confiable. Esto se debe a que el siguiente código HTML pasará por este método:
<img onerror='alert(\"Ejecutar JavaScript peligroso\")' src=noexistencia>
Ejemplo:
let html = '<h1 class=\'header_tag\'>hello <i>world</i></h1>';
let div = document.createElement('div');
div.innerHTML = html;
let text = div.textContent || div.innerText || '';
console.log(text);
Producción :
hello world
Cuando actualiza la cadena para que contenga el elemento <script>:
let htmlWithScriptElement = '<script>alert("Hello world");<\/script>';
let html =
`<h1 class='header_tag'>hello <i>world</i> ${htmlWithScriptElement}</h1>`;
let div = document.createElement('div');
div.innerHTML = html;
let text = div.textContent || div.innerText || '';
console.log(text);
Producción :
hello world alert("Hello world");
Obtienes el contenido del elemento <script>.
Desde nuestro último punto sobre cómo el HTML debe ser de una fuente confiable, si no lo es, podría resultar costoso.
// This time the HTML contains code
// that'll get through stripping HTML tags
// with textContent
let html =
'<img onerror=\'alert("Run dangerous JavaScript")\' src=nonexistence>';
let div = document.createElement('div');
div.innerHTML = html;
let text = div.textContent || div.innerText || '';
console.log(text);
Producción:
Eliminar etiquetas HTML con jQuery
La biblioteca jQuery tiene la API .text() que devolverá el texto de una cadena que contiene HTML. Aunque, podría usar el método innerText nativo de JavaScript.
Sin embargo, el enfoque de jQuery es multinavegador. Hemos usado la API .text() para eliminar el HTML de la cadena dada en el siguiente código.
Ejemplo:
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
let html = "<h1 class='header_tag'>hello <i>world</i></h1>";
console.log($(html).text());
</script>
</body>
Producción :
hello world
Mientras tanto, este enfoque requiere que el HTML provenga de una fuente confiable. De lo contrario, podría ejecutar código JavaScript arbitrario.
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
let html = "<img onerror='alert(\"Run dangerous JavaScript\")' src=nonexistence>";
console.log($(html).text());
</script>
</body>
Producción:
Eliminar etiquetas HTML con DOMParser
Con la ayuda de DOMParser, puede analizar un código HTML. Entonces, cuando una cadena contiene código HTML, puede eliminar las etiquetas HTML con el método DOMParser y su método parseFromSring().
Además, este método evita el JavaScript arbitrario discutido anteriormente en este artículo.
Hemos usado DOMParser.parseFromString() para eliminar las etiquetas HTML de la cadena en el código a continuación.
Ejemplo:
function stripHTMLTags(html) {
const parseHTML = new DOMParser().parseFromString(html, 'text/html');
return parseHTML.body.textContent || '';
}
let html = '<h1 class=\'header_tag\'>hello <i>world</i></h1>';
console.log(stripHTMLTags(html));
Producción :
hello world
Mientras tanto, DOMParser.parseFromString() devolverá una cadena vacía para el código JavaScript arbitrario:
function stripHTMLTags(html) {
const parseHTML = new DOMParser().parseFromString(html, 'text/html');
return parseHTML.body.textContent || '';
}
let html =
'<img onerror=\'alert("Run dangerous JavaScript")\' src=nonexistence>';
console.log(stripHTMLTags(html));
Producción :
<empty string>
Eliminar etiquetas HTML con el paquete String-Strip-HTML
El paquete string-strip-html está diseñado para eliminar HTML de una cadena. El paquete proporciona un método stringStripHtml que toma un HTML como entrada.
Luego, devolverá una cadena sin etiquetas HTML. Si la cadena contiene el elemento <script>, string-strip-html lo eliminará junto con su contenido.
En el siguiente código, hemos pasado una cadena HTML al método stringStripHtml. Esta cadena HTML contiene el elemento <script>.
Sin embargo, se elimina cuando ejecuta el código en su navegador web.
<body>
<script src="https://cdn.jsdelivr.net/npm/string-strip-html/dist/string-strip-html.umd.js"></script>
<script type="text/javascript">
const { stripHtml } = stringStripHtml;
let htmlWithScriptElement = '<script>alert("Hello world");<\/script>';
let html = `<h1 class='header_tag'>hello <i>world</i> ${htmlWithScriptElement}</h1>`;
console.log(stripHtml(html).result);
</script>
</body>
Producción :
hello world
Habdul Hazeez is a technical writer with amazing research skills. He can connect the dots, and make sense of data that are scattered across different media.
LinkedIn