Buscar elemento por contenido usando JavaScript

Mientras se trata de los datos a granel, puede haber una posibilidad de ambigüedad al localizar el elemento contra el contenido contenido al acceder a él. En tal caso, revisar cada uno de los elementos se vuelve desafiante. Por ejemplo, integrando el elemento con una parte particular de contenido. En tales situaciones, encontrar elementos por contenido utilizando JavaScript ayudas para acceder a los datos convenientemente.

Este blog discutirá los enfoques para encontrar elementos por contenido utilizando JavaScript.

Cómo encontrar elementos por contenido usando JavaScript?

Para encontrar elementos por contenido usando JavaScript, los siguientes enfoques están en combinación con el "QuerySelectorAll ()Método "y el"contenido del texto" propiedad:

• "Incluye ()" método.
• "de()" y "fósforo()" métodos.

Enfoque 1: Encuentre el elemento por contenido en JavaScript usando el método Incluye ()

El "QuerySelectorAll ()El método "obtiene todos los elementos que coinciden con un selector (s) CSS y devuelven una lista de nodos. Mientras que TextContent proporciona el contenido de texto del nodo en particular, y el método incluido () devuelve "verdadero"Si la cadena especificada se incluye en una cadena en particular.

Estos enfoques se pueden aplicar en combinación para acceder al "div"Elemento, acceda al texto incluido y agregue el elemento a una matriz nula en la condición satisfecha.

Sintaxis

documento.QuerySelectorAll (selectores)

En la sintaxis dada:

• "selectores"Corresponde a uno o más de un selector CSS.

cadena.Incluye (valor)

Aquí, el método incluido () buscará lo dado "valor"En el Asociado"cadena".

Ejemplo

Pasemos por la siguiente manifestación:

Pista de Linux

Realice los siguientes pasos que se dan en el fragmento de código anterior:

• En el primer paso, especifique el "div"Elemento tiene el contenido indicado en forma de texto.
• En el código JS, inicialice el valor de cadena que debe coincidir para el contenido de texto dentro del "div" elemento.
• Después de eso, declare una matriz vacía llamada "incluir".
• En el siguiente paso, aplique el "QuerySelectorAll ()Método "y el"por ... de"Loop para buscar el"div"Elemento por etiqueta e iterar a través de él, respectivamente.
• Ahora, aplique el "contenido del texto"Propiedad y la"Incluye ()"Método en combinación para verificar si el valor de cadena inicializado se incluye en el"div" elemento.
• Si es así, el elemento se agregará al creado "nuloArray a través del "empujar()" método.

Producción

De la salida anterior, es evidente que el elemento se empuja en la matriz sobre la condición satisfecha.

Enfoque 2: Encuentre elemento por contenido en JavaScript usando Array.Métodos de () y Match ()

El "Formación.de()El método "devuelve una matriz de un objeto que tiene la longitud de la matriz como su parámetro. El "fósforo()El método "coincide con una cadena con una expresión regular. Estos métodos se pueden implementar también para acceder al elemento haciendo coincidir el contenido del valor de cadena particular con el contenido de texto del elemento.

Sintaxis

Formación.Desde (objeto, mapa, valor)

En la sintaxis dada anteriormente:

• "objeto"Señala el objeto para convertirse en una matriz.
• "mapa"Corresponde a la función de mapa que debe asignarse en cada elemento.
• "valor"Es el valor que se utilizará como" esto "para la función de mapa.

cadena.Partido (partido)

En la sintaxis dada:

• "fósforo"Se refiere al valor requerido.

Ejemplo

Vamos a ver el ejemplo dado a continuación:

Estas son cosas relacionadas con JavaScript

Realice los siguientes pasos en las líneas de código anteriores:

• Del mismo modo, incluya el "

  " elemento.

• En el código JavaScript, de manera similar, inicialice el valor de cadena establecido.
• En el siguiente paso, aplique el "de()"Método que tiene el"QuerySelectorAll ()El método "como su parámetro, que obtendrá el"

  El elemento de su etiqueta, y el método anterior convertirá el resultado en una matriz.

• Después de eso, inicializa un "nulo"Array. Además, aplique el "encontrar()Método para iterar a través de la matriz devuelta en el paso anterior.
• El "contenido del texto"Propiedad y la"fósforo()El método "coincidirá con el valor de la cadena especificada con el texto contenido en el elemento accedido.
• Sobre la condición satisfecha, el "

  El elemento se agregará a la matriz nulo creada, como se discutió anteriormente.

Producción

La salida anterior indica que se cumple el requisito deseado.

Conclusión

El combinado "QuerySelectorAll ()Método "y el"contenido del texto"La propiedad se puede aplicar con el"Incluye ()"Método o"Formación.de()" y "fósforo()"Métodos para encontrar elementos por contenido utilizando JavaScript. Este tutorial explicó cómo encontrar elementos por contenido usando JavaScript con la ayuda de diferentes ejemplos.