Retire las etiquetas HTML del texto usando JavaScript simple

7 minutos de lectura

Avatar de usuario de Bryan
bryan

¿Cómo eliminar las etiquetas HTML de una cadena usando solo JavaScript simple, sin usar una biblioteca?

avatar de usuario de nickf
apodo

myString.replace(/<[^>]*>?/gm, '');

  • no funciona para <img src=http://www.google.com.kh/images/srpr/nav_logo27.png onload="alert(42)" si se está inyectando a través de document.write o concatenar con una cadena que contiene un > antes de inyectar a través de innerHTML.

    –Mike Samuel

    24 de diciembre de 2010 a las 15:07


  • @PerishableDave, estoy de acuerdo en que el > quedará en el segundo. Sin embargo, eso no es un peligro de inyección. El peligro se produce por < dejado en el primero, lo que hace que el analizador HTML esté en un contexto diferente al estado de los datos cuando empieza la segunda. Tenga en cuenta que no hay transición del estado de datos en >.

    –Mike Samuel

    22 de septiembre de 2011 a las 18:04

  • @MikeSamuel ¿Ya decidimos esta respuesta? Usuario ingenuo aquí listo para copiar y pegar.

    – Ziggy

    7 mayo 2013 a las 18:32

  • Esto también, creo, se vuelve completamente confuso si se le da algo como <button onClick="dostuff('>');"></button> Suponiendo que HTML esté escrito correctamente, aún debe tener en cuenta que un signo mayor que podría estar en algún lugar del texto citado en un atributo. También le gustaría eliminar todo el texto dentro de <script> etiquetas, al menos.

    – Jonathan

    18 de agosto de 2013 a las 2:37

  • @AntonioMax, respondí esta pregunta hasta la saciedad, pero en cuanto al fondo de tu pregunta, porque El código crítico de seguridad no debe copiarse y pegarse. Debe descargar una biblioteca y mantenerla actualizada y parcheada para estar seguro contra las vulnerabilidades descubiertas recientemente y los cambios en los navegadores.

    –Mike Samuel

    27 de noviembre de 2013 a las 16:04

  • Vale la pena agregar que esta solución solo funciona en el navegador.

    – kris_IV

    9 de febrero de 2018 a las 8:08

  • No se trata de quitar etiquetas, sino más bien de PHP htmlspecialchars(). Sigue siendo útil para mí.

    – Daantje

    14/09/2018 a las 19:38

  • Tenga en cuenta que esto también elimina los espacios en blanco desde el principio del texto.

    – Raine Revere

    11 de abril de 2019 a las 15:48

  • además, no intenta analizar html usando expresiones regulares

    – törzsmókus

    22 de enero de 2021 a las 10:53

  • Esta debería ser la respuesta aceptada porque es la forma más segura y rápida de hacerlo.

    – the_previ

    6 oct 2021 a las 12:00


Avatar de usuario de Mark
Marca

Manera más simple:

jQuery(html).text();

Eso recupera todo el texto de una cadena de html.

  • Siempre usamos jQuery para proyectos ya que invariablemente nuestros proyectos tienen mucho Javascript. Por lo tanto, no agregamos volumen, aprovechamos el código API existente…

    – Marca

    14/03/2012 a las 16:31

  • Lo usas, pero el OP podría no hacerlo. la pregunta era sobre Javascript NO JQuery.

    –Rafael Herscovici

    14/03/2012 a las 16:55

  • Todavía es una respuesta útil para las personas que necesitan hacer lo mismo que el OP (como yo) y no les importa usar jQuery (como yo), sin mencionar que podría haber sido útil para el OP si estuvieran considerando usar jQuery. El objetivo del sitio es compartir conocimientos. Tenga en cuenta el efecto escalofriante que podría tener al regañar respuestas útiles sin una buena razón.

    – acjay

    29 de noviembre de 2012 a las 1:32

  • @Dementic Sorprendentemente, encuentro que los hilos con múltiples respuestas son los más útiles, porque a menudo una respuesta secundaria satisface mis necesidades exactas, mientras que la respuesta principal satisface el caso general.

    –Eric G

    14 de diciembre de 2012 a las 19:11

  • Eso no funcionará si alguna parte de la cadena no está envuelta en la etiqueta html. por ejemplo, “Error: Ingrese un correo electrónico válido” devolverá solo “Error:”

    – Aamir Afridi

    5 de febrero de 2013 a las 11:10

Avatar de usuario de Black
Negro

Como una extensión del método jQuery, si su cadena no contiene HTML (por ejemplo, si está tratando de eliminar HTML de un campo de formulario)

jQuery(html).text();

devolverá una cadena vacía si no hay HTML

Usar:

jQuery('<p>' + html + '</p>').text();

en cambio.

Actualizar:
Como se ha señalado en los comentarios, en algunas circunstancias esta solución ejecutará javascript contenido dentro html si el valor de html podría ser influenciado por un atacante, use una solución diferente.

  • Siempre usamos jQuery para proyectos ya que invariablemente nuestros proyectos tienen mucho Javascript. Por lo tanto, no agregamos volumen, aprovechamos el código API existente…

    – Marca

    14/03/2012 a las 16:31

  • Lo usas, pero el OP podría no hacerlo. la pregunta era sobre Javascript NO JQuery.

    –Rafael Herscovici

    14/03/2012 a las 16:55

  • Todavía es una respuesta útil para las personas que necesitan hacer lo mismo que el OP (como yo) y no les importa usar jQuery (como yo), sin mencionar que podría haber sido útil para el OP si estuvieran considerando usar jQuery. El objetivo del sitio es compartir conocimientos. Tenga en cuenta el efecto escalofriante que podría tener al regañar respuestas útiles sin una buena razón.

    – acjay

    29 de noviembre de 2012 a las 1:32

  • @Dementic Sorprendentemente, encuentro que los hilos con múltiples respuestas son los más útiles, porque a menudo una respuesta secundaria satisface mis necesidades exactas, mientras que la respuesta principal satisface el caso general.

    –Eric G

    14 de diciembre de 2012 a las 19:11

  • Eso no funcionará si alguna parte de la cadena no está envuelta en la etiqueta html. por ejemplo, “Error: Ingrese un correo electrónico válido” devolverá solo “Error:”

    – Aamir Afridi

    5 de febrero de 2013 a las 11:10

Avatar de usuario de Víctor
Víctor

Conversión de HTML para correo electrónico de texto sin formato manteniendo intactos los hipervínculos (a href)

La función anterior publicada por hipóxido funciona bien, pero buscaba algo que básicamente convertiría HTML creado en un editor Web RichText (por ejemplo, FCKEditor) y borraría todo el HTML pero dejaría todos los enlaces debido al hecho de que quería tanto el HTML como el la versión de texto sin formato para ayudar a crear las partes correctas de un correo electrónico STMP (tanto HTML como texto sin formato).

Después de mucho tiempo de buscar en Google, a mí y a mis colegas se nos ocurrió esto usando el motor de expresiones regulares en Javascript:

str="this string has <i>html</i> code i want to <b>remove</b><br>Link Number 1 -><a href="http://www.bbc.co.uk">BBC</a> Link Number 1<br><p>Now back to normal text and stuff</p>
";
str=str.replace(/<br>/gi, "\n");
str=str.replace(/<p.*>/gi, "\n");
str=str.replace(/<a.*href="https://stackoverflow.com/questions/822452/(.*?)".*>(.*?)<\/a>/gi, " $2 (Link->$1) ");
str=str.replace(/<(?:.|\s)*?>/g, "");

el str variable comienza así:

this string has <i>html</i> code i want to <b>remove</b><br>Link Number 1 -><a href="http://www.bbc.co.uk">BBC</a> Link Number 1<br><p>Now back to normal text and stuff</p>

y luego, después de que el código se haya ejecutado, se verá así:

this string has html code i want to remove
Link Number 1 -> BBC (Link->http://www.bbc.co.uk)  Link Number 1


Now back to normal text and stuff

Como puede ver, se eliminó todo el HTML y el enlace se mantuvo intacto con el texto del hipervínculo. También he reemplazado el <p> y <br> etiquetas con \n (caracter de nueva línea) para que se haya conservado algún tipo de formato visual.

Para cambiar el formato del enlace (ej. BBC (Link->http://www.bbc.co.uk) ) solo edite el $2 (Link->$1)dónde $1 es la URL/URI href y el $2 es el texto hipervinculado. Con los enlaces directamente en el cuerpo del texto sin formato, la mayoría de los clientes de correo SMTP los convierten para que el usuario pueda hacer clic en ellos.

Espero que encuentres esto útil.

  • No maneja ” “

    – Rose Nettoyeur

    30 de noviembre de 2018 a las 12:38

  • advertencia obligatoria: stackoverflow.com/a/1732454/501765

    – törzsmókus

    22 de enero de 2021 a las 10:51

¿Ha sido útil esta solución?