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

我参考了这里，但是使用*=代替^=并没有帮助。我知道^=表示'以...开头'，但是*=是什么意思？

如何编写一个通用的querySelectorAll，适用于所有这种javascript排列的情况？

- verstappen_doodle

---

*= 表示包含文本，例如在 jQuery 文档中：http://api.jquery.com/attribute-contains-selector/ - moped

querySelector* 方法使用 CSS 选择器进行匹配：https://developer.mozilla.org/zh-CN/docs/Web/CSS/Attribute_selectors - Andreas

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>

- Andreas

---

除非提问者打算出于某种原因仅支持Chrome和Firefox（根据这个后续问题来看不是这种情况，但这并不能解释为什么他们接受了这个答案），否则这个回答几年后才有意义，而不是今天。 - BoltClock

@BoltClock 我在只测试了Chrome后很快就接受了它，但是15天后才知道它在IE/Edge中不起作用。现在将在答案中进行编辑，引用后续问题中的答案。 - verstappen_doodle

@BoltClock，大小写不敏感的限定符在Edge 79版本（2020-01）和Safari 9版本（2015-09）之后得到支持。你提供的答案在IE上也无法工作，因为IE不支持document.querySelectorAll()。 - zrhoffman

@zrhoffman：如预言般。 （我没有提到Safari，因为Andreas也没有提到，但是公平的说。）Edge甚至不需要自己实现该功能-它通过切换到Chromium获得了该功能。 该功能从未出现在EdgeHTML中。 如链接问题中所讨论的那样，querySelectorAll（）不是问题-自IE8以来就一直受到支持。 - BoltClock

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>

- zer00ne

---

哇，当我需要排除所有只包含“javascript”的iframe时，这个工作效果要好得多:) 谢谢！ - verstappen_doodle

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - zer00ne