无法在JavaScript数组中提取HTML起始与结束标签组的问题求助

嘿，这个问题核心是处理HTML标签的嵌套匹配，用栈结构就能完美搞定！我给你写一个实用的实现方案，带详细解释：

核心思路 #

HTML标签是典型的嵌套结构，最近的起始标签对应最近的结束标签，栈的先进后出特性正好适配这种匹配逻辑：

• 遍历数组时，遇到符合条件的起始标签（a[0] === 1且是合法HTML起始标签），就把它的标签名和位置压入栈
• 遇到结束标签时，从栈顶取出对应的起始标签，提取两者之间的所有元素作为一组
• 自动处理嵌套标签的情况，比如<strong>里嵌套<em>，会分别提取对应的组

完整代码实现 #

function extractTagGroups(arr) {
  const groups = [];
  const stack = [];
  // 匹配合法HTML起始标签（支持带属性）
  const startTagRegex = /^<([a-z][a-z0-9]*)(?:\s[^>]*)?>$/i;
  // 匹配HTML结束标签
  const endTagRegex = /^<\/([a-z][a-z0-9]*)>$/i;

  arr.forEach((item, index) => {
    if (item[0] === 1) {
      // 检查是否是符合条件的起始标签
      const startMatch = item[1].match(startTagRegex);
      if (startMatch) {
        const tagName = startMatch[1].toLowerCase();
        // 记录标签名和起始索引，压入栈
        stack.push({ tagName, startIdx: index });
      } else {
        // 检查是否是结束标签
        const endMatch = item[1].match(endTagRegex);
        if (endMatch) {
          const tagName = endMatch[1].toLowerCase();
          // 弹出栈顶的起始标签（假设标签嵌套合法）
          const matchingStart = stack.pop();
          if (matchingStart && matchingStart.tagName === tagName) {
            // 提取从起始到当前位置的所有元素作为一组
            const group = arr.slice(matchingStart.startIdx, index + 1);
            groups.push(group);
          } else {
            // 处理标签不匹配的错误情况
            if (matchingStart) stack.push(matchingStart);
            console.warn(`标签不匹配：找到${item[1]}，但预期是</${matchingStart?.tagName}>`);
          }
        }
      }
    }
  });

  return groups;
}

测试示例 #

假设你的输入数组是这样的：

const testArray = [
  [0, "这是普通文本"],
  [1, "<strong>"],
  [0, "粗体内容"],
  [1, "<em>"],
  [0, "斜体+粗体"],
  [1, "</em>"],
  [0, "剩余粗体内容"],
  [1, "</strong>"],
  [0, "结尾文本"],
  [1, "<div class='container'>"],
  [0, "Div里的内容"],
  [1, "</div>"]
];

// 调用函数
const result = extractTagGroups(testArray);
console.log(result);

运行后你会得到3个分组：

1. <strong>到</strong>之间的所有元素
2. <em>到</em>之间的所有元素
3. <div>到</div>之间的所有元素

关键细节说明 #

• 正则匹配：用正则确保只识别合法的HTML标签，支持带属性的起始标签，同时统一转成小写避免大小写不匹配的问题
• 错误处理：如果遇到标签不匹配的情况（比如起始和结束标签不一致），会弹出警告并恢复栈的状态，避免后续处理出错
• 嵌套支持：栈结构自动处理嵌套标签，内层标签先匹配结束，外层标签后匹配，完全符合HTML的嵌套规则

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