如何忽略 document.querySelectorAll();区分大小写答案

【问题标题】：How to ignore document.querySelectorAll(); case sensitive如何忽略 document.querySelectorAll();区分大小写
【发布时间】：2014-10-01 20:41:51
【问题描述】：

我正在尝试提取类名以“userName_XXX”开头的所有类名

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

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

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

所以我会遇到像“username_XXX”这样的类，它不会选择它，因为它区分大小写。任何人都可以在这里帮助我或指出正确的方向吗？

编辑：尝试遵循此。现在还是运气。 http://jsperf.com/case-insensitive-queryselectorall/2

【问题讨论】：

为什么你的课程有两种不同的拼写方式？
@Seth 不幸的是，这是以前的开发人员在构建网站时决定做的事情 =/
为什么不document.querySelectorAll('div[class^=userName_], div[class^=username_]')？
@Sergio 试过了。由于某种原因没有运气：S
如果这是我的问题，我会寻找最快的方法来修复损坏的页面，而不是尝试嵌入错误代码的解决方法。

标签： javascript html

【解决方案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>

【讨论】：

有没有办法不将 userName_ 之后的数字数量设置为 3？并让它充满活力？
是的。 “XXX”到底是什么意思？你说这是一个数字？那么，它应该匹配“username_abc”吗？

【解决方案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>

【讨论】：