如何使用JavaScript将包含HTML标记的字符串拆分为独立对象

你的问题在于之前的代码只捕获了转义后的HTML标签，完全没处理标签前后的普通文本，也没提取标签包裹的核心内容。下面给你两种可靠的解决思路：

方法一：用DOM API处理（推荐，更稳定） #

正则处理HTML很容易踩坑（比如嵌套标签、特殊字符），直接用浏览器的DOM解析能力会更稳妥。步骤是先让浏览器自动解码转义的HTML实体，再遍历DOM节点生成目标数组：

const example = 'The lucky stars is an astrology themed <a href="/game/">game</a> and it consists of <strong>thousands of.</strong>';

// 创建临时div用于解析HTML
const tempDiv = document.createElement('div');
tempDiv.innerHTML = example; // 浏览器自动解码转义的HTML实体

const richTexts = [];

// 遍历所有子节点
tempDiv.childNodes.forEach(node => {
  if (node.nodeType === Node.TEXT_NODE) {
    // 处理文本节点，过滤掉空内容（比如多余空格）
    const textContent = node.textContent;
    if (textContent.trim()) {
      richTexts.push({ type: 'text', content: textContent });
    }
  } else if (node.nodeType === Node.ELEMENT_NODE) {
    // 根据标签类型判断对象类型
    let itemType = 'text';
    if (node.tagName.toLowerCase() === 'a') {
      itemType = 'hyperlink';
    } else if (node.tagName.toLowerCase() === 'strong') {
      itemType = 'bold';
    }
    richTexts.push({ type: itemType, content: node.textContent });
  }
});

console.log(richTexts);

方法二：正则匹配（适合简单无嵌套场景） #

如果你的场景里不会出现嵌套标签，也可以用正则精准拆分文本和标签块：

const example = 'The lucky stars is an astrology themed <a href="/game/">game</a> and it consists of <strong>thousands of.</strong>';

const richTexts = [];
const regex = /(.*?)(<(a|strong).*?>(.*?)<\/\3>)/g;
let lastPosition = 0;
let match;

// 处理开头的文本内容
match = regex.exec(example);
if (match && match[1].trim()) {
  richTexts.push({ type: 'text', content: match[1] });
  lastPosition = regex.lastIndex;
}

// 循环匹配所有标签块
while ((match = regex.exec(example)) !== null) {
  // 提取标签类型和内部内容
  const tag = match[3];
  const content = match[4];
  const itemType = tag === 'a' ? 'hyperlink' : 'bold';
  
  // 处理标签块和上一个内容之间的文本（如果有）
  const betweenText = example.slice(lastPosition, match.index);
  if (betweenText.trim()) {
    richTexts.push({ type: 'text', content: betweenText });
  }
  
  // 添加标签对应的对象
  richTexts.push({ type: itemType, content: content });
  lastPosition = regex.lastIndex;
}

// 处理最后剩余的文本
const remainingText = example.slice(lastPosition);
if (remainingText.trim()) {
  richTexts.push({ type: 'text', content: remainingText });
}

console.log(richTexts);

两种方法都能输出你期望的结果，其中DOM方法更适合复杂的HTML场景，正则则适合简单可控的情况。

内容的提问来源于stack exchange，提问作者x-ray