正则拆分HTML字符串为元素数组时多语言特殊字符匹配失效问题

靠枚举字符写正则拆分HTML的思路从根上就行不通，别在补全字符集上浪费时间。

优先选原生DOM解析方案（100%兼容无bug） #

所有支持HTML的运行环境基本都自带标准HTML解析能力，根本不需要自己写正则猜结构。浏览器环境可直接用DOMParser遍历节点拆分，Node.js环境可借助jsdom等库实现相同逻辑，代码如下：

function splitHtmlToTokens(html) {
  const doc = new DOMParser().parseFromString(html, 'text/html');
  const res = [];
  const voidTags = new Set(['br','hr','img','input','meta','link','area','base','col','embed','source','track','wbr']);
  
  const walk = (node) => {
    if (node.nodeType === Node.ELEMENT_NODE) {
      // 拼接开始标签及所有属性
      const attrStr = Array.from(node.attributes)
        .map(attr => `${attr.name}="${attr.value}"`)
        .join(' ');
      res.push(`<${node.tagName.toLowerCase()}${attrStr ? ' ' + attrStr : ''}>`);
      // 递归遍历所有子节点
      node.childNodes.forEach(walk);
      // 自闭合标签不需要追加闭合标签，可根据业务调整标签名单
      if (!voidTags.has(node.tagName.toLowerCase())) {
        res.push(`</${node.tagName.toLowerCase()}>`);
      }
    } else if (node.nodeType === Node.TEXT_NODE && node.textContent) {
      res.push(node.textContent);
    }
  };

  doc.body.childNodes.forEach(walk);
  return res;
}

这个方案不存在任何字符兼容问题：

• 自动识别所有语言文本，不管是法语、德语、中文、emoji、特殊标点都能正确捕获，不需要手动枚举字符
• 完美支持任意合法HTML结构，sup/sub、多层嵌套标签、带复杂属性的标签都能按结构正确拆分
• 不会出现正则匹配时把属性内特殊字符、注释内容误判为标签边界的问题

极简场景的正则临时方案 #

如果你的业务场景非常简单，没有HTML注释、标签属性内不会出现>字符，也不想引入DOM解析能力，可以直接调整正则逻辑实现拆分。你之前写正则的问题出在思路反了：主动枚举文本允许的字符永远补不全，实际上HTML标签的边界非常明确——<开头到最近的>结束的内容就是标签，其余所有内容全是文本，根本不需要关心文本包含什么字符。
正则代码如下：

const tokenRegex = /<[^>]+>|[^<]+/g;
// 调用方式，filter用于过滤匹配过程中可能产生的空字符串
const tokens = htmlStr.match(tokenRegex).filter(Boolean);

注意：这个正则有天生缺陷，遇到<!-- 注释内容带> -->、<div title="a>b">test</div>这类场景会匹配错位，只适合处理完全可控的简单HTML片段，生产环境优先使用上面的原生解析方案。

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