如何从HTML模板字符串中提取所有元素的完整字符串组成数组

思路 #

• 避免用正则解析HTML，选择DOMParser将字符串转为DOM树，保证嵌套标签的解析准确率
• 采用深度优先遍历所有元素节点，收集每个元素的outerHTML属性即可得到完整的标签字符串
• 跳过模板最外层的容器元素（匹配示例输出要求，如需保留可调整遍历起点）

浏览器环境代码实现 #

const extractElementStrings = (htmlStr) => {
  const parser = new DOMParser();
  const doc = parser.parseFromString(htmlStr, 'text/html');
  // 获取模板最外层的容器元素（示例中为div）
  const rootContainer = doc.body.firstElementChild;
  const result = [];

  // 深度优先遍历元素
  const traverse = (element) => {
    if (!element || element.nodeType !== Node.ELEMENT_NODE) return;
    // 收集当前元素的完整字符串
    result.push(element.outerHTML);
    // 遍历所有子元素递归处理
    Array.from(element.children).forEach(child => traverse(child));
  };

  // 遍历容器的直接子元素（跳过最外层容器本身，匹配示例输出）
  Array.from(rootContainer.children).forEach(child => traverse(child));

  return result;
};

// 测试示例
const tmp = `
<div>
 <h1>Heading <span>inline</span></h1>
 <button>Click Me</button>
</div>
`;

console.log(extractElementStrings(tmp));
// 输出：["<h1>Heading <span>inline</span></h1>", "<span>inline</span>", "<button>Click Me</button>"]

Node.js环境适配 #

Node.js环境没有原生DOMParser，可以引入jsdom库实现，逻辑基本一致：

const { JSDOM } = require('jsdom');
const extractElementStrings = (htmlStr) => {
  const dom = new JSDOM(htmlStr);
  const rootContainer = dom.window.document.body.firstElementChild;
  const result = [];

  const traverse = (element) => {
    if (!element || element.nodeType !== dom.window.Node.ELEMENT_NODE) return;
    result.push(element.outerHTML);
    Array.from(element.children).forEach(child => traverse(child));
  };

  Array.from(rootContainer.children).forEach(child => traverse(child));
  return result;
};

注意事项 #

• 如果你需要保留最外层容器的字符串，只需把遍历起点从rootContainer.children改成[rootContainer]即可
• 该方案支持任意层级的嵌套标签，不会出现正则匹配的漏判、错判问题

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