Check if an Element contains specific Text using JavaScript

avatar

Borislav Hadzhiev

Sun Jan 02 20222 min read

Check if an Element contains specific Text using JavaScript #

To check if an element contains specific text:

  1. Use the textContent property on the element to get the text content of the element and its descendants.
  2. Use the includes() method to check if the specific text is contained in the element.
  3. If it is, the includes() method returns true, otherwise false is returned.

Here is the HTML for the examples in this article.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <div id="container"> <p>Apple, Banana, Pear</p> <p>Mango, Melon, Apricot</p> </div> <script src="index.js"></script> </body> </html>

And here is the related JavaScript code.

index.js
const container = document.getElementById('container'); if (container.textContent.includes('Melon')) { console.log('โœ… Melon is contained in element'); } else { console.log('โ›”๏ธ Melon is NOT contained in element'); }

We used the textContent property to get the text content of the element and its descendants.

We used the String.includes method to check if the element contains the specific text.

The includes() method performs a case-sensitive search and checks if the provided string is contained in the string it was called on.

index.js
// ๐Ÿ‘‡๏ธ true console.log('apple'.includes('app')); // ๐Ÿ‘‡๏ธ false console.log('apple'.includes('banana'));
If you want to perform a case insensitive check whether the text is contained in the element, you have to convert the element's text content and the string you are checking for to lowercase.
index.js
const container = document.getElementById('container'); const fruit = 'MELON'; if (container.textContent.toLowerCase().includes(fruit.toLowerCase())) { console.log('โœ… melon is contained in element'); } else { console.log('โ›”๏ธ melon is NOT contained in element'); }
By converting both of the strings we are comparing to lowercase, we are able to perform a case insensitive comparison.

If the text content of the element contains the specific text, our if block will run, otherwise the else block runs.

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee