如何提取字符串中多个p标签的innerHTML？附输入输出示例

嘿，我来帮你搞定这个提取多个p标签内部内容的需求！根据你的场景不同，这里有几种实用的实现方式，咱们一个个来看：

方法一：浏览器环境下用DOM API（最推荐） #

在浏览器里，直接借助原生DOM API处理HTML字符串是最安全可靠的方式，能完美应对各种复杂的HTML结构（比如嵌套标签、转义字符等）。具体步骤是创建一个临时容器元素，把目标HTML塞进去，再遍历提取所有p标签的内容：

var HTML = "<p class=\"Paragraph\" >Hello, World 1!</p><p class=\"Paragraph\" >Hello, World 2!</p>";

// 创建临时div作为容器
const tempContainer = document.createElement('div');
tempContainer.innerHTML = HTML;

// 获取所有带Paragraph类的p标签（也可以直接用querySelectorAll('p')匹配所有p标签）
const pTags = tempContainer.querySelectorAll('p.Paragraph');

// 遍历拼接内容
let result = '';
pTags.forEach(tag => {
  result += tag.innerHTML;
});

console.log(result); // 输出：Hello, World 1!Hello, World 2!

这种方法的好处是完全遵循HTML规范，不会出现正则表达式常见的匹配错误问题。

方法二：Node.js环境下实现（无浏览器DOM） #

如果是在Node.js环境中处理（比如后端爬虫、静态文件处理），没有浏览器的document对象，咱们可以用轻量的第三方库cheerio，它模拟了jQuery的DOM操作语法，用起来很顺手：

首先安装cheerio：

npm install cheerio

然后编写代码：

const cheerio = require('cheerio');
var HTML = "<p class=\"Paragraph\" >Hello, World 1!</p><p class=\"Paragraph\" >Hello, World 2!</p>";

// 加载HTML字符串
const $ = cheerio.load(HTML);

// 遍历p标签并拼接内容
let result = '';
$('p.Paragraph').each((_, elem) => {
  result += $(elem).html();
});

console.log(result); // 输出目标结果

方法三：正则表达式（仅适合简单场景，不推荐） #

如果实在不想依赖DOM或第三方库，正则表达式可以应付结构非常简单的HTML，但强烈不推荐用于复杂HTML——因为HTML的嵌套、属性变化很容易让正则失效（比如p标签里嵌套其他标签、属性里有特殊字符等）。

简单场景下的实现代码：

var HTML = "<p class=\"Paragraph\" >Hello, World 1!</p><p class=\"Paragraph\" >Hello, World 2!</p>";

// 匹配p标签内容的正则（假设p标签无嵌套、结构简单）
const pRegex = /<p[^>]*>([\s\S]*?)<\/p>/gi;
let result = '';
let match;

// 循环匹配所有符合条件的内容
while ((match = pRegex.exec(HTML)) !== null) {
  result += match[1];
}

console.log(result); // 输出目标字符串

⚠️ 注意：如果你的HTML里p标签有嵌套（比如<p>Hi <span>there</span></p>），或者属性里包含引号、换行，这个正则就会匹配出错，所以优先选择前两种方法。

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