Question

我试图提取类名称以＃34; userName_XXX＆＃34;

开头的所有类名

目前我的代码有点像这样。

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

返回的arr包含所有用户类。我的问题是，在某些情况下，类不遵循确切的情况。

所以我会遇到这样的课程＆＃34; username_XXX＆＃34;它不会因为它区分大小而不会选择它。任何人都可以帮助我或指出我正确的方向吗？

编辑：尝试了这一点。现在还好运。 http://jsperf.com/case-insensitive-queryselectorall/2

Answer 1

试试这个：

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

从这里采取：Ignoring case sensitiveness in querySelectorAll

至少Chrome和Firefox在选择器中支持不区分大小写的限定符i（在此处定义：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>

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

2 个答案: