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

Answer 2

使用 :not 伪选择器并定位所有不包含单词 http 的锚点。这样你只收集 JS 链接。代码段中混入了一些正常的锚点，它们已被过滤掉。

片段

var NodeList = document.querySelectorAll('a:not([href*="http"]');

console.log(NodeList);

<a href="javaSCRIPT:alert('something1')">Click</a>
<a href="http://example.com/">Click</a>
<a href="javaSCRIPT:alert('something1')">Click</a>
<a href="JaVaScRIPt:prompt('something2')">Click</a>

<a href="https://google.com">Click</a>
<a href="JAVAscrIPt:prompt('something4')">Click</a>

忽略 querySelectorAll 中的区分大小写

Ignoring case sensitiveness in querySelectorAll

html

javascript

anchor

selectors-api

片段