忽略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.

但是,我有不同的字母大小写的HTML文本javascript.也就是说,看下面的代码:

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

我提到了这个,但使用*=而不是^=没有帮助.我知道^=等同于'开头',但是什么*=意思？

如何querySelectorAll为所有这些排列编写通用的javascript？

Answer 1

至少Chrome和Firefox支持i选择器中的大小写不敏感限定符(在此处定义:https://drafts.c​​sswg.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>