Periksa apakah sebuah string adalah html atau bukan

Saya memiliki string tertentu yang ingin saya periksa apakah itu html atau bukan. Saya menggunakan regex untuk hal yang sama tetapi tidak mendapatkan hasil yang sesuai.

Saya memvalidasi regex saya dan berfungsi dengan baik di sini .

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

Ini biola tetapi regex tidak berjalan di sana. http://jsfiddle.net/wFWtc/

Di mesin saya, kodenya berjalan dengan baik tetapi saya mendapatkan kesalahan alih-alih benar sebagai hasilnya. Apa yang hilang di sini?

Regex yang lebih baik untuk digunakan untuk memeriksa apakah suatu string adalah HTML adalah:

/^/

Sebagai contoh:

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

Faktanya, ini sangat bagus, sehingga akan kembali trueuntuk setiap string yang diteruskan ke sana, karena setiap string adalah HTML . Serius, meskipun formatnya buruk atau tidak valid, itu masih HTML.

Jika yang Anda cari adalah keberadaan elemen HTML, bukan hanya konten teks apa pun, Anda dapat menggunakan sesuatu di sepanjang baris:

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

Ini tidak akan membantu Anda mengurai HTML dengan cara apa pun, tetapi pasti akan menandai string sebagai mengandung elemen HTML.

Metode # 1 . Berikut adalah fungsi sederhana untuk menguji apakah string berisi data HTML:

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

Idenya adalah mengizinkan pengurai DOM browser untuk memutuskan apakah string yang diberikan terlihat seperti HTML atau tidak. Seperti yang Anda lihat, ini hanya memeriksa ELEMENT_NODE( nodeTypedari 1).

Saya membuat beberapa tes dan sepertinya berhasil:

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

Solusi ini akan mendeteksi string HTML dengan baik, namun memiliki efek samping seperti img / vide / etc. tag akan mulai mengunduh sumber daya setelah diurai dalam innerHTML.

Metode # 2 . Metode lain menggunakan DOMParser dan tidak memiliki efek samping pemuatan sumber daya:

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

<sub>Catatan:
1. Array.fromadalah metode ES2015, dapat diganti dengan [].slice.call(doc.body.childNodes).
2. Fungsi panah dalam somepanggilan dapat diganti dengan fungsi anonim biasa.</sub>

Sedikit validasi dengan:

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

Ini mencari tag kosong (beberapa sudah ditentukan sebelumnya) dan / menghentikan tag kosong XHTML dan memvalidasi sebagai HTML karena tag kosong ATAU akan menangkap nama tag dan mencoba menemukan tag penutupnya di suatu tempat dalam string untuk divalidasi sebagai HTML.

Demo yang dijelaskan: http://regex101.com/r/cX0eP2

Memperbarui:

Lengkapi validasi dengan:

/<(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) 

Ini melakukan validasi yang tepat karena berisi ALL tag HTML, yang kosong terlebih dahulu diikuti oleh sisanya yang memerlukan tag penutup.

Demo dijelaskan di sini: http://regex101.com/r/pE1mT5

Jawaban zzzzBov di atas bagus, tetapi tidak memperhitungkan tag penutup yang tersesat, seperti misalnya:

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

Versi yang juga menangkap tag penutup bisa jadi ini:

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

Ini satu baris ceroboh yang saya gunakan dari waktu ke waktu:

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

Ini pada dasarnya akan mengembalikan truestring yang berisi <diikuti oleh ANYTHINGdiikuti oleh> .

Oleh ANYTHING , maksud saya pada dasarnya apa pun kecuali string kosong.

Itu tidak bagus, tapi itu satu baris.

Pemakaian

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

Seperti yang Anda lihat, ini jauh dari sempurna, tetapi mungkin berhasil untuk Anda dalam beberapa kasus.

Semua jawaban di sini terlalu inklusif, mereka hanya mencari <diikuti oleh >. Tidak ada cara sempurna untuk mendeteksi apakah suatu string adalah HTML, tetapi Anda dapat melakukannya dengan lebih baik.

Di bawah ini kami mencari tag akhir , dan akan jauh lebih ketat dan lebih akurat:

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

Dan ini dia aksinya:

# 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'>")

Jika Anda membuat regex dari string literal, Anda perlu menghindari garis miring terbalik:

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

Ini tidak diperlukan jika Anda menggunakan literal regex, tetapi kemudian Anda perlu keluar dari garis miring:

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

Juga jsfiddle Anda tidak berfungsi karena Anda menetapkan onloadpenangan di dalam penangan lain onload- default seperti yang ditetapkan di panel Kerangka & Ekstensi di sebelah kiri adalah untuk membungkus JS dalam onload. Ubah itu menjadi opsi nowrap dan perbaiki string literal escaping dan itu "berfungsi" (dalam batasan yang ditunjukkan semua orang di komentar): http://jsfiddle.net/wFWtc/4/

Sejauh yang saya tahu, ekspresi reguler JavaScript tidak memiliki referensi balik. Jadi ini bagian dari ekspresi Anda:

</\1>

tidak akan berfungsi di JS (tetapi akan berfungsi di beberapa bahasa lain).

/<\/?[^>]*>/.test(str) Hanya mendeteksi apakah itu berisi tag html, mungkin xml

Dengan jQuery:

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

Menggunakan jQuery dalam kasus ini, bentuk paling sederhana adalah:

if ($(testString).length > 0)

Jika $(testString).length = 1, ini berarti ada satu tag HTML di dalamnya textStging.

Ada solusi mewah yang melibatkan penggunaan browser itu sendiri untuk mencoba mengurai teks, mengidentifikasi jika ada node DOM yang dibuat, yang akan… lambat. Atau ekspresi reguler yang akan lebih cepat, tetapi… berpotensi tidak akurat. Ada juga dua pertanyaan yang sangat berbeda yang muncul dari masalah ini:

T1: Apakah string berisi fragmen HTML?

Apakah string bagian dari dokumen HTML, berisi markup elemen HTML atau entitas yang dikodekan? Ini dapat digunakan sebagai indikator bahwa string mungkin memerlukan pemutihan / sanitasi atau dekode entitas:

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

Anda dapat melihat pola ini digunakan terhadap semua contoh dari semua jawaban yang ada pada saat penulisan ini, ditambah beberapa… contoh teks yang dihasilkan WYSIWYG atau Word yang agak mengerikan dan berbagai referensi entitas karakter.

Q2: Apakah string merupakan dokumen HTML?

The spesifikasi HTML mengejutkan longgar untuk apa yang dianggap sebuah dokumen HTML . Peramban berusaha sangat keras untuk mengurai hampir semua teks sampah sebagai HTML. Dua pendekatan: pertimbangkan semua HTML (karena jika dikirimkan dengan text/htmlJenis Konten, upaya besar akan dilakukan untuk mencoba menafsirkannya sebagai HTML oleh agen pengguna) atau mencari penanda awalan:

<!DOCTYPE html>

Dalam istilah "pembentukan yang baik", itu, dan hampir tidak ada hal lain yang "diperlukan". Berikut ini adalah 100% lengkap, dokumen HTML valid penuh yang berisi setiap elemen HTML yang menurut Anda sedang dihilangkan:

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

Ya. Ada aturan eksplisit tentang bagaimana membentuk "hilang" unsur-unsur seperti <html>, <head>, dan <body>. Meskipun saya merasa agak lucu bahwa penyorotan sintaks SO gagal mendeteksi itu dengan benar tanpa petunjuk eksplisit.

Solusi saya adalah

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

Ada paket NPM is-html yang dapat mencoba menyelesaikan https://github.com/sindresorhus/is-html ini