javascript - 忽略 querySelectorAll 中的区分大小写

Question

我有这个代码:

<a href="javascript:alert('something1')">Click</a>
<a href="javascript:prompt('something2')">Click</a>
<a href="javascript:alert('something3')">Click</a>
<a href="javascript:prompt('something4')">Click</a>

现在，使用 console.log(document.querySelectorAll("a[href^='javascript:prompt('],a[href^='javascript:alert(']")); 将获取所有诸如 NodeList 之类的元素。

但是，我在 javascript 中用不同大小写的字母给出了 HTML 文本。也就是看下面的代码:

<a href="javaSCRIPT:alert('something1')">Click</a>
<a href="JaVaScRIPt:prompt('something2')">Click</a>
<a href="javaSCRIpt:alert('something3')">Click</a>
<a href="JAVAscrIPt:prompt('something4')">Click</a>

我提到了 this ，但使用 *= 而不是 ^= 没有帮助。我知道 ^= 等同于 'starts with'，但是 *= 是什么意思？

我如何为 javascript 的所有此类排列编写一个通用的 querySelectorAll？

Answer 1

至少 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>