Rimuovi i tag HTML in Javascript con Regex


108

Sto cercando di rimuovere tutti i tag html da una stringa in Javascript. Ecco quello che ho ... non riesco a capire perché non funziona ... qualcuno sa cosa sto facendo di sbagliato?

<script type="text/javascript">

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

</script>

Molte grazie!

Risposte:


237

Prova questo, notando che la grammatica dell'HTML è troppo complessa perché le espressioni regolari siano corrette il 100% delle volte:

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

console.log(result);

Se sei disposto a utilizzare una libreria come jQuery , puoi semplicemente farlo:

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

2
Perché avvolgi la regex in una stringa? var regex = / (<([^>] +)>) / ig;
Brianary il

Questo non funzionerà. In particolare, non funzionerà con tag brevi: is- Thought.co.uk/book/sgml-9.htm#SHORTTAG
Mike Samuel

4
Questa è una vecchia domanda, ma la posterò
Joshua

2
Prova a eseguirlo "<img src=bogus onerror=alert(1337)". Il primo fallisce perché il parser HTML non richiede che l'ultimo tag sia chiuso da a >, e il secondo fallisce perché il caricamento dell'immagine inizia anche prima che un albero DOM analizzato venga aggiunto al DOM e $('<img ...>')invoca il parser HTML.
Mike Samuel

1
La soluzione regex fallirà anche se a >è incluso in un valore di attributo; in questo modo<div data="a + b > c">
MT0

34

Questa è una vecchia domanda, ma mi sono imbattuto in essa e ho pensato di condividere il metodo che ho usato:

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 ora conterrà: "some text and some more text"

Semplice, non è necessario jQuery e non dovrebbe deluderti nemmeno in casi più complessi.


Hiya. Bene, fondamentalmente tutto ciò che fa è creare un nuovo DIV, impostare il contenuto HTML interno su ciò che viene fornito (che presumo significhi che qualsiasi codice HTML viene analizzato), e quindi richiede tutto il contenuto di testo del div, che ignora detto HTML .
jsdw

nel mio browser l'oggetto non ha un campoinnerText
Adrian

@Adrian l'ultima riga selezionerà l'output di temp.textContentse esiste, e proverà solo in temp.innerTextcaso contrario. Il tuo browser dovrebbe avere il primo, ma per i browser che non lo hanno, viene utilizzato il secondo :)
jsdw

Dopo aver esaminato di nuovo questo aspetto (ci sono così tante risposte là fuori). Sto usando questo metodo. Questo è lo stesso metodo utilizzato in text-angular. Hanno aggiunto un paio di extra che ho incluso in questo thread
Rentering.com

Questa soluzione non è riuscita per me, sto usando @kolkov Text Editor for Angular.
Waseem Ahmad Naeem

10

Questo ha funzionato per me.

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

5
+1 grazie. questa fodera è stata perfetta per le mie esigenze. console.log( my_html.replace(/(&nbsp;|<([^>]+)>)/ig, "") );
DaveAlger

6

Ecco come lo fa TextAngular (Editor WYSISYG). Ho anche trovato che questa è la risposta più coerente, che è 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;
}

2

puoi usare una potente libreria per la gestione delle stringhe che è undrescore.string.js

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

=> "un collegamento"

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

=> "a linkalert (" ciao mondo! ") '

Non dimenticare di importare questa libreria come segue:

        <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>

2
Ho guardato la fonte e in realtà usano internamente la stessa regex suggerita in un'altra risposta.
eugene

2

la mia semplice libreria JavaScript chiamata FuncJS ha una funzione chiamata "strip_tags ()" che fa il compito per te - senza che tu debba inserire alcuna espressione regolare.

Ad esempio, supponi di voler rimuovere i tag da una frase: con questa funzione, puoi farlo semplicemente in questo modo:

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

Questo produrrà "Questa stringa contiene molti tag!".

Per una migliore comprensione, leggi la documentazione su GitHub FuncJS .

Inoltre, se lo desideri, fornisci un feedback tramite il modulo. Mi sarebbe molto utile!


Potresti forse fornire cosa strip_tags()fa invece di promuovere la tua libreria e non spiegarla? Il collegamento spiega l'utilizzo dell'API ma non cosa fa .
Justin Beaudry

1
beh, l'ho trovato su quel sito che ha dato,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

Questa è una soluzione per tag HTML e & nbsp ecc. Puoi rimuovere e aggiungere condizioni per ottenere il testo senza HTML e puoi sostituirlo con qualsiasi.

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


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>

0

La risposta selezionata non garantisce sempre che l'HTML venga rimosso, poiché è ancora possibile costruire una stringa HTML non valida attraverso di essa creando una stringa come la seguente.

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

Questo input garantirà che lo stripping assembli una serie di tag per te e si tradurrà in:

  "<h1>foo</h1>"

inoltre la funzione text di jquery rimuoverà il testo non circondato da tag.

Ecco una funzione che utilizza jQuery ma dovrebbe essere più robusta contro entrambi questi casi:

var stripHTML = function(s) {
    var lastString;

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

    return s;
};

0

Il modo in cui lo faccio è praticamente una battuta.

La funzione crea un oggetto Range e quindi crea un DocumentFragment in Range con la stringa come contenuto figlio.

Quindi afferra il testo del frammento, rimuove tutti i caratteri "invisibili" / di larghezza zero e lo ritaglia di qualsiasi spazio bianco iniziale / finale.

Mi rendo conto che questa domanda è vecchia, pensavo solo che la mia soluzione fosse unica e volevo condividere. :)

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);

-1

Come altri hanno affermato, regex non funzionerà. Prenditi un momento per leggere il mio articolo sul motivo per cui non puoi e non dovresti provare ad analizzare html con regex, che è quello che stai facendo quando stai tentando di rimuovere html dalla tua stringa sorgente.

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.