web-dev-qa-db-fra.com

Comment obtenir un élément par innerText

Comment obtenir un tag dans une page html, si je sais quelle balise de texte contient

<a ...>SearchingText</a>
javascriptjqueryinnertext
85
dublicator

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`.
92
August Lilleaas

Vous pouvez utiliser xpath pour accomplir cela

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')]";
79
carlin.scott

Vous pouvez utiliser jQuery : includes () Selector

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

En utilisant la syntaxe la plus moderne disponible à ce jour, 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 hérités ne gèrent pas cela, mais vous pouvez utiliser un transpiler si un support hérité est requis.

20
user1106925

Bien que cela fait un certain temps et que vous ayez déjà accepté une réponse (il y a longtemps), je pensais proposer une approche actualisée:

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>

Bien sûr, un moyen un peu plus simple reste:

var textProp = 'textContent' in document ? 'textContent' : 'innerText';

// directly converting the found 'a' elements into an Array,
// then iterating over that array with Array.prototype.forEach():
[].slice.call(document.querySelectorAll('a'), 0).forEach(function(aEl) {
  // if the text of the aEl Node contains the text 'link1':
  if (aEl[textProp].indexOf('link1') > -1) {
    // we update its style:
    aEl.style.fontSize = '2em';
    aEl.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>

Références:

13
David Thomas

Approche fonctionnelle. Renvoie un tableau de tous les éléments correspondants et supprime les espaces lors de la vérification.

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 à travers différentes balises, par exemple span ou bouton

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

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

10
Pawel

J'ai trouvé l'utilisation de la nouvelle syntaxe un peu plus courte par rapport aux autres réponses. Alors voici 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

4
Amin NAIRI

Bien qu'il soit possible de passer par le texte intérieur, je pense que vous vous dirigez dans la mauvaise direction. Cette chaîne interne est-elle générée dynamiquement? Si tel est le cas, vous pouvez attribuer à la balise une classe ou, mieux encore, un identifiant lorsque le texte y est inséré. Si c'est statique, c'est encore plus facile.

1
Zack Marrapese

Je pense que vous devrez être un peu plus précis pour que nous puissions 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, si ce n'est pas le cas, mais vous devez parcourir un tableau), vous pouvez exécuter une expression régulière pour le trouver. L'utilisation de preg_match () de PHP fonctionnerait pour cela.

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

0
Jeff Meyers

J'ai juste besoin d'un moyen d'obtenir l'élément qui contient un texte spécifique et c'est ce que j'ai proposé.

Utilisez document.getElementsByInnerText() pour obtenir plusieurs éléments (plusieurs éléments peuvent avoir le même texte exact) et utilisez document.getElementByInnerText() pour obtenir un seul élément (première correspondance).

En outre, vous pouvez localiser la recherche en utilisant un élément (par exemple, someElement.getElementByInnerText()) au lieu de document.

Vous aurez peut-être besoin de le modifier afin de le rendre compatible avec tous les navigateurs ou de répondre à vos besoins.

Je pense que le code est explicite, alors je vais le laisser tel quel.

HTMLElement.prototype.getElementsByInnerText = function (text, escape) {
    var nodes  = this.querySelectorAll("*");
    var matches = [];
    for (var i = 0; i < nodes.length; i++) {
        if (nodes[i].innerText == text) {
            matches.Push(nodes[i]);
        }
    }
    if (escape) {
        return matches;
    }
    var result = [];
    for (var i = 0; i < matches.length; i++) {
        var filter = matches[i].getElementsByInnerText(text, true);
        if (filter.length == 0) {
            result.Push(matches[i]);
        }
    }
    return result;
};
document.getElementsByInnerText = HTMLElement.prototype.getElementsByInnerText;

HTMLElement.prototype.getElementByInnerText = function (text) {
    var result = this.getElementsByInnerText(text);
    if (result.length == 0) return null;
    return result[0];
}
document.getElementByInnerText = HTMLElement.prototype.getElementByInnerText;

console.log(document.getElementsByInnerText("Text1"));
console.log(document.getElementsByInnerText("Text2"));
console.log(document.getElementsByInnerText("Text4"));
console.log(document.getElementsByInnerText("Text6"));

console.log(document.getElementByInnerText("Text1"));
console.log(document.getElementByInnerText("Text2"));
console.log(document.getElementByInnerText("Text4"));
console.log(document.getElementByInnerText("Text6"));
<table>
    <tr>
        <td>Text1</td>
    </tr>
    <tr>
        <td>Text2</td>
    </tr>
    <tr>
        <td>
            <a href="#">Text2</a>
        </td>
    </tr>
    <tr>
        <td>
            <a href="#"><span>Text3</span></a>
        </td>
    </tr>
    <tr>
        <td>
            <a href="#">Special <span>Text4</span></a>
        </td>
    </tr>
    <tr>
        <td>
            Text5
            <a href="#">Text6</a>
            Text7
        </td>
    </tr>
</table>

0
akinuri

Passez simplement votre substring dans la ligne suivante:

HTML externe 

document.documentElement.outerHTML.includes('substring')

HTML intérieur 

document.documentElement.innerHTML.includes('substring')
0
Cybernetic