如何校验HTML字符串：仅含合法标签、顶层无游离非空白内容

问题原因 #

你原有DOMParser代码不生效的核心原因是DOMParser容错性极强，仅出现严重语法错误（比如标签完全不闭合、语法结构完全不合法）时才会生成parsererror节点。游离文本、自定义标签都属于可正常解析的合法内容，不会触发解析错误。

另外不建议用正则做HTML校验，HTML不属于正则语言，嵌套标签、属性、特殊转义场景都会导致正则匹配失效，基于DOM解析的方案可靠性更高。

实现代码 #

// 判断标签是否为标准HTML标签
function isStandardHTMLElement(tagName) {
  const ele = document.createElement(tagName);
  // 自定义标签实例类型为HTMLUnknownElement
  return !(ele instanceof HTMLUnknownElement);
}

function isValidHTML(html) {
  const parser = new DOMParser();
  const doc = parser.parseFromString(html, "text/html");

  // 基础语法错误判断
  if (doc.querySelector("parsererror")) {
    return false;
  }

  // 规则1：校验顶层无游离非空白文本
  const topChildNodes = doc.body.childNodes;
  for (const node of topChildNodes) {
    if (node.nodeType === Node.TEXT_NODE) {
      if (node.textContent.trim().length > 0) {
        return false;
      }
    }
    // 如果需要禁止顶层注释可放开以下逻辑
    // if (node.nodeType === Node.COMMENT_NODE) {
    //   return false;
    // }
  }

  // 规则2：校验所有使用的标签都是标准HTML标签
  const allElements = doc.getElementsByTagName('*');
  for (const ele of allElements) {
    // 过滤DOMParser自动生成的html/head/body外层标签
    if (['HTML', 'HEAD', 'BODY'].includes(ele.tagName)) continue;
    if (!isStandardHTMLElement(ele.tagName)) {
      return false;
    }
  }

  return true;
}

测试用例 #

console.log(isValidHTML("<div>abc</div><div>xyz</div>")) // 输出 true
console.log(isValidHTML("<div>abc</div> 123 <div>xyz</div>")) // 输出 false
console.log(isValidHTML("<x></x>")) // 输出 false
console.log(isValidHTML("<span>test</span><p>ss</p>")) // 输出 true
console.log(isValidHTML("<br/><img src='test.png'/>")) // 输出 true

注意事项 #

如果需要支持SVG等特殊命名空间标签，可单独调整isStandardHTMLElement的判断逻辑，当前方法仅适配原生HTML标签判断。

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