Eliminar etiquetas HTML en Javascript con Regex

108

Estoy tratando de eliminar todas las etiquetas html de una cadena en Javascript. Esto es lo que tengo ... No puedo entender por qué no funciona ... ¿Alguien sabe lo que estoy haciendo mal?

<script type="text/javascript">

var regex = "/<(.|\n)*?>/";
var body = "<p>test</p>";
var result = body.replace(regex, "");
alert(result);

</script>

¡Muchas gracias!

javascript regex Gabe
fuente

237

Pruebe esto, teniendo en cuenta que la gramática de HTML es demasiado compleja para que las expresiones regulares sean correctas el 100% del tiempo:

var regex = /(<([^>]+)>)/ig
,   body = "<p>test</p>"
,   result = body.replace(regex, "");

console.log(result);

Si está dispuesto a usar una biblioteca como jQuery , simplemente puede hacer esto:

console.log($('<p>test</p>').text());

karim79
fuente

2

¿Por qué envuelve la expresión regular en una cadena? var regex = / (<([^>] +)>) / ig;

brianary

Esto no funcionará. Específicamente, fallará en etiquetas cortas: is-thought.co.uk/book/sgml-9.htm#SHORTTAG

Mike Samuel

4

Esta es una vieja pregunta, pero la publicaré aquí: jsperf.com/regex-replace-vs-jquery-text

Joshua

2

Intente ejecutar esto "<img src=bogus onerror=alert(1337)". El primero falla porque el analizador HTML no requiere que la última etiqueta sea cerrada por a >, y el segundo falla porque la carga de la imagen comienza incluso antes de que se agregue un árbol DOM analizado al DOM, e $('<img ...>')invoca el analizador HTML.

Mike Samuel

1

La solución de expresiones regulares también fallará si >se incluye a en un valor de atributo; así<div data="a + b > c">

MT0

34

Esta es una vieja pregunta, pero me la encontré y pensé en compartir el método que usé:

var body = '<div id="anid">some <a href="link">text</a></div> and some more text';
var temp = document.createElement("div");
temp.innerHTML = body;
var sanitized = temp.textContent || temp.innerText;

sanitized ahora contendrá: "some text and some more text"

Simple, no se necesita jQuery y no debería decepcionarte ni siquiera en casos más complejos.

jsdw
fuente

Hola Bueno, básicamente todo lo que hace es crear un nuevo DIV, establecer el contenido HTML interno en lo que se proporcione (lo que supongo que significa que se analiza cualquier código HTML), y luego solicita todo el contenido de texto del div, que ignora dicho HTML .

jsdw

en mi navegador, el objeto no tiene campoinnerText

Adrian

@Adrian la última línea seleccionará la salida de temp.textContentsi existe, y solo lo intentará temp.innerTextsi no es así. Su navegador debe tener el primero, pero para los navegadores que no lo tienen, se usa el último en su lugar :)

jsdw

Después de analizar esto nuevamente (hay tantas respuestas por ahí). Estoy usando este método. Este es el mismo método utilizado en text-angular. Han agregado un par de extras que he incluido en este hilo

Rentering.com

Esta solución me falló, estoy usando @kolkov Text Editor para Angular.

Waseem Ahmad Naeem

10

Esto funcionó para mí.

   var regex = /(&nbsp;|<([^>]+)>)/ig
      ,   body = tt
     ,   result = body.replace(regex, "");
       alert(result);

fuente

5

+1 gracias. este delineador funcionaba perfecto para mis necesidades. console.log( my_html.replace(/( |<([^>]+)>)/ig, "") );

DaveAlger

6

Así es como TextAngular (WYSISYG Editor) lo está haciendo. También encontré que esta es la respuesta más consistente, que es NO REGEX.

@license textAngular
Author : Austin Anderson
License : 2013 MIT
Version 1.5.16
// turn html into pure text that shows visiblity
function stripHtmlToText(html)
{
    var tmp = document.createElement("DIV");
    tmp.innerHTML = html;
    var res = tmp.textContent || tmp.innerText || '';
    res.replace('\u200B', ''); // zero width space
    res = res.trim();
    return res;
}

Rentering.com
fuente

2

puede utilizar una poderosa biblioteca para la gestión de cadenas que es undrescore.string.js

_('a <a href="#">link</a>').stripTags()

=> 'un enlace'

_('a <a href="#">link</a><script>alert("hello world!")</script>').stripTags()

=> 'a linkalert ("¡hola mundo!")'

No olvide importar esta lib de la siguiente manera:

        <script src="underscore.js" type="text/javascript"></script>
        <script src="underscore.string.js" type="text/javascript"></script>
        <script type="text/javascript"> _.mixin(_.str.exports())</script>

Abdennour TOUMI
fuente

2

Miré la fuente y, en realidad, usan la misma expresión regular sugerida en otra respuesta internamente.

Eugene

2

mi sencilla biblioteca de JavaScript llamada FuncJS tiene una función llamada "strip_tags ()" que hace la tarea por ti, sin necesidad de que ingreses ninguna expresión regular.

Por ejemplo, digamos que desea eliminar etiquetas de una oración; con esta función, puede hacerlo simplemente así:

strip_tags("This string <em>contains</em> <strong>a lot</strong> of tags!");

Esto producirá "¡Esta cadena contiene muchas etiquetas!".

Para una mejor comprensión, lea la documentación en GitHub FuncJS .

Además, si lo desea, proporcione algunos comentarios a través del formulario. ¡Sería muy útil para mí!

Islam de Sharikul
fuente

¿Podrías quizás proporcionar lo que strip_tags()hace en lugar de simplemente promocionar tu biblioteca y no explicarlo? El enlace explica el uso de la API pero no lo que hace .

Justin Beaudry

1

bueno, lo encontré en ese sitio web que dio,

strip_tags = function(e) { var _hasTag, _tag_string; if (!(e === void 0 || e === null || e === "")) { _tag_string = e; if (typeof _tag_string === "object") { _tag_string = _tag_string.outerHTML; } _hasTag = _tag_string.match(/(<([^>]+)>)/ig); if (_hasTag) { return trim(_tag_string.replace(/(<([^>]+)>)/ig, '')); } else { return trim(_tag_string); } } else { throw new Error("The 'strip_tags' function expects one argument in the form of a string or object."); } };

Predrag Stojadinović

1

Esta es una solución para etiquetas HTML y & nbsp, etc. y puede eliminar y agregar condiciones para obtener el texto sin HTML y puede reemplazarlo por cualquiera.

convertHtmlToText(passHtmlBlock)
{
   str = str.toString();
  return str.replace(/<[^>]*(>|$)|&nbsp;|&zwnj;|&raquo;|&laquo;|&gt;/g, 'ReplaceIfYouWantOtherWiseKeepItEmpty');
}

Sahil Ralkar
fuente

0

Para obtener un desinfectante HTML adecuado en JS, consulte http://code.google.com/p/google-caja/wiki/JsHtmlSanitizer

Mike Samuel
fuente

0

<html>
<head>
<script type="text/javascript">
function striptag(){
var html = /(<([^>]+)>)/gi;
for (i=0; i < arguments.length; i++)
arguments[i].value=arguments[i].value.replace(html, "")
}
</script>
</head> 
<body>
       <form name="myform">
<textarea class="comment" title="comment" name=comment rows=4 cols=40></textarea><br>
<input type="button" value="Remove HTML Tags" onClick="striptag(this.form.comment)">
</form>
</body>
</html>

Surya R Praveen
fuente

0

La respuesta seleccionada no siempre garantiza que se elimine el HTML, ya que aún es posible construir una cadena HTML no válida a través de ella creando una cadena como la siguiente.

  "<<h1>h1>foo<<//</h1>h1/>"

Esta entrada garantizará que la extracción ensamble un conjunto de etiquetas para usted y dará como resultado:

  "<h1>foo</h1>"

Además, la función de texto de jquery eliminará el texto que no esté rodeado por etiquetas.

Aquí hay una función que usa jQuery pero debería ser más robusta en ambos casos:

var stripHTML = function(s) {
    var lastString;

    do {            
        s = $('<div>').html(lastString = s).text();
    } while(lastString !== s) 

    return s;
};

Rick Moynihan
fuente

0

La forma en que lo hago es prácticamente de una sola línea.

La función crea un objeto Range y luego crea un DocumentFragment en el Range con la cadena como contenido secundario.

Luego toma el texto del fragmento, elimina cualquier carácter "invisible" / de ancho cero y lo recorta de cualquier espacio en blanco inicial / final.

Me doy cuenta de que esta pregunta es antigua, solo pensé que mi solución era única y quería compartirla. :)

function getTextFromString(htmlString) {
    return document
        .createRange()
        // Creates a fragment and turns the supplied string into HTML nodes
        .createContextualFragment(htmlString)
        // Gets the text from the fragment
        .textContent
        // Removes the Zero-Width Space, Zero-Width Joiner, Zero-Width No-Break Space, Left-To-Right Mark, and Right-To-Left Mark characters
        .replace(/[\u200B-\u200D\uFEFF\u200E\u200F]/g, '')
        // Trims off any extra space on either end of the string
        .trim();
}

var cleanString = getTextFromString('<p>Hello world! I <em>love</em> <strong>JavaScript</strong>!!!</p>');

alert(cleanString);

ElijahFowler
fuente

-1

Como han dicho otros, la expresión regular no funcionará. Tómese un momento para leer mi artículo sobre por qué no puede y no debe intentar analizar html con expresiones regulares, que es lo que está haciendo cuando intenta eliminar html de su cadena de origen.

Col
fuente

Eliminar etiquetas HTML en Javascript con Regex

Respuestas: