Entfernen Sie unnötige Attribute von HTML-Tag mit JavaScript RegEx

Question

Ich bin Neuling zu regulären Ausdrücken, versuchen, die HTML-Tags zu filtern halten nur erforderlichen (src/href/style) -Attribut mit ihren Werten und entfernen Sie unnötige Attribute. Während googeln ich einen regulären Ausdruck nur „src“ -Attribut zu halten gefunden, daher ist mein modifizierte Ausdruck wie folgt:

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

Seiner Arbeit in Ordnung, aber das einzige Problem ist, wenn ein Tag mehr als ein erforderliches Attribut enthält dann behält nur das letzte übereinstimmende einzelne Attribut und verwirft den Rest.

Ich versuche folgenden Text

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

bei https://regex101.com/#javascript mit vorgenannten Ausdruck mit <$1$2$4> als -Ersatzzeichenfolge und bekam folgende Ausgabe zu reinigen:

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

Problem ist "style" -Attribut wird verworfen aus Anker-Tag. Ich habe versucht, den (\s(src|href|style)=['\"][^'\"]*['\"]) Block mit * Operator, {3} Selektor und viel mehr aber vergeblich zu replizieren. Irgendwelche Vorschläge ???

Answer 1

@AhmadAhsan hier Demo Ihr Problem zu beheben, ist die DOM-Manipulation mit: 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

Hier gehen Sie, basierend auf Ihrer ursprünglichen Regex:

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

Gruppe 1 ist der Tag-Name, Gruppe 2 sind die Attribute, und der Gruppe 3 ist die / wenn es einen gibt. Ich konnte es nicht mit nicht erlaubten Attributen arbeiten, die mit erlaubten Attributen verschachtelt sind, z. <a href="foo" class="bar" src="baz" />. Ich denke nicht, dass es gemacht werden kann.

Edit: Per @ AhmadAhsan Korrekturen unter dem regulären Ausdruck sein sollten:

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