在 querySelectorAll 中忽略大小写敏感

Posted 2023-05-09

【中文标题】在 querySelectorAll 中忽略大小写敏感

【英文标题】：Ignoring case sensitiveness in querySelectorAll

【发布时间】：2016-11-18 20:09:22

【问题描述】：

我有这个代码：

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

【问题讨论】：

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

querySelector* 方法尊重/使用 CSS 选择器：developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

【参考方案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>

【讨论】：

这个答案在几年后会有意义，但不是今天，除非提问者出于某种原因打算仅支持 Chrome 和 Firefox（从 this follow-up question 判断，似乎并不就是这样 - 但这并不能解释他们为什么接受这个答案）。

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

@BoltClock 版本 79 (2020-01) 和 Safari 上的不区分大小写限定符 is supported 从版本 79 (2020-01) 开始。无论如何，您链接的答案在 IE 上不起作用，因为 IE 不支持document.querySelectorAll()。

@zrhoffman：正如预言的那样。 （我没有提到 Safari，因为 Andreas 也没有，但公平。）Edge 甚至不需要自己实现该功能 - 它通过切换到 Chromium 获得了它。该功能从未进入 EdgeHTML。正如链接问题中所讨论的，querySelectorAll() 不是问题 - 自 IE8 起就已支持它。

【参考方案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>

【讨论】：

哇。当我必须排除所有只有-javascript iframe 时，这项工作会更好:) 谢谢！

不客气，先生。 :not 派上用场了，但来自 Andreas 的那一封绝对值得写下来记住。