CODEWITHSUNDEEP
javascriptarraysjavascript-objects
Kamarul Anuar
Kamarul Anuar

Reputation: 312

Filter all attribute and value of attribute

With pure Javascript, how can I filter all attributes and values of attributes inside a target element?

Below is example code I've tried to implement for my goal. However I don't know how to get all attribute names and then get the value of the attribute name to filter it. If the attribute name is not listed I want to remove the attribute. If allowed I want to to keep only allowed value.

(function() {
  //array allowed attr and allowed value of attr
  /*
  var allowedAttrValue = {};

  allowedAttrValue['class'] = 'dont_remove'; // I want to use dont_remove class

  allowedAttrValue['class'] = 'i_want_this_class'; // I want to use i_want_this_class class

  allowedAttrValue['data-dont-remove='] = 'whatever'; //what ever value in this attribute are allowed.

  // 1. I need to remove all attribute not listed 
  // 2. I want to filter value of allowed attribute. if value not listed I want to keep only allowed attribute (especially class; have multiple value separatedby space).
  */

  var
    editor = document.getElementById("post-editor"),
    editorParagraph = editor.querySelectorAll("*");

  for (i = 0; i < editorParagraph.length; ++i) {
    elem = editorParagraph[i];
    if (elem.attributes) {
      //console.log(elem.attributes); //return namedNodeMap object. how to get attribute name and attribute value?
      var ii;
      for (ii = 0; ii < elem.attributes.length; ++ii) {
        var elemAttr = elem.attributes[ii];
        console.log(elemAttr); //retrun directly data-attr="haha" data-wtf="remove-me" class="hehe" and all.
      }
    }
  }

})(); //end
<div id="post-editor" class="preview">
  <div data-attr="haha" data-wtf="remove me">
    bla bla
  </div>
  <div class="hehe dont_remove" data-something="haha">
    bla bla
  </div>
  <div data-dont-remove="value" data-randomly="haha">
    bla bla
  </div>
  <div class="this_class_not_listed i_want_this_class" data-remove-all="haha">
    bla bla
  </div>
  <div data-data="haha">
    bla bla
  </div>
</div>

Upvotes: 0

Views: 437

Answers (1)

Keith
Keith

Reputation: 24241

Here is a simple example of using attributes and removeNamedItem

When you click remove Me it will remove the data-remove-me attribute from the first div, as it's not in the keepList,. You should then see the red div turn white..

var 
  keepList = {
    'data-keep-me': true
  };

document.querySelector('button').onclick = function () {
  var divs = document.querySelectorAll('div');
  for (var l = 0; l < divs.length; l ++) {
    var d = divs[l];
    for (var ll = d.attributes.length -1; ll >= 0; ll--) {
      var a = d.attributes[ll];
      if (!keepList[a.name]) 
        d.attributes.removeNamedItem(a.name);
    }
  }
}
[data-remove-me] {
  background-color: red;
}
[data-keep-me] {
  background-color: yellow;
}
<div data-remove-me="Remove Me">
Remove Me
</div>

<div data-keep-me="Keep Me">
Keep Me
</div>

<button>Remove Them</button>

Also here is your example, with these mods. But you will need to use object inspect to see changes.

Note I've also stepped through the attributes in reverse order, this is because as you remove them order / length would change.

(function() {
  //array allowed attr and allowed value of attr  
  var allowedAttrValue = {
    class: true,
    'data-dont-remove': true
  };

  var
    editor = document.getElementById("post-editor"),
    editorParagraph = editor.querySelectorAll("*");

  for (i = 0; i < editorParagraph.length; ++i) {
    elem = editorParagraph[i];
    if (elem.attributes) {
      var ii;
      for (ii = elem.attributes.length -1; ii >=0; --ii) {
        var elemAttr = elem.attributes[ii];
        if (!allowedAttrValue[elemAttr.name]) 
          elem.attributes.removeNamedItem(elemAttr.name);
      }
    }
  }

})(); //end
<div id="post-editor" class="preview">
  <div data-attr="haha" data-wtf="remove me" data-xyz="">
    bla bla
  </div>
  <div class="hehe dont_remove" data-something="haha">
    bla bla
  </div>
  <div data-dont-remove="value" data-randomly="haha">
    bla bla
  </div>
  <div class="this_class_not_listed i_want_this_class" data-remove-all="haha">
    bla bla
  </div>
  <div data-data="haha">
    bla bla
  </div>
</div>

Upvotes: 2

Related Questions