如何将HTML字符串拆分为包含标签与单词的数组？

嘿，刚好能帮你搞定这两个HTML字符串拆分的问题！我之前做富文本处理的时候经常遇到类似需求，下面分两种情况给你详细说明：

这个需求是把字符串里的每个标签和每个独立单词都拆成数组元素，比如<span>...</span>是一个元素，"Something,"也是一个元素。

咱们可以用正则表达式来匹配两种模式：完整的HTML标签和单词（包含标点），然后通过match方法直接提取出所有匹配项。

代码示例 #

const myHTMLString = "Something, something <span @click='changeSelected(0)' id='0' class='wrong'>else</span> is foo <span @click='changeSelected(0)' id='0' class='wrong'>hello world</span> to all.";
// 正则匹配：要么是完整标签，要么是带标点的单词
const regex1 = /(<[^>]+>|[\w,.]+)/g;
const result1 = myHTMLString.match(regex1);
console.log(result1);

正则说明 #

• <[^>]+>：匹配任意完整的HTML标签（包括开始标签、结束标签，以及带属性的标签），[^>]表示匹配除了>之外的所有字符，确保不会跨标签匹配。
• [\w,.]+：匹配由字母数字、逗号、句号组成的单词/短语，覆盖示例里的标点情况，你可以根据实际需求调整这个字符集（比如加上感叹号、问号等）。

这个需求更贴近你的示例，要把整个带标签包裹的内容（比如<span>else</span>）当成一个元素，而独立的单词单独作为元素。

同样用正则解决，不过这次要匹配「完整的标签包裹块」和「独立单词」两种模式。

代码示例 #

const myHTMLString = "Something, something <span @click='changeSelected(0)' id='0' class='wrong'>else</span> is foo <span @click='changeSelected(0)' id='0' class='wrong'>hello world</span> to all.";
// 正则匹配：要么是带内容的完整标签块，要么是带标点的单词
const regex2 = /(<[^>]+>[^<]+<\/[^>]+>|[\w,.]+)/g;
const result2 = myHTMLString.match(regex2);
console.log(result2);

运行这段代码后，得到的结果就是你期望的：

["Something,", "something", "<span @click='changeSelected(0)' id='0' class='wrong'>else</span>", "is", "foo", "<span @click='changeSelected(0)' id='0' class='wrong'>hello world</span>", "to", "all."]

正则说明 #

• <[^>]+>[^<]+<\/[^>]+>：匹配完整的标签包裹块，分为三部分：
  1. <[^>]+>：匹配开始标签（带属性）
  2. [^<]+：匹配标签内的内容（确保不会包含标签，避免嵌套标签的情况，如果你的场景有嵌套标签，需要调整这个规则）
  3. <\/[^>]+>：匹配对应的结束标签
• [\w,.]+：和需求1一样，匹配独立的单词和标点。

如果你的HTML里有嵌套标签（比如<div><span>text</span></div>），这个基础正则可能无法完全匹配，这种情况建议用DOM解析的方式（比如创建临时DOM元素，遍历节点）会更可靠，不过如果是简单的非嵌套场景，上面的正则完全够用。

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