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

＆＃13;

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

＆＃13;

Answer 2

您可以尝试这一点（img [a-z]{3}是否重要，因为src支持的元素更多而不是3个字符http://www.w3resource.com/html/attributes/html-src-attribute.php，但写img）

更容易

＆＃13;

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

＆＃13;

Answer 3

我不会重复很多reasons为什么RegExp用于修改HTML是一个坏主意（并且被许多人视为黑客攻击），但我想表明使用是多么自然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>

除了word之外的正则表达式不起作用

3 个答案: