如何忽略document.querySelectorAll（）; 区分大小写

Question

I"m trying to extract all class names where the class names begin with "userName_XXX"

Currently I have a code that goes a bit like this.

var list = document.querySelectorAll("div[class^=userName_]");
var classArr = Array.prototype.map.call(list, function(div) {
    return div.className;
});

Where the returned arr holds all user classes. My issue is that there are some cases where the classes do not follow the exact case.

So I'll come across a class like this "username_XXX" and it won't pick that up because its case sensitive. Can anyone help me out here or point me in the right direction?

EDIT: Tried following this. Still now luck. http://jsperf.com/case-insensitive-queryselectorall/2

Answer 1

Try this:

 var classes = [], els = document.querySelectorAll("div[class*=userName_], div[class*=username_]"); for(var i=0; i<els.length; ++i) { var match = els[i].className.match(/(?:^|\\s)(userName_\\S{3})(?:$|\\s)/i); if(match) classes.push(match[1]); } console.log(classes); 

 <div class="userName_123">Produces "userName_123"</div> <div class="userName_1234">Produces nothing</div> <div class="username_abc">Produces "username_abc"</div> <div class="foo userName_abc bar">Produces "userName_abc"</div> 

Answer 2

Taken from here: Ignoring case sensitiveness in querySelectorAll

At least Chrome and Firefox support the case-insensitivity qualifier i in an selector (as defined in here: https://drafts.csswg.org/selectors-4/#overview )

 var divs = document.querySelectorAll('div[class^="foo" i]'); console.log(divs.length); // should be 3 :) 

 <div class="foobar">foobar</div> <div class="Foobar">Foobar</div> <div class="fOobar">fOobar</div>