检查HTML代码段是否对JavaScript有效

Question

我需要一个可靠的JavaScript库/函数来检查超文本标记语言片段是否有效，我可以从我的代码中调用。例如，它应该检查打开的标签和引号是否关闭，嵌套是否正确等。

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

Answer 1

到目前为止，没有一个解决方案能很好地回答最初的问题，尤其是在涉及到

我不希望验证失败，因为有些东西不是百分之百的标准（但无论如何都会有效）。

太长，读不下去了

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

• 如果有效，逐个标记检查html字符串标记
• 尝试呈现html字符串
• 将理论上要创建的标记计数与实际渲染的html dom标记计数进行比较
• 如果选中“严格”，<代码>

退换商品

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

规范化意味着，在渲染时，浏览器有时会忽略或修复输入的特定部分（例如为<代码>

大多数时候，规范化只会返回对原始html字符串稍加修改的版本，但有时结果会大相径庭。因此，在将用户输入保存到db或盲目渲染之前，应使用此选项标记用户输入以供进一步审查。（有关规范化的示例，请参见JSFIDLE）

检查会考虑以下例外情况

• 忽略单引号到双引号的规范化
• 在渲染过程中，图像和其他带有src属性的标记将被“解除防护”
• （如果不严格）忽略<代码>

.

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

在这里，您可以在JSFiddlehttps://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

.

Answer 2

好吧，这段代码：

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

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

Answer 3

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

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

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

也就是说，我们使用超文本标记语言创建一个临时div。为了做到这一点，浏览器将根据超文本标记语言字符串创建一个DOM树，这可能涉及关闭标签等。

将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。浏览器还将规范化标记大小写，并更改空白。在决定使用此方法时，您应该了解这些限制。