如何从Wikipedia-API返回的含HTML标签字符串中提取所有段落到新数组？

嘿，这个需求我经常碰到，给你分享两个实用的实现方案，你可以根据实际场景选择：

方案一：正则表达式快速实现 #

如果你的HTML结构比较简单（没有嵌套的

标签、复杂属性等），用正则表达式是最直接的方式。因为你的字符串里的HTML标签是转义后的（<p>代替<p>），所以我们需要匹配转义后的标签格式：

var string = '<p>Hi, my name is Tim!</p> <div class="xyz">This is a div</div> <p>Javascript is fun!</p> <p>Hope you can help!</p>';
// 使用全局匹配（g）和单行模式（s，让.匹配换行符）
var pTagsArray = string.match(/<p>.*?<\/p>/gs);
console.log(pTagsArray);
// 输出结果：['<p>Hi, my name is Tim!</p>','<p>Javascript is fun!</p>','<p>Hope you can help!</p>']

优点：代码简洁、执行速度快；
缺点：如果遇到嵌套标签（虽然HTML规范不允许

嵌套）、带有属性的

标签（比如<p class="intro">），正则可能需要调整才能正确匹配。

方案二：DOM解析（更可靠的通用方案） #

如果你的API返回的内容可能包含复杂的HTML结构（比如

带属性、换行、嵌套其他合法标签等），用浏览器的DOM引擎来解析会更稳妥，避免正则的局限性：

var string = '<p>Hi, my name is Tim!</p> <div class="xyz">This is a div</div> <p>Javascript is fun!</p> <p>Hope you can help!</p>';

// 1. 先把转义的HTML字符还原成真实标签
var decodedHtml = string.replace(/&lt;/g, '<').replace(/&gt;/g, '>');

// 2. 创建临时DOM容器来解析HTML
var tempContainer = document.createElement('div');
tempContainer.innerHTML = decodedHtml;

// 3. 获取所有<p>元素，再把它们的outerHTML重新转义回原格式
var pTagsArray = Array.from(tempContainer.querySelectorAll('p')).map(pElement => {
  return pElement.outerHTML.replace(/</g, '&lt;').replace(/>/g, '&gt;');
});

console.log(pTagsArray);

优点：能处理各种合法的HTML结构，兼容性强，不容易出错；
缺点：需要依赖浏览器的DOM环境，如果是在Node.js环境下，你需要用类似jsdom的库来模拟DOM。

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