Comment obtenir un élément par innerText

Question

Comment obtenir une balise dans une page HTML, si je sais ce que contient la balise de texte.Par exemple.:

<a ...>SearchingText</a>

Answer 1

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`.

Answer 2

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 d'un élément contenant un texte en utilisant cette XPath:

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

Answer 3

Vous pouvez utiliser jQuery : Sélecteur contient ()

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

Answer 4

En utilisant la syntaxe la plus moderne disponible pour le moment, il peut être fait 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))

Bien sûr, les navigateurs existants ne seront pas gérer cela, mais vous pouvez utiliser un transpiler si le support existant est nécessaire.

Answer 5

Même si cela fait un certain temps et que vous avez déjà (depuis longtemps) accepté une réponse, j'ai pensé 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>

Bien sûr, une méthode un peu plus simple est encore la suivante :

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>

Les références:

• Array.prototype.filter().
• Array.prototype.forEach().
• Array.prototype.slice().
• Conditionnel (« ternaire », assessment ? ifTrue : ifFalse) opérateur.
• Function.prototype.call().
• typeof opérateur.

Answer 6

Approche fonctionnelle. Retourne un tableau de tous les éléments correspondants et des espaces autour trims tout en vérifiant.

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

Utilisation

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

si vous cherchez à travers différentes balises à savoir la durée ou le bouton

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

La balise de valeur par défaut = 'a' aura besoin de Babel pour les anciens navigateurs

Answer 7

Je trouve l'utilisation de la nouvelle syntaxe un peu plus court par rapport aux autres répondent. 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

Answer 8

Il suffit de passer votre sous-chaîne dans la ligne suivante:

externe HTML

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

intérieur HTML

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

Answer 9

Bien qu'il soit possible d'obtenir par le texte intérieur, je pense que vous dirigez dans le mauvais sens. Est-ce que la chaîne intérieure générée dynamiquement? Si oui, vous pouvez donner à l'étiquette une classe ou - mieux encore - ID lorsque le texte va là-dedans. Si elle est statique, il est encore plus facile.

Answer 10

Je pense que vous aurez besoin d'être un peu plus précis pour nous à vous aider.

1. Comment vous trouvez 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, mais vous auriez à courir à travers un réseau), vous pouvez exécuter une expression régulière pour le trouver. En utilisant la 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 alors accéder aux attributs de l'élément retourné par le DOM: https://developer.mozilla.org /en/DOM/element.1 .

Answer 11

Je l'ai juste besoin d'un moyen d'obtenir l'élément qui contient un texte spécifique et voici ce que je suis venu avec.

Utilisez document.getElementsByInnerText() pour obtenir plusieurs éléments (plusieurs éléments pourraient avoir exactement le même texte), et utiliser document.getElementByInnerText() pour obtenir un seul élément (premier match).

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

Vous pourriez avoir besoin de ruser afin de le rendre cross-browser ou répondre à vos besoins.

Je pense que le code est explicite, alors je vais le laisser tel qu'il est.

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>

Answer 12

Version jQuery:

$('a').each(function(i) {
    var $element = $(this)[i];

    if( $element.text() == 'Your Text' ) {
        /** Do Something */
    }
});