Comment obtenir un élément par innerText

Comment obtenir une étiquette en page html, si je sais quelle étiquette de texte contient. Par exemple:

<a ...>SearchingText</a> 

Vous devrez traverser à la main.

 var aTags = document.getElementsByTagName("a"); var searchText = "SearchingText"; var found; for (var i = 0; i < aTags.length; i++) { if (aTags[i].textContent == searchText) { found = aTags[i]; break; } } // Use `found`. 

Vous pouvez utiliser xpath pour y parvenir

 var xpath = "a[text()='SearchingText']"; var matchingElement = document.evaluate(xpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue; 

Vous pouvez également rechercher un élément contenant du texte en utilisant ce xpath:

 var xpath = "a[contains(text(),'Searching')]"; 

Bien que ce soit déjà un certain temps, et vous avez déjà accepté une réponse depuis longtemps, je pensais proposer une approche mise à jour:

 function findByTextContent(needle, haystack, precise) { // needle: String, the string to be found within the elements. // haystack: String, a selector to be passed to document.querySelectorAll(), // NodeList, Array - to be iterated over within the function: // precise: Boolean, true - searches for that precise string, surrounded by // word-breaks, // false - searches for the string occurring anywhere var elems; // no haystack we quit here, to avoid having to search // the entire document: if (!haystack) { return false; } // if haystack is a string, we pass it to document.querySelectorAll(), // and turn the results into an Array: else if ('string' == typeof haystack) { elems = [].slice.call(document.querySelectorAll(haystack), 0); } // if haystack has a length property, we convert it to an Array // (if it's already an array, this is pointless, but not harmful): else if (haystack.length) { elems = [].slice.call(haystack, 0); } // work out whether we're looking at innerText (IE), or textContent // (in most other browsers) var textProp = 'textContent' in document ? 'textContent' : 'innerText', // creating a regex depending on whether we want a precise match, or not: reg = precise === true ? new RegExp('\\b' + needle + '\\b') : new RegExp(needle), // iterating over the elems array: found = elems.filter(function(el) { // returning the elements in which the text is, or includes, // the needle to be found: return reg.test(el[textProp]); }); return found.length ? found : false;; } findByTextContent('link', document.querySelectorAll('li'), false).forEach(function(elem) { elem.style.fontSize = '2em'; }); findByTextContent('link3', 'a').forEach(function(elem) { elem.style.color = '#f90'; }); 
 <ul> <li><a href="#">link1</a> </li> <li><a href="#">link2</a> </li> <li><a href="#">link3</a> </li> <li><a href="#">link4</a> </li> <li><a href="#">link5</a> </li> </ul> 

Vous pouvez utiliser jQuery : contient () Sélecteur

 var element = $( "a:contains('SearchingText')" ); 

En utilisant la syntaxe la plus moderne disponible pour le moment, cela peut se faire très proprement comme ceci:

 for (const a of document.querySelectorAll("a")) { if (a.textContent.includes("your search term")) { console.log(a.textContent) } } 

Ou avec un filtre séparé:

 [...document.querySelectorAll("a")] .filter(a => a.textContent.includes("your search term")) .forEach(a => console.log(a.textContent)) 

Naturellement, les navigateurs existants ne traiteront pas cela, mais vous pouvez utiliser un transpiler si un support existant est nécessaire.

Approche fonctionnelle. Renvoie le tableau de tous les éléments correspondants et recouvre les espaces autour tout en vérifiant.

 function getElementsByText(str, tag = 'a') { return Array.prototype.slice.call(document.getElementsByTagName(tag)).filter(el => el.textContent.trim() === str.trim()); } 

Usage

 getElementsByText('Text here'); // second parameter is optional tag (default "a") 

Si vous regardez différents tags, c.-à-d. Span ou bouton

 getElementsByText('Text here', 'span'); getElementsByText('Text here', 'button'); 

Le tag de valeur par défaut = 'a' nécessitera Babel pour les anciens navigateurs

Bien qu'il soit possible de passer par le texte interne, je pense que vous vous diriger dans le mauvais sens. Cette chaîne intérieure est-elle générée dynamiquement? Si c'est le cas, vous pouvez donner à la balise une classe ou – mieux encore – ID lorsque le texte est entré. Si c'est statique, c'est encore plus facile.

Je pense que vous devrez être un peu plus précis pour nous de vous aider.

  1. Comment trouvez-vous cela? Javascript? PHP? Perl?
  2. Pouvez-vous appliquer un attribut ID à la balise?

Si le texte est unique (ou vraiment, s'il ne l'est pas, mais que vous devriez exécuter un tableau), vous pouvez exécuter une expression régulière pour le trouver. L'utilisation de PHP preg_match () fonctionnerait pour cela.

Si vous utilisez Javascript et que vous pouvez insérer un attribut ID, vous pouvez utiliser getElementById ('id'). Vous pouvez alors accéder aux attributs de l'élément retourné via le DOM: https://developer.mozilla.org/fr/DOM/element.1 .

J'ai trouvé l'utilisation de la nouvelle syntaxe un peu plus courte par rapport aux autres réponses. Voici donc ma proposition:

 const callback = element => element.innerHTML == 'My research' const elements = Array.from(document.getElementsByTagName('a')) // [a, a, a, ...] const result = elements.filter(callback) console.log(result) // [a] 

JSfiddle.net