JavaScript中DOMParser验证含<、>字符的HTML时误判无效的解决方法

问题原因 #

你当前使用application/xml类型的DOMParser解析HTML，XML语法要求文本中的<、>必须转义为<、>。当HTML内容里直接出现未转义的<、>作为数学符号时，XML解析器会将其误判为标签语法的一部分，触发解析错误，导致合法HTML被判定为无效。

解决方案 #

将DOMParser的解析类型改为text/html，HTML解析器会遵循HTML规则处理内容：文本中的<、>会被当作普通文本识别，不会触发解析错误；同时仍能检测HTML标签的语法问题（如未闭合标签、错误结构等）。

修正后的代码示例 #

function validateHTML(myHTML) {
  const parser = new DOMParser();
  // 使用text/html模式解析HTML内容
  const doc = parser.parseFromString(myHTML, 'text/html');
  
  // 检查浏览器生成的parsererror节点（部分浏览器支持，用于捕获语法错误）
  const errorNode = doc.querySelector('parsererror');
  if (errorNode) {
    return 'HTML is not valid';
  }

  // 可选：检测自定义/错误标签名（比如<divv>这类拼写错误的标签）
  // 定义合法HTML标签集合（可按需扩展）
  const validTags = new Set([
    'div', 'p', 'span', 'h1', 'h2', 'h3', 'a', 'img', 'ul', 'ol', 'li'
  ]);
  const allElements = doc.body.querySelectorAll('*');
  for (const elem of allElements) {
    const tagName = elem.tagName.toLowerCase();
    if (!validTags.has(tagName)) {
      return `HTML is not valid (invalid tag: <${tagName}>)`;
    }
  }

  return 'HTML is valid';
}

说明 #

1. text/html模式下，HTML解析器会自动兼容文本中的<、>符号，不会将其误判为标签语法。
2. parsererror节点是部分浏览器（如Chrome）在解析HTML语法错误时生成的节点，可用于捕获未闭合标签、嵌套错误等问题。
3. 若需要检测标签名拼写错误（如<divv>），可以维护一个合法HTML标签集合，遍历解析后的元素进行校验。

内容的提问来源于stack exchange，提问作者splunk