JavaScript校验WYSIWYG编辑器HTML表格嵌套的实现方法

核心思路是放弃正则匹配HTML字符串的方案（正则无法可靠处理嵌套标签的层级关系，容易出现误判漏判），直接将HTML字符串解析为DOM树后遍历节点检查层级关系，稳定性更高。

实现步骤 #

• 将待校验的HTML字符串通过DOMParser解析为独立文档，避免插入当前页面引发XSS、资源误加载等问题
• 获取文档中所有顶层table元素
• 逐个检查每个顶层table的后代节点，若后代中存在table元素，即可判定为非法嵌套

完整实现代码 #

/**
 * 检测HTML片段中是否存在嵌套表格
 * @param {string} htmlContent 待检测的HTML字符串
 * @returns {boolean} 存在嵌套表格返回true，无嵌套返回false
 */
function checkNestedTable(htmlContent) {
  // 初始化DOM解析器
  const domParser = new DOMParser();
  // 将HTML字符串解析为独立DOM文档
  const parsedDoc = domParser.parseFromString(htmlContent, 'text/html');
  // 拿到所有表格节点
  const allTables = parsedDoc.querySelectorAll('table');

  for (const table of allTables) {
    // :scope 限定查询范围为当前表格内部，查找所有后代表格
    const nestedTableList = table.querySelectorAll(':scope table');
    if (nestedTableList.length > 0) {
      // 若需要定位嵌套位置、做自动修复，可直接操作nestedTableList里的节点
      return true;
    }
  }
  return false;
}

// 异常结构测试
const invalidHtml = `<table width="100%">
<tbody>
    <tr>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td>
        <table width="100%">
            <tbody>
                <tr>
                    <td></td>
                    <td></td>
                </tr>
            </tbody>
        </table>
        </td>
    </tr>
</tbody>
</table>`;

// 执行检测
console.log(checkNestedTable(invalidHtml)); // 输出 true，成功识别嵌套表格

关键说明 #

• 禁止用正则处理HTML嵌套校验：HTML的标签嵌套、属性值、注释等场景非常灵活，正则无法覆盖所有边界情况，比如属性值中包含table字符串、注释中写了table标签、多层深度嵌套等场景都会导致正则判断失效
• :scope伪类用于将选择器的查询起点限定在当前table节点上，避免将平级的其他顶层table误判为当前节点的子元素，所有现代浏览器均支持该属性
• 如果需要做自动修复，检测到嵌套表格后，可以把嵌套的table节点从单元格中提取出来，插入到外层表格的相邻位置，再清空单元格内的残留内容即可
• 使用DOMParser解析HTML比直接给元素innerHTML赋值更安全，解析过程不会自动执行内联脚本、加载外部图片/资源，能有效降低校验过程中的XSS风险

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