使用JavaScript從html標記中刪除不必要的屬性正則表達式

Question

我是新手到正則表達式，嘗試過濾HTML標記，只保留它們的值所需的（src/href/style）屬性並刪除不必要的屬性。雖然谷歌上搜索，我發現一個正則表達式只保留「src」屬性，因此我的修飾表達如下：

<([a-z][a-z0-9]*)(?:[^>]*(\s(src|href|style)=['\"][^'\"]*['\"]))?[^>]*?(\/?)> 

其工作正常，但唯一的問題是，如果一個標籤包含一個以上的所需屬性，那麼它只保留最後匹配的單個屬性並丟棄其餘的。

我試圖清理在https://regex101.com/#javascript以下文本

<title>Hello World</title> 
<div fadeout"="" style="margin:0px;" class="xyz"> 
    <img src="abc.jpg" alt="" /> 
    <p style="margin-bottom:10px;"> 
     The event is celebrating its 50th anniversary K&ouml;&nbsp; 
     <a style="margin:0px;" href="http://www.germany.travel/">exhibition grounds in Cologne</a>. 
    </p> 
    <p style="padding:0px;"></p> 
    <p style="color:black;"> 
     <strong>A festival for art lovers</strong> 
    </p> 
</div> 

使用上述表達<$1$2$4>作爲替換字符串並獲得以下輸出：

<title>Hello World</title> 
<div style="margin:0px;"> 
    <img src="abc.jpg"/> 
    <p style="margin-bottom:10px;"> 
     The event is celebrating its 50th anniversary K&ouml;&nbsp; 
     <a href="http://www.germany.travel/">exhibition grounds in Cologne</a>. 
    </p> 
    <p style="padding:0px;"></p> 
    <p style="color:black;"> 
     <strong>A festival for art lovers</strong> 
    </p> 
</div> 

問題是「風格」屬性是從廢棄錨標籤。 我試圖複製(\s(src|href|style)=['\"][^'\"]*['\"])塊使用*運算符，{3}選擇器和更多，但徒勞無功。 任何建議???

Answer 1

@AhmadAhsan是演示使用DOM操作，以解決您的問題：https://jsfiddle.net/pu1hsdgn/

<script src="https://code.jquery.com/jquery-1.9.1.js"></script> 
    <script> 
     var whitelist = ["src", "href", "style"]; 
     $(document).ready(function() { 
      function foo(contents) { 
      var temp = document.createElement('div'); 
      var html = $.parseHTML(contents); 
      temp = $(temp).html(contents); 

      $(temp).find('*').each(function (j) { 
       var attributes = this.attributes; 
       var i = attributes.length; 
       while(i--) { 
        var attr = attributes[i]; 
        if($.inArray(attr.name,whitelist) == -1) 
         this.removeAttributeNode(attr); 
       } 
      }); 
      return $(temp).html(); 
     } 
     var raw = '<title>Hello World</title><div style="margin:0px;" fadeout"="" class="xyz"><img src="abc.jpg" alt="" /><p style="margin-bottom:10px;">The event is celebrating its 50th anniversary K&ouml;&nbsp;<a href="http://www.germany.travel/" style="margin:0px;">exhibition grounds in Cologne</a>.</p><p style="padding:0px;"></p><p style="color:black;"><strong>A festival for art lovers</strong></p></div>' 
     alert(foo(raw)); 
    }); 
    </script> 

Answer 2

在這裏，你走了，根據你原來的正則表達式：

<([a-z][a-z0-9]*?)(?:[^>]*?((?:\s(?:src|href|style)=['\"][^'\"]*['\"]){0,3}))[^>]*?(\/?)> 

第1組的標籤名，第2組是屬性，組3爲/（如果有）。我無法使它與使用允許的屬性交織的不允許的屬性一起工作，例如<a href="foo" class="bar" src="baz" />。我不認爲這是可以做到的。

編輯：每@ AhmadAhsan的正則表達式如下更正應該是：這裏

<([a-z][a-z0-9]*)(?:[^>]*?((?:\s(?:src|href|style)=['\"][^'\"]*['\"]){0,3}))[^>]‌​*?(\/?)>