Проверьте, является ли строка html или нет

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

Я подтверждено мое регулярное выражение , и он прекрасно работает здесь .

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

Вот скрипка, но регулярное выражение там не работает. http://jsfiddle.net/wFWtc/

На моей машине код работает нормально, но в результате я получаю ложь вместо истины. Чего здесь не хватает?

Лучшее регулярное выражение для проверки того, является ли строка 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.

Способ №1 . Вот простая функция для проверки, содержит ли строка данные 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.

Способ №2 . Другой метод использует 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для строк, содержащих a, <за которым 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.