Skip to main content

How to Check if an Element Contains Specific Text in JavaScript

When working with the DOM, a common task is to determine if an HTML element contains a certain piece of text. This is essential for writing tests, creating conditional logic based on page content, or manipulating elements that contain specific keywords. The most reliable way to do this is by inspecting the element's text content.

This guide will teach you how to use the textContent property combined with the includes() string method for case-sensitive searches. You will also learn the standard approach for performing a case-insensitive search by converting the text to a consistent case before comparing.

The Core Method: textContent and includes()​

The process for checking an element's text content is a simple, two-step operation:

  1. Get the Text: Use the element.textContent property. This property returns a string representing all the text contained within the element and all of its descendants, providing a complete textual representation of that part of the DOM.
  2. Check for the Substring: Use the String.prototype.includes() method on the retrieved text. This method returns true if the search string is found anywhere within the main string, and false otherwise.

For all examples, we will use the following HTML structure:

<div id="container">
  <p>Apple, Banana, Pear</p>
  <p>Mango, Melon, Apricot</p>
</div>

This is the most direct approach. It's fast and effective when you know the exact case of the text you're searching for.

Example of code with problems: We need to check if the div with the ID container contains the word "Melon".

// Problem: How to find "Melon" inside the #container div?
const container = document.getElementById('container');

Solution:

const container = document.getElementById('container');

// The includes() method is case-sensitive by default.
if (container.textContent.includes('Melon')) {
  console.log('✅ The element contains "Melon".'); // This will run
} else {
  console.log('⛔️ The element does NOT contain "Melon".');
}

if (container.textContent.includes('melon')) {
  console.log('✅ The element contains "melon".');
} else {
  console.log('⛔️ The element does NOT contain "melon".'); // This will run
}

Output:

✅ The element contains "Melon".
⛔️ The element does NOT contain "melon".

The includes() method is case-sensitive. To perform a case-insensitive search, you must first convert both the element's text content and your search string to a consistent case, typically lowercase.

The problem is that we need to find "Melon", but our search term might be "melon", "MELON", or any other variation.

// Problem: How to find "Melon" regardless of its case?
const container = document.getElementById('container');
const searchTerm = 'mELoN';

The Solution is to use the toLowerCase() method on both strings, we can ensure a reliable, case-insensitive comparison.

const container = document.getElementById('container');
const searchTerm = 'mELoN';

const textContentLower = container.textContent.toLowerCase();
const searchTermLower = searchTerm.toLowerCase();

if (textContentLower.includes(searchTermLower)) {
  console.log(`✅ The element contains "${searchTerm}" (case-insensitive).`);
} else {
  console.log(`⛔️ The element does NOT contain "${searchTerm}" (case-insensitive).`);
}

Output:

✅ The element contains "mELoN" (case-insensitive).

A Note on textContent vs. innerText​

You might also see the innerText property used for this task. While they often return similar results, there are critical differences:

  • textContent: Gets the content of all elements, including <script> and <style> elements, and it does not care about CSS styling (e.g., it will return text from a hidden element). It returns a raw, unfiltered text representation.
  • innerText: Is "CSS-aware." It will not return text from elements that are hidden with CSS (e.g., display: none). It also attempts to approximate the "rendered" appearance of the text, taking into account things like line breaks.

For a simple, reliable "does this element contain this text?" check, textContent is usually the faster and more predictable choice.

Conclusion​

Checking an element's text content is a fundamental DOM manipulation skill.

  • For case-sensitive searches, the most direct method is element.textContent.includes('searchText').
  • For case-insensitive searches, the standard and most reliable method is to convert both strings to a consistent case: element.textContent.toLowerCase().includes(searchTerm.toLowerCase()).

By using these simple and powerful string methods, you can write clear and effective code to query the content of your web page.

Table of Contents