Javascript .querySelector trouver <div> par innerTEXT

Question

Comment trouver DIV avec certains textes? Par exemple:

 <div>
SomeText, text continues.
</div>
 

Essayer d'utiliser quelque chose comme ça:

 var text = document.querySelector('div[SomeText*]').innerTEXT;
alert(text);
 

Mais bien sûr, cela ne fonctionnera pas. Comment puis-je le faire?

Answer 1

OP question est au sujet de la plaine de JavaScript et pas jQuery. Bien qu'il existe beaucoup de réponses et je l'aime @Pawan Nogariya réponse, veuillez cocher cette alternative de l'extérieur.

Vous pouvez utiliser XPATH en JavaScript. Plus d'infos sur le MDN article ici.

L' document.evaluate() méthode permet d'évaluer une requête XPATH/expression. De sorte que vous pouvez passer des expressions XPATH là, traverser dans le document HTML et de localiser l'élément souhaité.

Dans XPATH vous pouvez sélectionner un élément, par le nœud de texte comme suit, lequel devient l' div qui a le texte suivant nœud.

//div[text()="Hello World"]

Pour obtenir un élément qui contient du texte, utilisez les éléments suivants:

//div[contains(., 'Hello')]

L' contains() méthode XPATH prend un noeud comme premier paramètre et le texte à rechercher comme deuxième paramètre.

Cochez cette débarquez ici, c'est un exemple de l'utilisation de XPATH en JavaScript

Voici un extrait de code:

var headings = document.evaluate("//h1[contains(., 'Hello')]", document, null, XPathResult.ANY_TYPE, null );
var thisHeading = headings.iterateNext();

console.log(thisHeading); // Prints the html element in console
console.log(thisHeading.textContent); // prints the text content in console

thisHeading.innerHTML += "<br />Modified contents";  

Comme vous pouvez le voir, je peux récupérer le code HTML de l'élément et de la modifier comme je les aime.

Answer 2

Vous pouvez utiliser cette jolie solution la plus simple:

Array.from(document.querySelectorAll('div'))
  .find(el => el.textContent === 'SomeText, text continues.');

1. L' Array.from vous permet de convertir la NodeList à un tableau (il y a plusieurs méthodes pour ce faire, comme la propagation de l'opérateur ou de la tranche)

2. Le résultat maintenant un tableau permet l'utilisation de l' Array.find méthode, vous pouvez le mettre dans n'importe quel prédicat. Vous pouvez aussi vérifier les textContent avec une regex ou ce que vous voulez.

Notez que Array.from et Array.find sont ES2015 fonctionnalités. Te être compatible avec les anciens navigateurs comme IE10 sans transpiler:

Array.prototype.slice.call(document.querySelectorAll('div'))
  .filter(function (el) {
    return el.textContent === 'SomeText, text continues.'
  })[0];

Answer 3

Puisque tu l'as demandé en javascript, tu peux avoir quelque chose comme ça

 function contains(selector, text) {
  var elements = document.querySelectorAll(selector);
  return Array.prototype.filter.call(elements, function(element){
    return RegExp(text).test(element.textContent);
  });
}
 

Et puis appelez comme ça

 contains('div', 'sometext'); // find "div" that contain "sometext"
contains('div', /^sometext/); // find "div" that start with "sometext"
contains('div', /sometext$/i); // find "div" that end with "sometext", case-insensitive
 

Answer 4

Vous feriez mieux de voir si vous avez un élément parent de la div que vous interrogez. Si c'est le cas, récupérez l'élément parent et effectuez element.querySelectorAll("div") . Une fois que vous avez obtenu les nodeList appliquez un filtre sur la propriété innerText . Supposons qu'un élément parent de la div que nous interrogeons ait id de container . Vous pouvez normalement accéder au conteneur directement à partir de l'id, mais procédons correctement.

 var conty = document.getElementById("container"),
     divs = conty.querySelectorAll("div"),
    myDiv = [...divs].filter(e => e.innerText == "SomeText");
 

Alors c'est tout.

Answer 5

Si vous ne voulez pas utiliser jquery ou quelque chose comme ça, essayez ceci:

 function findByText(rootElement, text){
    var filter = {
        acceptNode: function(node){
            // look for nodes that are text_nodes and include the following string.
            if(node.nodeType === document.TEXT_NODE && node.nodeValue.includes(text)){
                 return NodeFilter.FILTER_ACCEPT;
            }
            return NodeFilter.FILTER_REJECT;
        }
    }
    var nodes = [];
    var walker = document.createTreeWalker(rootElement, NodeFilter.SHOW_TEXT, filter, false);
    while(walker.nextNode()){
       //give me the element containing the node
       nodes.push(walker.currentNode.parentNode);
    }
    return nodes;
}

//call it like
var nodes = findByText(document.body,'SomeText');
//then do what you will with nodes[];
for(var i = 0; i < nodes.length; i++){ 
    //do something with nodes[i]
} 
 

Une fois que vous avez les nœuds dans un tableau contenant le texte, vous pouvez faire quelque chose avec eux. Comme alerte chacun ou imprimer sur console. Un inconvénient est que cela ne capturera pas nécessairement les divs en tant que tel, mais que le parent du textnode contenant le texte recherché sera saisi.