带有 except 单词的正则表达式不起作用

Question

我有密码

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=""/>

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

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

Answer 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);

Answer 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);

Answer 3

我不会重复很多reasons why RegExp usage to modify HTML is a bad idea (and by many considered as a hack), but I would like to show how natural it could be to use jQuery这个任务

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())

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

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

带有 except 单词的正则表达式不起作用

a regular expression with except word doesn't work

javascript

regex

except