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

Question

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

我最近发布了一个问题,我收到了一个基于"开头"的答案:

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

但实际上,页面之间的唯一常量将"lang="在href属性中.所以/email_check?页面是特定的,所以我不能在al页面上使用这个变量.

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

Answer 1

所有选择器都记录在W3C选择器概述中.

你需要的是

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

E[foo*="bar"]

属性值包含子字符串的E元素.foobar

Answer 2

考虑以下 HTML 元素：

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

您可以获得第一个锚元素，该元素的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='))