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