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，但使用*=代替^=并没有帮助。我知道^=等同于'以'开头，但*=意味着什么？

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

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中的区分大小写

2 个答案:

段