Bir dizenin html olup olmadığını kontrol edin

Html olup olmadığını kontrol etmek istediğim belirli bir dizem var. Aynı için normal ifadeyi kullanıyorum ancak doğru sonucu alamıyorum.

Normal ifademi doğruladım ve burada sorunsuz çalışıyor .

var htmlRegex = new RegExp("<([A-Za-z][A-Za-z0-9]*)\b[^>]*>(.*?)</\1>");
return htmlRegex.test(testString);

İşte keman burada ama normal ifade orada çalışmıyor. http://jsfiddle.net/wFWtc/

Makinemde kod iyi çalışıyor ancak sonuç olarak doğru yerine yanlış alıyorum. Burada ne eksik?

Bir dizenin HTML olup olmadığını kontrol etmek için kullanılacak daha iyi bir normal ifade:

/^/

Örneğin:

/^/.test('') // true
/^/.test('foo bar baz') //true
/^/.test('<p>fizz buzz</p>') //true

Aslında, o kadar iyidir ki, kendisine geçirilen her dizge trueiçin geri döner , çünkü her dizge HTML'dir . Cidden, kötü biçimlendirilmiş veya geçersiz olsa bile, hala HTML'dir.

Aradığınız şey herhangi bir metin içeriği yerine HTML öğelerinin varlığı ise, şu satırlar boyunca bir şey kullanabilirsiniz:

/<\/?[a-z][\s\S]*>/i.test()

HTML'yi hiçbir şekilde ayrıştırmanıza yardımcı olmaz, ancak dizeyi kesinlikle HTML öğeleri içeriyor olarak işaretler.

Yöntem 1 . Dizenin HTML verisi içerip içermediğini test etmek için basit işlev:

function isHTML(str) {
  var a = document.createElement('div');
  a.innerHTML = str;

  for (var c = a.childNodes, i = c.length; i--; ) {
    if (c[i].nodeType == 1) return true; 
  }

  return false;
}

Buradaki fikir, tarayıcı DOM ayrıştırıcısının sağlanan dizenin HTML gibi görünüp görünmediğine karar vermesine izin vermektir. Gördüğünüz gibi basitçe ELEMENT_NODE( nodeTypeof 1) için kontrol ediyor .

Birkaç test yaptım ve işe yarıyor gibi görünüyor:

isHTML('<a>this is a string</a>') // true
isHTML('this is a string')        // false
isHTML('this is a <b>string</b>') // true

Bu çözüm, HTML dizesini doğru bir şekilde algılar, ancak img / vide / etc gibi bir yan etkiye sahiptir. etiketler, innerHTML'de ayrıştırıldıktan sonra kaynakları indirmeye başlayacak.

Yöntem 2 . Başka bir yöntem DOMParser'ı kullanır ve kaynak yükleme yan etkilerine sahip değildir:

function isHTML(str) {
  var doc = new DOMParser().parseFromString(str, "text/html");
  return Array.from(doc.body.childNodes).some(node => node.nodeType === 1);
}

<sub>Notlar:
1. Array.fromES2015 yöntemidir, ile değiştirilebilir [].slice.call(doc.body.childNodes).
2. Aramadaki ok işlevi, somenormal anonim işlevle değiştirilebilir.</sub>

Aşağıdakilerle biraz doğrulama:

/<(?=.*? .*?\/ ?>|br|hr|input|!--|wbr)[a-z]+.*?>|<([a-z]+).*?<\/\1>/i.test(htmlStringHere) 

Bu, boş etiketleri (bazıları önceden tanımlanmış) arar ve /XHTML boş etiketlerini sonlandırır ve boş etiket nedeniyle HTML olarak doğrular VEYA etiket adını yakalar ve HTML olarak doğrulamak için dizede bir yerde kapanış etiketini bulmaya çalışır.

Açıklanan demo: http://regex101.com/r/cX0eP2

Güncelleme:

Doğrulamayı şu şekilde tamamlayın:

/<(br|basefont|hr|input|source|frame|param|area|meta|!--|col|link|option|base|img|wbr|!DOCTYPE).*?>|<(a|abbr|acronym|address|applet|article|aside|audio|b|bdi|bdo|big|blockquote|body|button|canvas|caption|center|cite|code|colgroup|command|datalist|dd|del|details|dfn|dialog|dir|div|dl|dt|em|embed|fieldset|figcaption|figure|font|footer|form|frameset|head|header|hgroup|h1|h2|h3|h4|h5|h6|html|i|iframe|ins|kbd|keygen|label|legend|li|map|mark|menu|meter|nav|noframes|noscript|object|ol|optgroup|output|p|pre|progress|q|rp|rt|ruby|s|samp|script|section|select|small|span|strike|strong|style|sub|summary|sup|table|tbody|td|textarea|tfoot|th|thead|time|title|tr|track|tt|u|ul|var|video).*?<\/\2>/i.test(htmlStringHere) 

Bu, TÜM HTML etiketlerini içerdiğinden , önce boş olanlar, ardından kapanış etiketi gerektiren geri kalanlar içerdiğinden doğru doğrulama yapar .

Demo burada açıklanmıştır: http://regex101.com/r/pE1mT5

zzzzBov'un yukarıdaki yanıtı iyidir, ancak örneğin, başıboş kapanış etiketlerini hesaba katmaz:

/<[a-z][\s\S]*>/i.test('foo </b> bar'); // false

Kapanış etiketlerini de yakalayan bir sürüm şu olabilir:

/<[a-z/][\s\S]*>/i.test('foo </b> bar'); // true

İşte zaman zaman kullandığım özensiz bir tek satırlık:

var isHTML = RegExp.prototype.test.bind(/(<([^>]+)>)/i);

Temelde true, <ardından gelen ve ANYTHINGardından gelen dizeler için dönecektir >.

By ANYTHING, boş bir dize dışında temelde hiçbir şey ifade.

Harika değil, ama tek satırlık.

Kullanım

isHTML('Testing');               // false
isHTML('<p>Testing</p>');        // true
isHTML('<img src="hello.jpg">'); // true
isHTML('My < weird > string');   // true (caution!!!)
isHTML('<>');                    // false

Gördüğünüz gibi mükemmel olmaktan uzak, ancak bazı durumlarda işi sizin için yapabilir.

Buradaki tüm cevaplar fazlasıyla kapsayıcıdır, sadece <ardından ararlar >. Bir dizenin HTML olup olmadığını belirlemenin mükemmel bir yolu yoktur, ancak daha iyisini yapabilirsiniz.

Aşağıda son etiketleri arıyoruz ve çok daha sıkı ve daha doğru olacaktır:

import re
re_is_html = re.compile(r"(?:</[^<]+>)|(?:<[^<]+/>)")

Ve işte eylemde:

# Correctly identified as not HTML:
print re_is_html.search("Hello, World")
print re_is_html.search("This is less than <, this is greater than >.")
print re_is_html.search(" a < 3 && b > 3")
print re_is_html.search("<<Important Text>>")
print re_is_html.search("<a>")

# Correctly identified as HTML
print re_is_html.search("<a>Foo</a>")
print re_is_html.search("<input type='submit' value='Ok' />")
print re_is_html.search("<br/>")

# We don't handle, but could with more tweaking:
print re_is_html.search("<br>")
print re_is_html.search("Foo &amp; bar")
print re_is_html.search("<input type='submit' value='Ok'>")

Bir dize değişmezinden bir normal ifade oluşturuyorsanız, herhangi bir ters eğik çizgiden kaçınmanız gerekir:

var htmlRegex = new RegExp("<([A-Za-z][A-Za-z0-9]*)\\b[^>]*>(.*?)</\\1>");
// extra backslash added here ---------------------^ and here -----^

Bir normal ifade kullanırsanız bu gerekli değildir, ancak daha sonra eğik çizgilerden kaçmanız gerekir:

var htmlRegex = /<([A-Za-z][A-Za-z0-9]*)\b[^>]*>(.*?)<\/\1>/;
// forward slash escaped here ------------------------^

Ayrıca jsfiddle'ınız çalışmadı çünkü onloadbaşka bir işleyicinin içine bir onloadişleyici atadınız - soldaki Çerçeveler ve Uzantılar panelinde ayarlandığı gibi varsayılan , JS'yi bir onload. Bunu bir nowrap seçeneği olarak değiştirin ve dizge kaçışını düzeltin ve "çalışır" (herkesin yorumlarda belirttiği kısıtlamalar dahilinde): http://jsfiddle.net/wFWtc/4/

Bildiğim kadarıyla JavaScript normal ifadelerinin geriye dönük referansları yoktur. Yani ifadenizin bu kısmı:

</\1>

JS'de çalışmaz (ancak diğer bazı dillerde çalışır).

/<\/?[^>]*>/.test(str) Yalnızca html etiketleri içerip içermediğini tespit edin, bir xml olabilir

JQuery ile:

function isHTML(str) {
  return /^<.*?>$/.test(str) && !!$(str)[0];
}

Bu durumda jQuery kullanıldığında en basit biçim şu olur:

if ($(testString).length > 0)

Eğer $(testString).length = 1, bu, içinde bir HTML etiketi olduğu anlamına gelir textStging.

Metni ayrıştırmak için tarayıcının kendisini kullanmayı, herhangi bir DOM düğümünün inşa edilip edilmediğini belirlemeyi içeren, bu da ... yavaş olacak süslü çözümler var. Veya daha hızlı olacak, ancak… potansiyel olarak yanlış olan normal ifadeler. Ayrıca bu sorundan kaynaklanan iki çok farklı soru vardır:

S1: Bir dizge HTML parçaları içeriyor mu?

Dize , HTML öğesi biçimlendirmesi veya kodlanmış varlıklar içeren bir HTML belgesinin parçası mı ? Bu, dizinin ağartma / temizleme veya varlık kod çözme gerektirebileceğinin bir göstergesi olarak kullanılabilir:

/</?[a-z][^>]*>|(\&(?:[\w\d]+|#\d+|#x[a-f\d]+);/

Görebilirsiniz kullanımda bu deseni bu yazının yazıldığı anda mevcut tüm cevaplar örneklerle tüm karşı, artı bazı ... oldukça çirkin WYSIWYG- veya Word tarafından oluşturulan örnek metin ve karakter varlık referansları çeşitli.

S2: Dize bir HTML belgesi mi?

HTML spesifikasyonu şok edici bir HTML belgesi gördüğü ne olduğu gevşek olduğu . Tarayıcılar, neredeyse her türlü çöp metnini HTML olarak ayrıştırmak için aşırı uzunluklara gider. İki yaklaşım: ya sadece HTML'yi göz önünde bulundurun (çünkü bir text/htmlİçerik Türü ile teslim edilirse , kullanıcı aracısı tarafından HTML olarak yorumlanmaya çalışmak için büyük çaba harcanacaktır ) ya da önek işaretini arayın:

<!DOCTYPE html>

"İyi biçimlilik" açısından, bu ve neredeyse hiçbir şey "gerekli" değildir. Aşağıda, atlandığını düşündüğünüz her HTML öğesini içeren % 100 eksiksiz, tamamen geçerli bir HTML belgesi verilmiştir :

<!DOCTYPE html>
<title>Yes, really.</title>
<p>This is everything you need.

Evet. Orada gibi "eksik" elemanlarını oluşturmak için nasıl açık kurallar vardır <html>, <head>ve <body>. SO'nun sözdizimi vurgulamasının, açık bir ipucu olmadan bunu düzgün bir şekilde tespit edememesini oldukça eğlenceli buluyorum.

Benim çözümüm

const element = document.querySelector('.test_element');

const setHtml = elem =>{
    let getElemContent = elem.innerHTML;

    // Clean Up whitespace in the element
    // If you don't want to remove whitespace, then you can skip this line
    let newHtml = getElemContent.replace(/[\n\t ]+/g, " ");

    //RegEX to check HTML
    let checkHtml = /<([A-Za-z][A-Za-z0-9]*)\b[^>]*>(.*?)<\/\1>/.test(getElemContent);

    //Check it is html or not
    if (checkHtml){
        console.log('This is an HTML');
        console.log(newHtml.trim());
    }
    else{
        console.log('This is a TEXT');
        console.log(elem.innerText.trim());
    }
}

setHtml(element);

Bu https://github.com/sindresorhus/is-html'yi çözmeye çalışabilecek bir NPM paketi is-html var