javascript - 从字符串中删除 <p> 标签的内容

Question

如果之前有人问过这个问题，我深表歉意，但到目前为止，我的 stackoverflow 搜索并没有给我带来我需要的答案。 在不确定的时间间隔内，我的 JavaScript 正在接收一个包含 HTML 的字符串。

一个简单的例子:

<p class='commentator'>Person A</p> Comment of Person A <br/> <p class='commentator'> Person B </p> Comment of person B

当满足某些条件时，所有 <p>标签及其内容应从字符串中删除。我知道如何删除 <p>使用以下代码的标签:

stringComments= stringComments.replace(/<\/?p[^>]*>/g, "");

我如何修改该正则表达式以包含 <p> 的内容标签？ (regex= .*?)

我的预期输出应该如下所示:

Comment of Person A <br/> Comment of person B

注意:那些引用 jQuery 的 remove() 的.这行不通，首先是因为它还不是 DOM 的一部分，其次更改必须仅限于此字符串。

Answer 1

使用 jQuery - 不要尝试用正则表达式解析 HTML，它会给你带来无穷无尽的麻烦。有很多方法可以做到这一点，但这是一种方法:

var s = "<p class='commentator'>Person A</p> Comment of Person A <br/> <p class='commentator'> Person B </p> Comment of person B";

var elem = $("<div>" + s + "</div>");
var p = elem.find("p");
p.remove();
console.log(elem[0].innerHTML);

日志:

Comment of Person A <br>  Comment of person B 

http://jsfiddle.net/a565cowm/

您无需向 DOM 添加任何内容即可让 jQuery 对其进行处理。 jQuery 可以处理断开连接的 HTML 片段。

为了更安全，您甚至可能希望使用选择器来定位类而不是 <p>标签。这样，如果它更改为其他标签，或 <p>标签被添加到您想要的内容中，您不会意外地最终删除错误的部分。

var p = elem.find(".commentator");

编辑:为了完整起见，应该注意这不是仅限于 jQuery 的技巧。你可以在 vanilla JS 中做同样的事情(不能忍受浏览器不兼容):

var div = document.createElement("div");
div.innerHTML = s;
var p = div.getElementsByTagName("p");   // or getElementsByClassName if you prefer
while(p.length > 0) {
    div.removeChild(p[0]);
}
console.log(div.innerHTML);

http://jsfiddle.net/a565cowm/1/