How to find an Element by Content in JavaScript

# Find Element by Content using JavaScript

To find elements by content:

Use the document.querySelectorAll method to select DOM elements by tag.
Use the for...of loop to iterate over the collection.
On each iteration, check if the textContent of the element matches the expected content.

Here is the HTML for the example in the article.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>bobbyhadz.com</title>
  </head>

  <body>
    <div>Bobby Hadz</div>
    <div>One two three</div>
    <div>Apple banana kiwi</div>

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
const text = 'Bobby Hadz';

const matches = [];

for (const div of document.querySelectorAll('div')) {
  if (div.textContent.includes(text)) {
    matches.push(div);
  }
}

console.log(matches); // 👉️ [div.box]

find element by content

The code for this article is available on GitHub

We used the document.querySelectorAll method to get a NodeList that contains all the DOM elements that have a tag of div.

The next step is to use the for...of loop to iterate over the NodeList.

On each iteration, we check if the element's textContent includes the expected text. If there is a match, we push the element into the matches array.

# Find Element by Content ignoring the case

If you want to ignore the case when checking if the DOM element's content contains the specific string, convert both strings to lowercase.

index.js

Copied!
const text = 'BOBBY HADZ';

const matches = [];

for (const div of document.querySelectorAll('div')) {
  if (div.textContent.toLowerCase().includes(text.toLowerCase())) {
    matches.push(div);
  }
}

console.log(matches); // 👉️ [div.box]

find element by content ignoring the case

The code for this article is available on GitHub

By converting the element's textContent and the text we are looking for to lowercase, we are able to do a case-insensitive check.

Because the for...of loop iterates over all of the elements in the NodeList, this approach would be inefficient if you only need the first element that matches the condition.

# Find Element by Content using `Array.find()`

This is a four-step process:

Use the document.querySelectorAll method to select elements by tag.
Convert the result to an array using the Array.from() method.
Use the find() method to iterate over the array.
On each iteration, check if the element's content contains the string.

index.js

Copied!
const text = 'Bobby Hadz';

const elements = Array.from(document.querySelectorAll('div'));

const match = elements.find(el => {
  return el.textContent.includes(text);
});

console.log(match); // 👉️ div.box

find element by content using array find

The code for this article is available on GitHub

The function we passed to the Array.find() method gets called for each element in the array until it returns a truthy value or exhausts the elements in the array.

If the callback function returns a truthy value, the find() method short-circuits and returns the corresponding array element.

If the condition is never met, the find method returns undefined.

If you want to do a case-insensitive check for whether the element contains the specific string, convert the element's textContent and the string you are checking for to lowercase.

index.js

Copied!
const text = 'BOBBY HADZ';

const elements = Array.from(document.querySelectorAll('div'));

const match = elements.find(el => {
  return el.textContent.toLowerCase().includes(text.toLowerCase());
});

console.log(match); // 👉️ div.box

By converting both of the strings we are comparing to lowercase, we are able to do a case-insensitive comparison.

# Find Element by Content using `Array.filter()`

You can also use the Array.filter() method to find an element by its content.

index.js

Copied!
const text = 'Bobby Hadz';

const matches = Array.from(
  document.querySelectorAll('div'),
).filter(element => element.textContent.includes(text));

console.log(matches); // 👉️ [div.box]

matches.forEach(match => {
  console.log(match.textContent); // 👉️ Bobby Hadz
});

find element by content using array filter

The code for this article is available on GitHub

We used the Array.from() method to convert the NodeList to an array to be able to call the Array.filter() method.

The function we passed to the Array.filter() method gets called with each element in the array.

The filter() method returns a new array that only contains the elements that meet the condition.

On each iteration, we check if the current element's textContent contains a specific string.

The filter method returns a new array containing only the elements whose text content contains the specified string.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

How to find an Element by Content in JavaScript

# Find Element by Content using JavaScript

# Find Element by Content ignoring the case

# Find Element by Content using Array.find()

# Find Element by Content using Array.filter()

# Additional Resources

Borislav Hadzhiev

# Find Element by Content using `Array.find()`

# Find Element by Content using `Array.filter()`