Проверьте, действительно ли HTML-фрагмент действителен с помощью Javascript

Ответ 1

Обновить: этот ответ ограничен - см. приведенное ниже изменение.

Расширяясь в ответе @kolink, я использую:

var checkHTML = function(html) {
  var doc = document.createElement('div');
  doc.innerHTML = html;
  return ( doc.innerHTML === html );
}

I.e., мы создаем временный div с HTML. Для этого браузер создаст дерево DOM на основе строки HTML, которая может включать закрывающие теги и т.д.

Сравнение содержимого div-HTML с исходным HTML-сообщением скажет нам, нужно ли браузеру что-то менять.

checkHTML('<a>hell<b>o</b>')

Возвращает false.

checkHTML('<a>hell<b>o</b></a>')

Возвращает true.

Изменить: Как отмечает @Quentin ниже, это чрезмерно строгое по разным причинам: браузеры часто исправляют пропущенные закрывающие теги, даже если закрывающие теги являются необязательными для это тег. Например:

<p>one para
<p>second para

... считается действительным (поскольку Ps разрешено пропускать закрывающие теги), но checkHTML вернет false. Браузеры также нормализуют случаи тегов и изменяют пробелы. Вы должны знать об этих ограничениях при принятии решения об использовании этого подхода.

Ответ 2

Ну, этот код:

function tidy(html) {
    var d = document.createElement('div');
    d.innerHTML = html;
    return d.innerHTML;
}

Это приведет к "исправлению" искаженного HTML в лучшую сторону возможностей браузера. Если это полезно для вас, это намного проще, чем пытаться проверить HTML.

Ответ 3

Я думаю, что эта проверка более строгая, чем действительность HTML - она ​​проверяет, что строка HTML эквивалентна нормализованному представлению браузера. Осмотрите следующие примеры:

checkHTML('<a>hell<B>o</B></a>') -> false

checkHTML('<a href="test.html">hell<b>o</b></a>') -> true
checkHTML('<a href=test.html>hell<b>o</b></a>') -> false
checkHTML("<a href='test.html'>hell<b>o</b></a>") -> false

checkHTML('<ul><li>hell</li><li>hell</li></ul>') -> true
checkHTML('<ul><li>hell<li>hell</ul>') -> false

Ответ 4

function validHTML(html) {
  var openingTags, closingTags;

  html        = html.replace(/<[^>]*\/\s?>/g, '');      // Remove all self closing tags
  html        = html.replace(/<(br|hr|img).*?>/g, '');  // Remove all <br>, <hr>, and <img> tags
  openingTags = html.match(/<[^\/].*?>/g) || [];        // Get remaining opening tags
  closingTags = html.match(/<\/.+?>/g) || [];           // Get remaining closing tags

  return openingTags.length === closingTags.length ? true : false;
}

var htmlContent = "<p>your html content goes here</p>" // Note: String without any html tag will consider as valid html snippet. If it’s not valid in your case, in that case you can check opening tag count first.

if(validHTML(htmlContent)) {
  alert('Valid HTML')
}
else {
  alert('Invalid HTML');
}

Ответ 5

Используя чистый JavaScript, вы можете проверить, существует ли элемент, используя следующую функцию:

if (typeof(element) != 'undefined' && element != null)

Используя следующий код, мы можем проверить это в действии:

HTML:

<input type="button" value="Toggle .not-undefined" onclick="toggleNotUndefined()">
<input type="button" value="Check if .not-undefined exists" onclick="checkNotUndefined()">
<p class=".not-undefined"></p>

CSS

p:after {
    content: "Is 'undefined'";
    color: blue;
}
p.not-undefined:after {
    content: "Is not 'undefined'";
    color: red;
}

JavaScript:

function checkNotUndefined(){
    var phrase = "not ";
    var element = document.querySelector('.not-undefined');
    if (typeof(element) != 'undefined' && element != null) phrase = "";
    alert("Element of class '.not-undefined' does "+phrase+"exist!");
    // $(".thisClass").length checks to see if our elem exists in jQuery
}

function toggleNotUndefined(){
    document.querySelector('p').classList.toggle('not-undefined');
}

Его можно найти на JSFiddle.

Ответ 6

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

Удачи!