如何在JavaScript中将含HTML片段的字符串拆分为单个字符或HTML短元素？

嘿，我懂你想实现的效果——把混着HTML标签的字符串，拆成单个普通字符和完整的HTML标签元素对吧？看你之前的尝试用了split加正则，但结果里多了好多null，这是因为正则里的空分支导致的，咱们来调整一下就能搞定啦！

首先说说你原来代码的问题：你用的正则/(<.*?>)|/里，|后面留了空，这会让正则匹配每个字符之间的空位置，split的时候就会插入一堆没匹配到内容的null，完全不是咱们想要的结果。

那正确的思路应该是：先把字符串里的HTML标签和普通文本块分开，再把普通文本块拆成单个字符，最后把所有内容合并成一个干净的数组。具体代码这么写：

let str = 'wel<span class="t">come</span> to all';
// 第一步：把字符串分割成「文本块」和「HTML标签」的数组
const splitParts = str.split(/(<[^>]+>)/);
const finalResult = [];

// 遍历每个分割后的部分
for (const part of splitParts) {
  // 跳过空字符串（split可能会产生空项）
  if (!part) continue;
  // 判断当前部分是不是HTML标签：以<开头，以>结尾
  if (part.startsWith('<') && part.endsWith('>')) {
    finalResult.push(part);
  } else {
    // 如果是普通文本，拆成单个字符再加入结果数组
    finalResult.push(...part.split(''));
  }
}

// 查看最终结果
console.log(JSON.stringify(finalResult));

运行这段代码后，输出的结果就是：

["w","e","l","<span class=\"t\">","c","o","m","e","</span>"," ","t","o"," ","a","l","l"]

完全符合你的需求：单个普通字符是独立项，完整的HTML标签也作为单独的项保留，没有多余的null或者空字符串。

我再给你拆解下逻辑：

• 正则/(<[^>]+>)/的作用是精准匹配所有完整的HTML标签（不管是开始标签还是结束标签），用split分割后，标签会被单独拎出来，剩下的就是普通文本块。
• 遍历的时候，标签直接加入结果数组；普通文本块用split('')拆成单个字符，再展开加入数组。
• 最后通过判断跳过空项，保证结果数组的干净。

这样处理不管字符串里有多少个HTML标签，都能完美拆分啦！

内容来源于stack exchange