How to get all HTML attributes which start with something (the attribute names, *not* their values!)

Question

I would like to get all the elements/nodes in an HTML page which contain attributes that start with something (again, the attribute names start with something, not their values!). For example, TinyMCE has a tendency of adding custom attributes to the elements it saves, like "mce_style", "mce_href", "mce_bogus", etc. I would like to have something like the CSS3 selector for attribute values, [attr^="mce_"], but not for the values, the attribute names.

Of course, I can iterate through all DOM nodes and their attributes and check them one by one, but I was wondering whether there is a more efficient way.

Please don't give me TinyMCE-specific answers, I'm pretty sure there's a flag which would prevent TinyMCE for saving these attributes, but the question is generic.

Joseph · Accepted Answer

here's a simple demo to find all elements that contain an attribute starting with mce_. might need some refinements.

function getMCE() {
    var el, attr, i, j, arr = [],
        reg = new RegExp('^mce_', 'i'),                //case insensitive mce_ pattern
        els = document.body.getElementsByTagName('*'); //get all tags in body

    for (i = 0; i < els.length; i++) {                 //loop through all tags
        el = els[i]                                    //our current element
        attr = el.attributes;                          //its attributes
        dance: for (j = 0; j < attr.length; j++) {     //loop through all attributes
            if (reg.test(attr[j].name)) {              //if an attribute starts with mce_
                arr.push(el);                          //push to collection
                break dance;                           //break this loop
            }
        }
    }
    return arr;
}

console.log(getMCE())

Rahen Rangan · Answer

Try this:

FUNCTIONS

//custom selector expression
$.extend($.expr[':'],{
attr:function(o,i,m){
  var attrs=$.getAttrAll(o),re=m[3],found=false;
  $.each(attrs,function(k,v){
  if(new RegExp(re).test(v)) { return found=true;}
});
return found;
} 
});
// get all atrributes of an element
$.getAttrAll=function(el){
  var rect = [];
  for (var i=0, attrs=el.attributes, len=attrs.length; i<len; i++){
    rect.push(attrs.item(i).nodeName);
  }
  return rect;
};

` USAGE

// calling custom selector expression :attr(regexp)
$(function(){
  $('body').find(':attr("^mce_")').css({background:'yellow'});
});

HTML

<body>
  <p mce_style="height:50px" id="x" data-hello="hello">selected</p>
  <div not_mce_bogus="abc">not_mce_bogus</div>
  <div mce_href="http://rahenrangan.com">selected</div>
  <p>othrs</p>
</body>

Skylar Anderson · Answer

One option, if you don't mind temporarily altering your DOM, is to extract your HTML into a string and search for the attributes via RegExp. When you find the attributes, you could append a "needle" in the DOM so that you can use jQuery to select the elements.

Here is a working concept (run with console open):

http://jsfiddle.net/skylar/N43Bm/

Code:

$.fn.extend({

    findAttributes: function(attribute) {

        var attributeFinder = new RegExp(attribute + '(.+)="', "gi");
        var elementHTML = this.html().replace(attributeFinder, "data-needle='pin' "+attribute+"$1=\"");

        this.html(elementHTML);

        return this.find("[data-needle=pin]").removeAttr('data-needle');
    }

});

console.log($("body").findAttributes('mce_'));

Note: my regexp is not great. You'll have to take better care than I have in this example.

How to get all HTML attributes which start with something (the attribute names, not their values!)

Tags:

javascript

dom

selector

AsGoodAsItGets

3 Answers

Joseph

Rahen Rangan

Skylar Anderson

Recent Activity

Donate For Us