更新：这个答案是有限的 - 请参阅下面的编辑。

扩展@kolink 的回答，我使用：

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

即，我们用 HTML 创建一个临时 div。为此，浏览器将根据 HTML 字符串创建一个 DOM 树，这可能涉及结束标记等。

将 div 的 HTML 内容与原始 HTML 进行比较将告诉我们浏览器是否需要更改任何内容。

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

返回假。

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

返回真。

编辑：正如下面@Quentin 所指出的，由于各种原因，这过于严格：浏览器通常会修复省略的结束标签，即使结束标签对该标签是可选的。例如：

<p>one para
<p>second para

...被认为是有效的（因为允许 P 省略结束标记）但checkHTML会返回 false。浏览器还将规范化标签大小写，并改变空白。在决定使用此方法时，您应该了解这些限制。

嗯，这段代码：

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

这将尽浏览器的最大能力“纠正”格式错误的 HTML。如果这对您有帮助，那么它比尝试验证 HTML 容易得多。

到目前为止提出的解决方案都没有很好地回答原始问题，尤其是在涉及

我不希望验证失败，因为某些东西不是 100% 标准的（但无论如何都可以）。

tldr >> 检查JSFiddle

所以我使用了关于这个主题的答案和评论的输入，并创建了一个执行以下操作的方法：

• 如果有效，则逐个标签检查 html 字符串
• 尝试呈现 html 字符串
• 将理论上创建的标签计数与实际呈现的 html dom 标签计数进行比较
• 如果选中“严格”，则不会忽略<br/>空属性规范化=""
• 将渲染的 innerHTML 与给定的 html 字符串进行比较（同时忽略空格和引号）

退货

• 如果呈现的 html 与给定的 html 字符串相同，则为true
• 如果其中一项检查失败，则为false
• 如果呈现的 html 看起来有效但不等于给定的 html 字符串，则归一化html 字符串

规范化意味着，在渲染时，浏览器有时会忽略或修复输入的特定部分（例如为<p>其他部分添加丢失的结束标记并转换其他部分（例如单引号到双引号或与号的编码）。区分“失败”和“规范化”允许向用户标记内容为“这不会像您期望的那样呈现”。

大多数情况下，归一化返回原始 html 字符串的仅略有更改的版本 - 尽管如此，有时结果却大不相同。因此，这应该用于例如标记用户输入以供进一步审查，然后再将其保存到数据库或盲目渲染。（有关规范化的示例，请参阅JSFiddle）

检查考虑了以下例外情况

• 忽略单引号到双引号的规范化
• image和其他具有src属性的标签在渲染期间被“解除武装”
• （如果不严格）忽略<br/>>><br>转换
• （如果不严格）忽略空属性的规范化（<p disabled>>> <p disabled="">）
• 读取时对最初未编码的＆符号进行编码.innerHTML，例如在属性值中

.

function simpleValidateHtmlStr(htmlStr, strictBoolean) {
  if (typeof htmlStr !== "string")
    return false;

  var validateHtmlTag = new RegExp("<[a-z]+(\s+|\"[^\"]*\"\s?|'[^']*'\s?|[^'\">])*>", "igm"),
    sdom = document.createElement('div'),
    noSrcNoAmpHtmlStr = htmlStr
      .replace(/ src=/, " svhs___src=") // disarm src attributes
      .replace(/&amp;/igm, "#svhs#amp##"), // 'save' encoded ampersands
    noSrcNoAmpIgnoreScriptContentHtmlStr = noSrcNoAmpHtmlStr
      .replace(/\n\r?/igm, "#svhs#nl##") // temporarily remove line breaks
      .replace(/(<script[^>]*>)(.*?)(<\/script>)/igm, "$1$3") // ignore script contents
      .replace(/#svhs#nl##/igm, "\n\r"),  // re-add line breaks
    htmlTags = noSrcNoAmpIgnoreScriptContentHtmlStr.match(/<[a-z]+[^>]*>/igm), // get all start-tags
    htmlTagsCount = htmlTags ? htmlTags.length : 0,
    tagsAreValid, resHtmlStr;


  if(!strictBoolean){
    // ignore <br/> conversions
    noSrcNoAmpHtmlStr = noSrcNoAmpHtmlStr.replace(/<br\s*\/>/, "<br>")
  }

  if (htmlTagsCount) {
    tagsAreValid = htmlTags.reduce(function(isValid, tagStr) {
      return isValid && tagStr.match(validateHtmlTag);
    }, true);

    if (!tagsAreValid) {
      return false;
    }
  }


  try {
    sdom.innerHTML = noSrcNoAmpHtmlStr;
  } catch (err) {
    return false;
  }

  // compare rendered tag-count with expected tag-count
  if (sdom.querySelectorAll("*").length !== htmlTagsCount) {
    return false;
  }

  resHtmlStr = sdom.innerHTML.replace(/&amp;/igm, "&"); // undo '&' encoding

  if(!strictBoolean){
    // ignore empty attribute normalizations
    resHtmlStr = resHtmlStr.replace(/=""/, "")
  }

  // compare html strings while ignoring case, quote-changes, trailing spaces
  var
    simpleIn = noSrcNoAmpHtmlStr.replace(/["']/igm, "").replace(/\s+/igm, " ").toLowerCase().trim(),
    simpleOut = resHtmlStr.replace(/["']/igm, "").replace(/\s+/igm, " ").toLowerCase().trim();
  if (simpleIn === simpleOut)
    return true;

  return resHtmlStr.replace(/ svhs___src=/igm, " src=").replace(/#svhs#amp##/, "&amp;");
}

在这里，您可以在 JSFiddle https://jsfiddle.net/abernh/twgj8bev/ 中找到它，以及不同的测试用例，包括

"<a href='blue.html id='green'>missing attribute quotes</a>" // FAIL
"<a>hell<B>o</B></a>"                                        // PASS
'<a href="test.html">hell<b>o</b></a>'                       // PASS
'<a href=test.html>hell<b>o</b></a>',                        // PASS
"<a href='test.html'>hell<b>o</b></a>",                      // PASS
'<ul><li>hell</li><li>hell</li></ul>',                       // PASS
'<ul><li>hell<li>hell</ul>',                                 // PASS
'<div ng-if="true && valid">ampersands in attributes</div>'  // PASS

.

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

9 年后，如何使用DOMParser？

它接受字符串作为参数并返回文档类型，就像 HTML 一样。因此，当它出现错误时，返回的文档对象中包含<parsererror>元素。

如果您将 html 解析为 xml，至少您可以检查您的 html 是否符合 xhtml。

例子

> const parser = new DOMParser();
> const doc = parser.parseFromString('<div>Input: <input /></div>', 'text/xml');
> (doc.documentElement.querySelector('parsererror') || {}).innerText; // undefined

把它包装成一个函数

function isValidHTML(html) {
  const parser = new DOMParser();
  const doc = parser.parseFromString(html, 'text/xml');
  if (doc.documentElement.querySelector('parsererror')) {
    return doc.documentElement.querySelector('parsererror').innerText;
  } else {
    return true;
  }
}

测试上述功能

isValidHTML('<a>hell<B>o</B></a>') // true
isValidHTML('<a href="test.html">hell</a>') // true
isValidHTML('<a href='test.html'>hell</a>') // true
isValidHTML("<a href=test.html>hell</a>")  // This page contains the following err..
isValidHTML('<ul><li>a</li><li>b</li></ul>') // true
isValidHTML('<ul><li>a<li>b</ul>') // This page contains the following err..
isValidHTML('<div><input /></div>' // true
isValidHTML('<div><input></div>' // This page contains the following err..

以上适用于非常简单的html。但是，如果您的 html 有一些类似代码的文本；<script>, <style>, 等，尽管它是有效的 HTML，但您只需要为 XML 验证进行操作

以下将类似代码的 html 更新为有效的 XML 语法。

export function getHtmlError(html) {
  const parser = new DOMParser();
  const htmlForParser = `<xml>${html}</xml>`
    .replace(/(src|href)=".*?&.*?"/g, '$1="OMITTED"')
    .replace(/<script[\s\S]+?<\/script>/gm, '<script>OMITTED</script>')
    .replace(/<style[\s\S]+?<\/style>/gm, '<style>OMITTED</style>')
    .replace(/<pre[\s\S]+?<\/pre>/gm, '<pre>OMITTED</pre>')
    .replace(/&nbsp;/g, '&#160;');

  const doc = parser.parseFromString(htmlForParser, 'text/xml');
  if (doc.documentElement.querySelector('parsererror')) {
    console.error(htmlForParser.split(/\n/).map( (el, ndx) => `${ndx+1}: ${el}`).join('\n'));
    return doc.documentElement.querySelector('parsererror');
  }
}