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 e 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.

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 e 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./case-insensitive-queryselectorall/2

• javascript
• html

Share Improve this question Follow edited Oct 1, 2014 at 20:47 BaconJuice asked Oct 1, 2014 at 20:41 BaconJuiceBaconJuice 3,7791515 gold badges5959 silver badges9090 bronze badges 7

• 4 Why do you have classes with two different spellings? – Seth Commented Oct 1, 2014 at 20:43
• @Seth Unfortunately this is what the previous developers decided to do while building the site =/ – BaconJuice Commented Oct 1, 2014 at 20:46
• Why not document.querySelectorAll('div[class^=userName_], div[class^=username_]') ? – Sergio Commented Oct 1, 2014 at 20:47
• @Sergio tried that. For some reason no luck :S – BaconJuice Commented Oct 1, 2014 at 20:48
• 2 If this were my problem I'd be looking for the quickest way to fix the broken pages rather than trying to embed a workaround for bad code. – Pointy Commented Oct 1, 2014 at 20:49

 |  Show 2 more ments

2 Answers 2

Sorted by: Reset to default 4

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>

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/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>