How can I remove all tag's attributes except specific ones?

Question

I have this string:

var str = '<p>paragraph<a>link</a></p>
           <div class="myclass">
               <div>something</div>
               <div style="mystyle">something</div>
               <b><a href="#">link</a></b>
               <b><a href="#" name="a name">link</a></b>
               <b style="color:red">bold</b>
               <img src="../path" alt="something" />
               <img src="../path" alt="something" class="myclass" />
           </div>';

I want to remove all attributes except href, src, alt. So this is expected result:

/* 
<p>paragraph<a>link</a></p>
<div>
    <div>something</div>
    <div>something</div>
    <b><a href="#">link</a></b>
    <b><a href="#">link</a></b>
    <b>bold</b>
    <img src="../path" alt="something">
    <img src="../path" alt="something">
</div>

How can I do that?

I can just select them which isn't useful:

/<[a-z]+ .*?(href|src|alt)="[^"]+"/g

http://stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml-self-contained-tags — epascarello, Jan 29 '17 at 16:44

mplungjan · Accepted Answer · 2017-01-29T17:04:08.017

4

var str = `<p>paragraph<a>link</a></p>
           <div class="myclass">
               <div>something</div>
               <div style="mystyle">something</div>
               <b><a href="#">link</a></b>
               <b><a href="#" name="a name">link</a></b>
               <b style="color:red">bold</b>
               <img src="../path" alt="something" />
               <img src="../path" alt="something" class="myclass" />
           </div>`;
var div = document.createElement("div");
div.innerHTML=str;
div.querySelectorAll("*").forEach(function(el){
  for (var i = 0, atts = el.attributes, n = atts.length; i < n; i++){
    var att = atts[i].nodeName;
    if (["src","alt","href"].indexOf(att) ==-1) el.removeAttribute(att); 
  }
}); 
// console.log(div); alert shows it more clearly
alert(div.innerHTML);

PS: Please note that you need backticks to quote a string with embedded newlines

edited Jan 29 '17 at 17:04

answered Jan 29 '17 at 16:55

mplungjan

169,008
28
173
236

just one thing, why have you used `
` tag? What happens if my string also be containing `
` tag?
– Martin AJ Jan 29 '17 at 17:06
1

@MartinAJ `
` is just a container for your HTML (`div`s can have other `div`s inside them). A problem could occur if your `str` contains a `body` or `html` tag.
– ibrahim mahrir Jan 29 '17 at 17:12
You could use `document.implementation.createHTMLDocument("New").body` instead of `document.createElement("div")` – Taraz Oct 13 '20 at 19:58

score 1 · Answer 2 · answered Jan 29 '17 at 17:06

var str = `<p>paragraph<a>link</a></p>
           <div class="myclass">
               <div>something</div>
               <div style="mystyle">something</div>
               <b><a href="#">link</a></b>
               <b><a href="#" name="a name">link</a></b>
               <b style="color:red">bold</b>
               <img src="../path" alt="something" />
               <img src="../path" alt="something" class="myclass" />
           </div>`;
var $div =$("<div>");
$div.html(str);
  $div.find("*").each(function() {

    var attributes = $.map(this.attributes, function(item) {
      return item.name;
    });

    // now use jQuery to remove the attributes
    var element = $(this);
    $.each(attributes, function(i, item) {
      if (["href", "src", "alt"].indexOf(item) == -1)
        element.removeAttr(item);
    });


  });
console.log($div.html());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

How can I remove all tag's attributes except specific ones?

2 Answers2

Linked