如何排除正则表达式字符串中的类？

Question

我目前正在尝试构建一个正则表达式，它替换字符串中的所有 HTML 标记，不包括特殊元素。问题是我发现没有办法排除特殊元素的结束标记。这是我的代码：let str = 'You have to pay <div class="keep-this">$200</div> per <span class="date">month</span> for your <span class="vehicle">car</span> <div class="keep-this">$500</div> also';console.log(str.replace(/(?!<div class="keep-this">)(<\/?[^>]+(>|$))/g, ""));

Answer 1

试试这个选项，它匹配所有的 HTML 标签，不包括那些有属性的标签class="keep-this"。

let str = 'You have to pay <input class="some-class"/> blah <div class="keep-this">$200</div> per <span class="date">month</span> for your <span class="vehicle">car</span> <div class="keep-this">$500</div> also';

console.log(str.replace(/<\s*([^\s>]+)(?:(?!\bclass="keep-this")[^>])*>(.*?)(?:<\/\1>)|<\s*([^\s>]+)(?:(?!\bclass="keep-this")[^>])*\/>/g, "$2"));

以下是正则表达式模式的解释：

<                                 match < of an opening tag

\s*                               optional whitespace

([^\s>]+)                         match and capture the HTML tag name in $1 (\1)

(?:(?!\bclass="keep-this")[^>])*  match remainder of tag,

                                  so long as class="keep-this" is not seen

>                                 match > of an opening tag

(.*?)                             match and capture the tag's content in $2,

                                  until hitting the nearest

(?:<\/\1>)                        closing tag, which matches the opening one

|                                 OR

<\s*([^\s>]+)                     match a standalone tag e.g. <input/>

(?:(?!\bclass="keep-this")[^>])*  without a closing tag

\/>                               which matches                            

然后，我们只需将所有此类匹配项替换为空字符串，即可有效地删除它们。

Answer 2

如果你想删除所有没有类的 html 元素，keep-this你也可以使用DOMParser，例如使用:not。

let str = 'You have to pay <div class="keep-this">$200</div> per <span class="date">month</span> for your <span class="vehicle">car</span> <div class="keep-this">$500</div> also';

let parser = new DOMParser();

let doc = parser.parseFromString(str, "text/html");

doc.querySelectorAll("body *:not(.keep-this)").forEach(e => e.replaceWith(e.innerHTML));

console.log(doc.body.innerHTML);