web-dev-qa-db-fra.com

Puis-je utiliser un sélecteur d'attribut pour CONTAINS dans queryselector ()?

Je voudrais sélectionner un élément basé sur une sous-chaîne d'attribut href.

J'ai posté une question récemment où j'ai reçu une réponse basée sur "commence par":

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

Mais en fait, la seule constante de page en page sera "lang=" dans l'attribut href. Donc /email_check? est spécifique à la page, je ne peux donc pas utiliser cette variable sur toutes les pages.

Est-il possible de modifier mon sélecteur pour renvoyer le contenu textuel de tout <a> élément avec la sous-chaîne "lang=" à l'intérieur?

javascriptcss-selectors
20
Doug Fir

Tous les sélecteurs sont documentés dans Présentation des sélecteurs W3C .

Celui dont vous avez besoin est

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

E[foo*="bar"]

Un élément E dont la valeur d'attribut foo contient la sous-chaîne bar.

28
Sebastian Simon

Considérez l'élément HTML suivant:

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

Vous pouvez obtenir le premier élément d'ancrage qui a un attribut href contenant 'lang=' et existe en tant que descendant d'un élément avec un id équivalent à 'utility-menu' en utilisant l'une des options suivantes:

// 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='))
1
Grant Miller