Regex ile Javascript'teki HTML Etiketlerini Kaldır


108

Javascript'te bir dizeden tüm html etiketlerini kaldırmaya çalışıyorum. İşte sahip olduğum şey ... neden çalışmadığını anlayamıyorum .... neyi yanlış yaptığımı biliyor musun?

<script type="text/javascript">

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

</script>

Çok teşekkürler!

Yanıtlar:


237

Bunu deneyin ve HTML dilbilgisinin, normal ifadelerin her zaman doğru olamayacak kadar karmaşık olduğunu unutmayın:

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

console.log(result);

JQuery gibi bir kitaplık kullanmak istiyorsanız, bunu kolayca yapabilirsiniz:

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

2
Normal ifadeyi neden bir dizeye sarıyorsunuz? var regex = / (<([^>] +)>) / ig;
brianary

Bu işe yaramayacak. Özellikle kısa etiketlerde başarısız olacaktır: is-thought.co.uk/book/sgml-9.htm#SHORTTAG
Mike Samuel

4
Bu eski bir soru ancak bunu buraya göndereceğim
Joshua

2
Bunu çalıştırmayı deneyin "<img src=bogus onerror=alert(1337)". Birincisi, HTML ayrıştırıcısı son etiketin a ile kapatılmasını gerektirmediğinden >başarısız olur ve ikincisi, görüntü yüklemesi, ayrıştırılmış bir DOM ağacı DOM'a eklenmeden önce bile başladığından $('<img ...>')ve HTML ayrıştırıcısını çağırdığından başarısız olur .
Mike Samuel

1
>Bir öznitelik değerine a dahil edilirse, normal ifade çözümü de başarısız olur ; böyle<div data="a + b > c">
MT0

34

Bu eski bir soru, ama ona rastladım ve kullandığım yöntemi paylaşacağımı düşündüm:

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 şimdi içerecek: "some text and some more text"

Basittir, jQuery gerekmez ve daha karmaşık durumlarda bile sizi hayal kırıklığına uğratmamalıdır.


Selam. Temelde tek yaptığı yeni bir DIV oluşturmak, iç HTML içeriğini sağlananlara ayarlamaktır (ki bu, herhangi bir HTML kodunun ayrıştırıldığı anlamına gelir) ve ardından div'in tüm metin içeriğini sorar, bu da söz konusu HTML'yi yok sayar. .
jsdw

tarayıcımda nesnenin alanı yokinnerText
Adrian

@Adrian, son satır temp.textContentvarsa çıktısını seçecek ve yalnızca temp.innerTextyoksa deneyecektir . Tarayıcınızda birincisi olmalıdır, ancak olmayan tarayıcılar için bunun yerine ikincisi kullanılır :)
jsdw

Buna tekrar baktıktan sonra (orada pek çok cevap var). Ben bu yöntemi kullanıyorum. Bu, metin açılı olarak kullanılan aynı yöntemdir. Bu konuya dahil ettiğim birkaç ekstra
eklediler

Bu çözüm benim için başarısız oldu, Angular için @kolkov Metin Düzenleyicisi kullanıyorum.
Waseem Ahmad Naeem

10

Bu benim için çalıştı.

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

5
+1 teşekkürler. bu tek astar ihtiyaçlarım için mükemmel uyandı. console.log( my_html.replace(/(&nbsp;|<([^>]+)>)/ig, "") );
DaveAlger

6

TextAngular (WYSISYG Editör) bunu nasıl yapıyor. Ayrıca bunu en tutarlı cevap olarak buldum, bu YOK 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

undrescore.string.js olan yönetim dizesi için güçlü bir kitaplık kullanabilirsiniz.

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

=> 'bir bağlantı'

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

=> 'bir linkalert ("merhaba dünya!")'

Bu kitaplığı aşağıdaki gibi içe aktarmayı unutmayın:

        <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
Kaynağa baktım ve aslında dahili olarak başka bir cevapta önerilen aynı normal ifadeyi kullanıyorlar.
eugene

2

benim basit herhangi düzenli ifadeleri girmek zorunda bırakmadan - FuncJS denilen JavaScript kütüphanesi "strip_tags ()" sizin için görev yapar hangi adında bir işlevi vardır.

Örneğin, bir cümleden etiketleri kaldırmak istediğinizi söyleyin - bu işlevle bunu basitçe şu şekilde yapabilirsiniz:

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

Bu, "Bu dizi çok sayıda etiket içeriyor!" Üretecektir.

Daha iyi bir anlayış için lütfen GitHub FuncJS'deki belgeleri okuyun .

Ek olarak, isterseniz, lütfen form aracılığıyla biraz geri bildirim sağlayın. Bana çok yardımcı olur!


strip_tags()Sadece kütüphanenizi tanıtmak ve onu açıklamak yerine neyin işe yaradığını söyleyebilir misiniz ? Bağlantı, API kullanımını açıklar ancak ne yaptığını açıklamaz .
Justin

1
peki, verdiği web sitesinde buldum,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

Bu, HTML etiketi ve & nbsp vb. İçin bir çözümdür ve metni HTML olmadan almak için koşulları kaldırabilir ve ekleyebilir ve herhangi biriyle değiştirebilirsiniz.

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

Aşağıdaki gibi bir dize oluşturarak geçersiz bir HTML dizesi oluşturmak hala mümkün olduğundan, seçilen yanıt her zaman HTML'nin kaldırılmasını sağlamaz.

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

Bu girdi, soyma işleminin sizin için bir dizi etiketi bir araya getirmesini ve sonuçlanmasını sağlayacaktır:

  "<h1>foo</h1>"

ek olarak jquery'nin metin işlevi, etiketleri çevrelemeyen metni çıkarır.

İşte jQuery kullanan ancak bu iki duruma karşı daha sağlam olması gereken bir işlev:

var stripHTML = function(s) {
    var lastString;

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

    return s;
};

0

Bunu yapma şeklim neredeyse tek satırlık.

İşlev bir Range nesnesi oluşturur ve ardından bir DocumentFragment oluşturur Aralıkta alt içerik olarak dizeyle .

Daha sonra parçanın metnini alır, herhangi bir "görünmez" / sıfır genişlikteki karakterleri kaldırır ve öndeki / sondaki beyaz boşluktan onu kırpar.

Bu sorunun eski olduğunun farkındayım, çözümümün benzersiz olduğunu düşündüm ve paylaşmak istedim. :)

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

Diğerlerinin de belirttiği gibi, regex çalışmayacaktır. Neden html'yi regex ile ayrıştırmaya çalışmayacağınız ve denememeniz gerektiği hakkındaki makalemi okumak için bir dakikanızı ayırın , html'yi kaynak dizenizden çıkarmaya çalışırken yaptığınız şey budur.

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.