如何在JavaScript中移除<p>标签并替换为<br>处理HTML字符串？

嘿，这个需求我之前也碰到过，给你分享两个实用的实现方式，看你场景选就行：

方案一：正则表达式（适合结构简单的HTML） #

如果你的HTML就像示例里这样，都是干净的<p>标签没有嵌套，直接用正则替换最快捷：

const originalHtml = '<p>I have a dog</p> <p>I have a cat too</p> <p>I have a lion too</p>';
// 先去掉所有<p>起始标签，再把</p>（包括后面可能的空格）替换成<br/>加空格
const processedText = originalHtml
  .replace(/<p>/g, '')
  .replace(/<\/p>\s*/g, '<br/> ')
  .trim(); // 移除末尾可能多余的空格

console.log(processedText);
// 输出: I have a dog<br/> I have a cat too<br/> I have a lion too

这里的正则逻辑很直白：/<p>/g全局匹配所有起始标签并清空，/<\/p>\s*/g匹配结束标签和后面的任意空白字符，替换成带空格的<br/>，最后用trim()避免末尾留空。

方案二：DOM API（适合复杂/不可控的HTML） #

如果你的HTML可能有嵌套标签、属性（比如<p class="test">...</p>），正则就容易翻车了，这时候用浏览器的DOM解析能力更靠谱：

const originalHtml = '<p>I have a dog</p> <p>I have a cat too</p> <p>I have a lion too</p>';

// 创建临时div用来解析HTML
const tempContainer = document.createElement('div');
tempContainer.innerHTML = originalHtml;

// 提取所有p标签的文本内容，再用<br/>拼接
const paragraphTexts = Array.from(tempContainer.querySelectorAll('p'))
  .map(para => para.textContent);
const processedText = paragraphTexts.join('<br/> ');

console.log(processedText);
// 输出: I have a dog<br/> I have a cat too<br/> I have a lion too

这个方法的好处是，不管<p>标签里有什么内容，都能准确提取纯文本，完全不用担心正则匹配不到的边缘情况。

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