Trouver un élément par contenu à l'aide de JavaScript

Tout en traitant les données en vrac, il peut y avoir une possibilité d'ambiguïté pour localiser l'élément contre le contenu contenu tout en y accédant. Dans un tel cas, la vérification de chacun des éléments devient difficile. Par exemple, l'intégration de l'élément avec une partie particulière de contenu. Dans de telles situations, trouver des éléments par contenu utilisant JavaScript aide à accéder aux données.

Ce blog discutera des approches pour trouver des éléments par contenu à l'aide de JavaScript.

Comment trouver des éléments par contenu en utilisant JavaScript?

Pour trouver des éléments par contenu à l'aide de JavaScript, les approches suivantes sont en combinaison avec le «queySelectorall ()"Méthode et le"continent textuel" propriété:

• "comprend ()" méthode.
• "depuis()" et "correspondre()«Méthodes.

Approche 1: Trouver un élément par contenu en javascript en utilisant la méthode incluse ()

Le "queySelectorall ()»La méthode récupère tous les éléments correspondant à un (s) sélecteur (s) CSS et renvoie une liste de nœuds. Tandis que le textContent donne le contenu texte du nœud particulier et que la méthode incluse () renvoie "vrai«Si la chaîne spécifiée est incluse dans une chaîne particulière.

Ces approches peuvent être appliquées en combinaison pour accéder au «div»Élément, accédez au texte inclus et ajoutez l'élément à un tableau nul sur la condition satisfaite.

Syntaxe

document.QuerySelectorall (sélecteurs)

Dans la syntaxe donnée:

• "sélecteurs»Correspond à un ou plusieurs sélecteur CSS.

chaîne.Comprend (valeur)

Ici, la méthode incluse () recherchera la donnée "valeur"Dans l'associé"chaîne".

Exemple

Passons par la démonstration suivante:

Indice de linux

Effectuez les étapes suivantes comme indiqué dans l'extrait de code ci-dessus:

• Dans la première étape, spécifiez le «div”Élément ayant le contenu indiqué sous forme de texte.
• Dans le code JS, initialisez la valeur de chaîne qui doit être adaptée au contenu texte dans le «div" élément.
• Après cela, déclarez un tableau vide nommé «inclure".
• Dans l'étape suivante, appliquez le «queySelectorall ()"Méthode et le"pour… de”Boucle pour récupérer le"div”Élément par balise et itération à travers, respectivement.
• Maintenant, appliquez le «continent textuel«Propriété et le«comprend ()«Méthode en combinaison pour vérifier si la valeur de chaîne initialisée est incluse dans le«div" élément.
• Si c'est le cas, l'élément sera annexé au créé "nul”Array via le«pousser()" méthode.

Sortir

À partir de la sortie ci-dessus, il est évident que l'élément est poussé dans le tableau sur la condition satisfaite.

Approche 2: Trouver un élément par contenu en javascript à l'aide du tableau.From () et Match () Méthodes

Le "Déployer.depuis()»La méthode renvoie un tableau d'un objet ayant la longueur du tableau comme paramètre. Le "correspondre()»La méthode correspond à une chaîne avec une expression régulière. Ces méthodes peuvent être implémentées de même pour accéder à l'élément en correspondant au contenu de la valeur de chaîne particulière avec le contenu texte de l'élément.

Syntaxe

Déployer.De (objet, carte, valeur)

Dans la syntaxe donnée ci-dessus:

• "objet»Porte l'objet à convertir en un tableau.
• "carte»Correspond à la fonction de carte qui doit être mappée sur chaque élément.
• "valeur«La valeur est-elle à utiliser comme« ceci »pour la fonction de carte.

chaîne.Match (match)

Dans la syntaxe donnée:

• "correspondre»Fait référence à la valeur à rechercher.

Exemple

Présentation de l'exemple ci-dessous:

Ce sont des trucs liés à JavaScript

Effectuez les étapes suivantes dans les lignes de code ci-dessus:

• De même, incluez le «

  " élément.

• Dans le code JavaScript, de même, initialisez la valeur de chaîne indiquée.
• Dans l'étape suivante, appliquez le «depuis()«Méthode ayant le«queySelectorall ()«Méthode comme paramètre, qui va récupérer le«

  »Élément par sa balise, et l'ancienne méthode convertira le résultat en un tableau.

• Après cela, initialisez un «nul" déployer. Appliquez également le «trouver()«Méthode pour itérer dans le tableau renvoyé à l'étape précédente.
• Le "continent textuel«Propriété et le«correspondre()»La méthode correspondra à la valeur de la chaîne spécifiée avec le texte contenu dans l'élément accessible.
• Sur l'état satisfait, le «

  «L'élément sera annexé au tableau nulle créé, comme discuté précédemment.

Sortir

La sortie ci-dessus indique que l'exigence souhaitée est remplie.

Conclusion

Le combiné «queySelectorall ()"Méthode et le"continent textuel«La propriété peut être appliquée avec le«comprend ()«Méthode ou«Déployer.depuis()" et "correspondre()»Méthodes pour trouver des éléments par contenu à l'aide de JavaScript. Ce tutoriel a expliqué comment trouver des éléments par contenu en utilisant JavaScript à l'aide de différents exemples.