Usuń tagi HTML w Javascript za pomocą Regex

108

Próbuję usunąć wszystkie tagi HTML z ciągu znaków w JavaScript. Oto, co mam… Nie mogę zrozumieć, dlaczego to nie działa… czy ktoś wie, co robię źle?

<script type="text/javascript">

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

</script>

Wielkie dzięki!

javascript regex Gabe
źródło

Odpowiedzi:

237

Spróbuj tego, zauważając, że gramatyka HTML jest zbyt złożona, aby wyrażenia regularne były poprawne w 100% przypadków:

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

console.log(result);

Jeśli chcesz skorzystać z biblioteki, takiej jak jQuery , możesz po prostu zrobić to:

console.log($('<p>test</p>').text());
karim79
źródło
2
Dlaczego zawijasz wyrażenie regularne w ciąg? var regex = / (<([^>] +)>) / ig;
brianary
To nie zadziała. W szczególności zakończy się niepowodzeniem w przypadku krótkich tagów: is-thought.co.uk/book/sgml-9.htm#SHORTTAG
Mike Samuel
4
To jest stare pytanie, ale po prostu opublikuję je tutaj: jsperf.com/regex-replace-vs-jquery-text
Joshua
2
Spróbuj to uruchomić "<img src=bogus onerror=alert(1337)". Pierwszy kończy się niepowodzeniem, ponieważ parser HTML nie wymaga, aby ostatni znacznik był zamykany a >, a drugi nie, ponieważ ładowanie obrazu rozpoczyna się jeszcze przed dodaniem przeanalizowanego drzewa DOM do DOM i $('<img ...>')wywołuje parser HTML.
Mike Samuel
1
Rozwiązanie wyrażenia regularnego również nie powiedzie się, jeśli >wartość atrybutu zawiera a; w ten sposób<div data="a + b > c">
MT0
34

To stare pytanie, ale natknąłem się na nie i pomyślałem, że podzielę się metodą, której użyłem:

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 będzie teraz zawierać: "some text and some more text"

Proste, nie jest potrzebne jQuery i nie powinno Cię zawieść nawet w bardziej skomplikowanych przypadkach.

jsdw
źródło
Cześć. Cóż, w zasadzie wszystko, co robi, to utworzenie nowego DIV, ustawienie wewnętrznej zawartości HTML na wszystko, co jest dostarczone (co, jak zakładam, oznacza, że ​​każdy kod HTML jest analizowany), a następnie pyta o całą zawartość tekstową div, który ignoruje wspomniany HTML .
jsdw
w mojej przeglądarce obiekt nie ma polainnerText
Adrian
@Adrian ostatnia linia wybierze wyjście, temp.textContentjeśli istnieje, i spróbuje tylko, temp.innerTextjeśli nie. Twoja przeglądarka powinna mieć tego pierwszego, ale dla przeglądarek, które nie, ten ostatni jest stosowany zamiast :)
jsdw
Po ponownym przyjrzeniu się temu (jest tak wiele odpowiedzi). Używam tej metody. Jest to ta sama metoda, która jest używana w tekstach kątowych. Dodali kilka dodatków, które zamieściłem w tym wątku
Rentering.com
To rozwiązanie zawiodło, używam edytora tekstu @kolkov dla Angular.
Waseem Ahmad Naeem
10

To zadziałało dla mnie.

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

źródło
5
+1 dzięki. ten jeden liner działał idealnie na moje potrzeby. console.log( my_html.replace(/(&nbsp;|<([^>]+)>)/ig, "") );
DaveAlger
6

Oto jak robi to TextAngular (Edytor WYSISYG). Okazało się również, że jest to najbardziej spójna odpowiedź, czyli NIE 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
źródło
2

możesz użyć potężnej biblioteki do zarządzania String, która jest undrescore.string.js 

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

=> 'link'

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

=> 'linkalert ("witaj świecie!")'

Nie zapomnij zaimportować tej biblioteki w następujący sposób: 

        <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
źródło
2
Spojrzałem na źródło i faktycznie używają tego samego wyrażenia regularnego, które sugerowano w innej odpowiedzi.
Eugene
2

mój prosty biblioteka JavaScript o nazwie FuncJS ma funkcję „strip_tags ()”, która wykonuje to zadanie za Ciebie - bez konieczności wprowadzania jakichkolwiek wyrażeń regularnych.

Na przykład powiedz, że chcesz usunąć tagi ze zdania - dzięki tej funkcji możesz to zrobić w następujący sposób:

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

To da "Ten ciąg zawiera dużo tagów!".

Aby uzyskać lepsze zrozumienie, przeczytaj dokumentację na GitHub FuncJS .

Dodatkowo, jeśli chcesz, prześlij swoją opinię za pośrednictwem formularza. Byłoby to dla mnie bardzo pomocne!

Sharikul Islam
źródło
Czy mógłbyś podać, co strip_tags()robi zamiast tylko promować swoją bibliotekę i nie wyjaśniać jej? Odnośnik wyjaśnia użycie interfejsu API, ale nie wyjaśnia, do czego służy .
Justin Beaudry
1
cóż, znalazłem to na tej stronie, którą podał,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

Jest to rozwiązanie dla tagów HTML i & nbsp itp. Możesz usunąć i dodać warunki, aby uzyskać tekst bez HTML i zastąpić go dowolnym.

convertHtmlToText(passHtmlBlock)
{
   str = str.toString();
  return str.replace(/<[^>]*(>|$)|&nbsp;|&zwnj;|&raquo;|&laquo;|&gt;/g, 'ReplaceIfYouWantOtherWiseKeepItEmpty');
}
Sahil Ralkar
źródło
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
źródło
0

Wybrana odpowiedź nie zawsze zapewnia usunięcie kodu HTML, ponieważ nadal możliwe jest skonstruowanie za jego pośrednictwem nieprawidłowego ciągu HTML, tworząc ciąg podobny do poniższego.

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

Te dane wejściowe zagwarantują, że usuwanie elementów utworzy dla Ciebie zestaw tagów i spowoduje:

  "<h1>foo</h1>"

dodatkowo funkcja tekstowa jquery usunie tekst nie otoczony tagami.

Oto funkcja, która używa jQuery, ale powinna być bardziej odporna na oba te przypadki:

var stripHTML = function(s) {
    var lastString;

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

    return s;
};
Rick Moynihan
źródło
0

Sposób, w jaki to robię, jest praktycznie jednoliniowy.

Funkcja tworzy obiekt Range, a następnie tworzy DocumentFragment w Range z ciągiem znaków jako zawartością podrzędną.

Następnie przechwytuje tekst fragmentu, usuwa wszelkie „niewidoczne” / zerowej szerokości znaki i przycina go z wszelkich początkowych / końcowych białych znaków.

Zdaję sobie sprawę, że to pytanie jest stare, po prostu pomyślałem, że moje rozwiązanie jest wyjątkowe i chciałem się nim podzielić. :)

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
źródło
-1

Jak stwierdzili inni, regex nie będzie działać. Poświęć chwilę na przeczytanie mojego artykułu o tym, dlaczego nie możesz i nie powinieneś próbować analizować html za pomocą wyrażenia regularnego, co robisz, gdy próbujesz usunąć kod HTML z ciągu źródłowego.

Kapusta
źródło