JavaScript/Vue中解析含嵌套HTML标签的字符串生成数组的方法

实现思路 #

不要用正则手动匹配拆分HTML（嵌套场景下正则容错率极低），直接用浏览器原生DOMParserAPI把HTML字符串转为DOM树，遍历根节点的直接子元素，提取每个元素的完整outerHTML存入数组即可，100%保留原有标签、属性、嵌套结构，不会修改任何原有内容。

完整代码实现 #

var line_array = [];
var textData = `
     <img src="imgurl" alt="" /> 
     <p>some text</p>
     <p style="cssStyle">some text</p>
     <span style="cssStyle"> some text </span>
     <p style="cssStyle">some text<span style="cssStyle"> span text </span></p>
     <a href=""><span style="style">text</span><img src="https://via.placeholder.com/100" alt=""/>  </a>
`;

// 核心解析方法
function parseHtmlToRootArray(htmlStr) {
  const parser = new DOMParser();
  // 将HTML字符串解析为标准DOM文档
  const htmlDoc = parser.parseFromString(htmlStr, 'text/html');
  const result = [];
  // 遍历body下所有直接子元素（即你需要的根级标签）
  for (const rootEl of htmlDoc.body.children) {
    result.push(rootEl.outerHTML.trim());
  }
  return result;
}

// 调用示例
line_array = parseHtmlToRootArray(textData);
console.log(line_array); // 输出格式完全符合你的预期

// 原有activate方法修改后
activate: function (){
  const sourceText = document.getElementById('sourceText').innerHTML;
  line_array = parseHtmlToRootArray(sourceText);
}

注意事项 #

• 该方法自动过滤根元素外的多余换行、空白字符，内部嵌套内容的格式完全保留
• 兼容性覆盖所有现代浏览器，IE10及以上版本也可正常使用
• 如果你需要保留根级的纯文本节点，可以把遍历的htmlDoc.body.children改为htmlDoc.body.childNodes，额外做节点类型判断即可

内容的提问来源于stack exchange，提问作者Muhammad Masudur Rahman