如何将HTML标签字符串转换为数组？

我懂你要做的事——把一段HTML字符串拆成一个个独立标签元素的数组，还要完整保留每个标签里的文本和属性，而且不想碰DOM解析，毕竟你只是用来展示这些标签文本，不是真的要渲染成HTML元素对吧？之前你参考的方案会剥离内部文本，那咱们换个思路，用正则或者字符串遍历的方式来实现。

方案一：正则表达式（简单高效，适合规整HTML） #

如果你的HTML结构比较标准，没有同类型标签嵌套的情况，正则是最省心的选择。我们可以写一个正则，精准匹配从开始标签到对应闭合标签的完整内容，包括内部文本和属性。

代码示例 #

const htmlStr = '<div>This</div><h1>Is</h1> <p>A</p> <a href="#">Test</a>';
// 正则说明：匹配成对的HTML标签，保留完整内容
const tagRegex = /<([a-z][a-z0-9]*)\b[^>]*>.*?<\/\1>/gi;
// 执行匹配，没有匹配到就返回空数组
const tagArray = htmlStr.match(tagRegex) || [];

console.log(tagArray);
// 输出结果：["<div>This</div>", "<h1>Is</h1>", "<p>A</p>", "<a href="#">Test</a>"]

正则细节解释 #

• <([a-z][a-z0-9]*)\b：捕获开始标签的标签名，确保匹配合法的HTML标签开头
• [^>]*>：匹配标签内的所有属性，直到标签闭合的>
• .*?：非贪婪匹配内部文本，避免跨标签匹配（比如不会把<div>1</div><div>2</div>当成一个整体）
• <\/\1>：匹配对应的闭合标签，\1引用之前捕获的标签名，保证开闭标签一致

扩展：支持自闭合标签 #

如果你的HTML里有<img>、<br>这类自闭合标签，可以修改正则，加入对自闭合标签的匹配：

const tagRegex = /<([a-z][a-z0-9]*)\b[^>]*>.*?<\/\1>|<([a-z][a-z0-9]*)\b[^>]*\/>/gi;

方案二：字符串遍历（更稳健，适合复杂场景） #

如果担心正则的局限性（比如遇到同标签嵌套的情况），可以用手动遍历字符串的方式，跟踪标签的开闭位置，这种方式更灵活，也能处理一些边缘情况。

代码示例 #

function splitHtmlToTagArray(htmlStr) {
  const result = [];
  let currentIndex = 0;
  const strLength = htmlStr.length;

  while (currentIndex < strLength) {
    // 找到下一个开始标签的起始位置
    const startTagStart = htmlStr.indexOf('<', currentIndex);
    if (startTagStart === -1) break;

    // 找到开始标签的结束位置
    const startTagEnd = htmlStr.indexOf('>', startTagStart);
    if (startTagEnd === -1) break;

    // 提取标签名
    const tagNameMatch = htmlStr.slice(startTagStart + 1, startTagEnd).match(/^([a-z][a-z0-9]*)/i);
    if (!tagNameMatch) {
      currentIndex = startTagEnd + 1;
      continue;
    }
    const tagName = tagNameMatch[1].toLowerCase();

    // 寻找对应的闭合标签
    const closingTag = `</${tagName}>`;
    const closingTagStart = htmlStr.indexOf(closingTag, startTagEnd);

    if (closingTagStart === -1) {
      // 没有找到闭合标签，判定为自闭合标签，直接截取
      result.push(htmlStr.slice(startTagStart, startTagEnd + 1));
      currentIndex = startTagEnd + 1;
    } else {
      // 截取完整的标签内容（从开始标签到闭合标签结束）
      const closingTagEnd = closingTagStart + closingTag.length;
      result.push(htmlStr.slice(startTagStart, closingTagEnd));
      currentIndex = closingTagEnd;
    }
  }

  return result;
}

// 测试
const htmlStr = '<div>This</div><h1>Is</h1> <p>A</p> <a href="#">Test</a>';
console.log(splitHtmlToTagArray(htmlStr));
// 输出结果：["<div>This</div>", "<h1>Is</h1>", "<p>A</p>", "<a href="#">Test</a>"]

优势说明 #

这个方法不需要依赖正则的匹配规则，而是手动定位每个标签的位置，对于一些正则难以处理的情况（比如标签内有特殊字符），兼容性更好。如果需要处理嵌套同类型标签，还可以扩展成用栈来跟踪标签层级，不过对于你只是展示文本的需求，上面的代码已经足够用了。

注意事项 #

• 两种方案都假设你的HTML字符串没有严重的语法错误（比如未闭合的标签、错误的标签名），如果有这类情况，可能需要额外的错误处理逻辑。
• 标签之间的空格会被自动忽略，因为我们只截取匹配到的标签内容，空格不在匹配范围内。

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