Перевірте, чи є рядок html чи ні

У мене є певний рядок, для якого я хочу перевірити, це html чи ні. Я використовую регулярний вираз для того самого, але не отримую належного результату.

Я підтверджено моє регулярний вираз , і він прекрасно працює тут .

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

Ось скрипка, але регулярний вираз там не працює. http://jsfiddle.net/wFWtc/

На моїй машині код працює нормально, але в результаті я отримую false, а не true. Чого тут не вистачає?

Кращим регулярним виразом для перевірки, чи є рядок HTML:

/^/

Наприклад:

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

Насправді, це настільки добре, що він повернеться trueдля кожного переданого йому рядка, тому що кожен рядок є HTML . Серйозно, навіть якщо він погано відформатований або недійсний, це все одно HTML.

Якщо ви шукаєте наявність елементів HTML, а не просто будь-який текстовий вміст, ви можете використати щось на зразок:

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

Це ніяк не допоможе вам проаналізувати HTML, але це, безумовно, позначить рядок як такий, що містить елементи HTML.

Спосіб No1 . Ось проста функція для перевірки, чи містить рядок дані 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;
}

Ідея полягає в тому, щоб дозволити синтаксичному аналізатору браузера DOM вирішити, чи наданий рядок виглядає як HTML чи ні. Як бачите, він просто перевіряє наявність ELEMENT_NODE( nodeTypeз 1).

Я зробив пару тестів і, схоже, це працює:

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

Це рішення буде правильно виявляти рядок HTML, однак воно має побічний ефект, що img / vide / etc. теги почнуть завантажувати ресурс після аналізу у innerHTML.

Спосіб No2 . Інший метод використовує DOMParser і не має побічних ефектів завантаження ресурсів:

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

<sub>Примітки:
1. Array.fromце метод ES2015, його можна замінити на [].slice.call(doc.body.childNodes).
2. Функцію стрілки у someвиклику можна замінити звичайною анонімною функцією.</sub>

Трохи перевірки за допомогою:

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

Це шукає порожні теги (деякі заздалегідь визначені) та /завершені порожні теги XHTML і перевіряє як HTML через порожній тег АБО захоплює ім'я тегу та намагається знайти його закриває тег десь у рядку, щоб перевірити як HTML.

Пояснена демонстрація: http://regex101.com/r/cX0eP2

Оновлення:

Повна перевірка за допомогою:

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

Це робить правильну перевірку, оскільки містить ВСІ теги HTML, спочатку порожні, а потім інші, які потребують закриваючого тегу.

Пояснення демонстрації тут: http://regex101.com/r/pE1mT5

Відповідь zzzzBov вище хороша, але вона не враховує збиткові закриваючі теги, як наприклад:

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

Версія, яка також ловить закриваючі теги, може бути такою:

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

Ось недбалий однокласник, яким я час від часу користуюся:

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

В основному він повертається trueдля рядків, що містять <наступні та ANYTHINGнаступні >.

Під ANYTHING, я маю в виду в основному нічого , крім порожнього рядка.

Це не чудово, але це однокласник.

Використання

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

Як бачите, це далеко не ідеально, але в деяких випадках може зробити роботу за вас.

Всі відповіді тут надмірно широкі, вони просто шукають, <а потім і наступні >. Не існує ідеального способу визначити, чи є рядок HTML, але ви можете зробити це краще.

Нижче ми шукаємо кінцеві теги , і ми будемо набагато жорсткішими та точнішими:

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

І ось воно в дії:

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

Якщо ви створюєте регулярний вираз із рядкового літералу, вам потрібно уникнути будь-яких зворотних скісних рисок:

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

Це не потрібно, якщо ви використовуєте літерал регулярного виразу, але тоді вам потрібно уникнути похилих рисок:

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

Також ваш jsfiddle не працював, тому що ви призначили onloadобробник всередині іншого onloadобробника - за замовчуванням, встановленим на панелі Frameworks & Extensions зліва, є обгортання JS у файл onload. Змініть це на параметр nowrap і виправте рядок, що витікає, і він "працює" (в рамках обмежень, на які всі вказували в коментарях): http://jsfiddle.net/wFWtc/4/

Наскільки я знаю, регулярні вирази JavaScript не мають зворотних посилань. Отже, ця частина вашого виразу:

</\1>

не працюватиме в JS (але працюватиме на деяких інших мовах).

/<\/?[^>]*>/.test(str) Виявити лише те, чи містить він теги html, може бути xml

За допомогою jQuery:

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

Використовуючи jQuery в цьому випадку, найпростішою формою буде:

if ($(testString).length > 0)

Якщо $(testString).length = 1це означає, що всередині є один тег HTML textStging.

Існують вигадливі рішення, які передбачають використання самого браузера для спроби синтаксичного аналізу тексту, визначаючи, чи були побудовані будь-які DOM-вузли, які будуть… повільними. Або регулярні вирази, які будуть швидшими, але ... потенційно неточними. З цієї проблеми також виникають два дуже чітких питання:

Q1: Чи містить рядок фрагменти HTML?

Чи є рядок частиною документа HTML, що містить розмітку елементів HTML або закодовані сутності? Це може бути використано як індикатор того, що рядок може вимагати відбілювання / санітарії або декодування об'єкта:

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

Ви можете бачити, як цей шаблон використовується на всіх прикладах з усіх існуючих відповідей на момент написання статті, а також деяких ... досить огидних зразків тексту, створених WYSIWYG або Word, та різноманітних посилань на сутності символів.

Q2: Чи є рядок документом HTML?

Специфікація HTML вражаюче вільна щодо того, що вона вважає документом HTML . Браузери докладають максимум зусиль, щоб проаналізувати майже будь-який текст сміття як HTML. Два підходи: або просто розглянути все HTML (оскільки, якщо воно поставляється з text/htmlContent-Type, значні зусилля будуть витрачені на спробу інтерпретувати його як HTML користувальницьким агентом), або шукати маркер префікса:

<!DOCTYPE html>

З точки зору "добре сформованості", і майже нічого іншого "не вимагається". Далі подано 100% повний, повністю дійсний HTML-документ, що містить кожен елемент HTML, який, на вашу думку, пропущено:

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

Так. Є чіткі правила про те , як сформувати «відсутні» елементи , такі як <html>, <head>, і <body>. Хоча мені здається досить забавним, що підсвічування синтаксису SO не вдалося правильно це виявити без явного підказки.

Моє рішення

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

Існує пакет NPM is-html, який може спробувати вирішити це https://github.com/sindresorhus/is-html