All geek questions in one place

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

I would like to get all the elements / nodes on an HTML page containing attributes that start with something (again, attribute names start with something, not their values!). For example, TinyMCE tends to add custom attributes to the elements it stores, such as "mce_style" , "mce_href" , "mce_bogus" , etc. I would like to have something like a CSS3 selector for attribute values, [attr^="mce_"] , but not for values, attribute names .

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

Please do not give me answers to TinyMCE, I am sure that there is a flag that would prevent TinyMCE from saving these attributes, but the question is general.

+6
source share
4 answers

here's a simple demo to find all elements containing an attribute starting with mce_ . some clarification may be required.

 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())​
+5
source

Try the following:

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

` USE

 // 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>
+1
source

One option, if you don't mind temporarily changing your DOM, is to extract the HTML into a string and search for attributes through RegExp. When you find the attributes, you can add a “needle” to the DOM so you can use jQuery to select elements.

Here is a working concept (runs from the console):

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

the 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 regex is not very large. You will need to take care of how I am in this example.

+1
source

Try the following: (I tried putting * instead of the a tag, but it colored all the elements, including those that don't have the mce_style attribute)

 a[mce_style] { color : red; }​

Demo: http://jsfiddle.net/Tcdmb/

Additional information: https://developer.mozilla.org/en/CSS/Attribute_selectors

-1
source

Source: https://habr.com/ru/post/914113/

More articles:


All Articles