我可以在 queryselector() 中为 CONTAINS 使用属性选择器吗？答案

【问题标题】：Can I use an attribute selector for CONTAINS in queryselector()?我可以在 queryselector() 中为 CONTAINS 使用属性选择器吗？
【发布时间】：2015-10-24 18:02:43
【问题描述】：

我想根据 href 属性的子字符串选择一个元素。

我最近发布了一个问题，我收到了一个基于“开始于”的答案：

document.querySelector('#utility-menu a[href^="/email_check?lang="').textContent.trim();

但实际上，从一个页面到另一个页面的唯一常量是 href 属性中的"lang="。所以/email_check? 是特定于页面的，所以我不能在所有页面上使用这个变量。

是否可以修改我的选择器以返回任何带有子字符串 "lang=" 的 <a> 元素的 textContent？

【问题讨论】：

标签： javascript css-selectors

【解决方案1】：

所有 CSS 选择器都记录在 MDN 中，并在 W3C CSSWG Selectors Level 4 overview¹ (Archived link) 中指定。

你需要的是

#utility-menu a[href*="lang="]

Pattern Represents

E[foo*="bar"] An E element whose foo attribute value contains the substring bar.

Pattern	Represents
`E[foo*="bar"]`	An `E` element whose `foo` attribute value contains the substring `bar`.

¹：CSSWG 目前的 CSS 选择器模块工作是选择器级别 4。并非所有浏览器都支持其所有功能。 4 级草案包括从 1 级到 4 级的所有内容。观看“级别”表列。今天的浏览器至少支持 3 级，但请查看compatibility tables on MDN 确定。

【讨论】：

【解决方案2】：

考虑以下 HTML 元素：

<div id="utility-menu">
  <a href="/email_check?lang=en-US">Hello, world!</a>
</div>

您可以使用以下选项之一获取第一个anchor element，该href 属性包含'lang='，并且作为id 等效于'utility-menu' 的元素的后代存在：

// Using the [attr*=value] selector (best option)
document.querySelector('#utility-menu a[href*="lang="]')

// Using the find() method (alternative option)
[...document.querySelectorAll('#utility-menu a[href]')].find(e => e.href.includes('lang='))

【讨论】：