JavaScriptを使用してhtmlタグから不要な属性を取り除くRegEx

Question

私は正規表現の初心者で、必要な（src/href/style）属性のみをその値で保持し、不要な属性を削除しようとします。グーグルでいる間、私は唯一の「SRC」属性を維持するために正規表現を発見し、それゆえ私の修正式は次のとおりです。

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

その細かい作業が、1つのタグには、それを複数の必要な属性が含まれている場合、唯一の問題は、あります最後に一致した単一の属性のみを保持し、残りを破棄します。

私は、置換文字列として<$1$2$4>と、前述の式を使用して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> 

に従い、次の出力を得ることをきれいにしようとしている：

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

問題は、「スタイル」属性がから廃棄されますアンカータグ。 * operator、{3}セレクタを使ってブロック(\s(src|href|style)=['\"][^'\"]*['\"])を複製しようとしましたが、はるかに無駄です。 提案がありますか？

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は属性であり、そして1がある場合、グループ3は/です。許可された属性でインターリーブされた許可されていない属性で動作するようにはできませんでした。 <a href="foo" class="bar" src="baz" />。私はそれができるとは思わない。

編集：正規表現以下AhmadAhsanの修正@ごとのようになります。

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