除了字正则表达式与不工作

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和>之间不包含字符串的任何内容。就像这样：

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 2

你可以试试这个（不要紧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 3

我就不重复了很多reasons为什么使用正则表达式来修改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>