带有除词的正则表达式不起作用答案

【问题标题】：a regular expression with except word doesn't work带有除词的正则表达式不起作用
【发布时间】：2017-07-05 18:46:32
【问题描述】：

我有密码

let dirtyHtml = `<img class="emojione" src="">
<img class="a" src="edw">
<img class="emojione" src="" />
<img class="emojione" src=""/>

<img src="">`;

let clearHtml = dirtyHtml.replace(/<img[^<>]+(?!emojione)[^<>]+>/gi, '');

console.log(clearHtml);

我希望看到这个

<img class="emojione" src="">
<img class="emojione" src="" />
<img class="emojione" src=""/>

但我会看到空字符串...

我的正则表达式有什么问题？

【问题讨论】：

你在开玩笑吗？ )))
这会做得更好：clearHtml = dirtyHtml.replace(/<img(?:(?!emojione)[^<>])*>/gi, ''); - 但听别人说用正则表达式解析 HTML 不是最好的解决方案！
@ridgerunner 我必须选择哪种方式来获得更好的解决方案？使用 DOM 接口？

标签： javascript regex except

【解决方案1】：

你可以试试这个（img 是否[a-z]{3} 无关紧要，因为src 支持的元素有更多超过3 个字符http://www.w3resource.com/html/attributes/html-src-attribute.php 但写起来更容易img )

let dirtyHtml = `<img class="emojione" src="">
<img class="a" src="edw">
<img class="emojione" src="" />
<img class="emojione" src=""/>

<img src="">`;

let clearHtml = dirtyHtml.replace(/(<img class="[a-z]?" src="[a-z]+">)|(<img src="">)/gi, '');

console.log(clearHtml);

【讨论】：

【解决方案2】：

/<img(?:(?!emojione).)*>/gi 将匹配 <img 和 > 之间不包含字符串 emojione 的任何内容。像这样：

let dirtyHtml = `<img class="emojione" src="">
<img class="a" src="edw">
<img class="emojione" src="" />
<img class="emojione" src=""/>

<img src="">`;

let clearHtml = dirtyHtml.replace(/<img(?:(?!emojione).)*>/gi, '');

console.log(clearHtml);

【讨论】：

不错！如果我想匹配之间包含字符串 emojione 的任何内容怎么办？
sry 知道了 //gi
@rick 使用这个/<img[^>]*(?:emojione)[^>]*>/gi。

【解决方案3】：

我不会重复很多 reasons 为什么使用 RegExp 修改 HTML 是一个坏主意（并且被许多人认为是 hack），但我想展示使用 @987654322 是多么自然@ 这个任务

let dirtyHtml = `<img class="emojione" src="">
<img class="a" src="edw">
<img class="emojione" src="" />
<img class="emojione" src=""/>

<img src="">`;

// Put your html string within some HTML element to make a starting point
var $wrap = $('<div/>').append(dirtyHtml);
// Remove image tags without specific class
$wrap.find('img:not(.emojione)').remove();

console.log($wrap.html())

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"&gt;&lt;/script&gt;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

【讨论】：

请在不使用 jQuery 的情况下重复此解决方案
我要求这个：const dirtyDom = document.createElement('div'); dirtyDom.innerHTML = '<img class="emojione" src=""><img class="a" src="edw"><img class="emojione" src="" /><img class="emojione" src=""/><img src="">'; dirtyDom.querySelectorAll('img:not(.emojione)').forEach(node => dirtyDom.removeChild(node));。谢谢:)