Skip to main content

How to Check if Text Exists on the Page in JavaScript

A common requirement in web development and testing is to verify that a specific piece of text is present somewhere on the page. Whether you're confirming a success message, checking for a user's name, or writing an automated test, this is a fundamental DOM query. The most direct way to achieve this is by reading the text content of a relevant element and searching within it.

This guide will teach you the best practices for finding text on a page. You will learn how to use textContent and includes() for the search, the importance of scoping your search for better performance, and how to perform case-insensitive checks.

The Core Method: textContent with includes()​

The simplest approach is to get all the text within the page's <body> and search it.

The logic:

  1. Get the Body's Text: Access the document.body.textContent property. This returns a single string containing all the text from every element inside the <body> tag.
  2. Check for the Substring: Use the String.prototype.includes() method on that string. It returns true if the search text is found and false otherwise.

We'll use this simple HTML for our examples:

<body>
  <div id="box">
    <p>This is a tutorialreference.com tutorial.</p>
  </div>
</body>

And a basic solution is the following:

const textToFind = 'tutorialreference.com';

if (document.body.textContent.includes(textToFind)) {
  console.log(`✅ The text "${textToFind}" exists on the page.`);
} else {
  console.log(`⛔️ The text "${textToFind}" does not exist on the page.`);
}

While this works, it can be inefficient on large, complex pages.

Improving Performance by Scoping Your Search (Best Practice)​

Searching the entire document.body can be slow, as it forces the browser to concatenate the text from every single element on the page. A much better practice is to scope your search to the smallest possible container element that you expect to contain the text.

Problem: searching document.body is inefficient if you know your text is inside a specific div.

// Problem: We know the text is in the #box div,
// so searching the whole body is wasteful.
const textToFind = 'tutorial';

Solution: first, get a reference to the specific container element, and then check its textContent.

const boxElement = document.getElementById('box');
const textToFind = 'tutorial';

if (boxElement && boxElement.textContent.includes(textToFind)) {
  console.log(`✅ The text "${textToFind}" was found inside the #box element.`);
} else {
  console.log(`⛔️ The text was not found inside the #box element.`);
}
note

Note the boxElement && ... check. This is a safety measure to prevent an error if the #box element itself isn't found.

note

This approach is significantly faster and more precise.

The includes() method is case-sensitive. It will not find "Tutorial" if you are searching for "tutorial". To perform a case-insensitive search, you must convert both the element's text content and your search string to a consistent case, usually lowercase.

Problem: we need to find the text, but we don't know if it will be "Tutorial", "tutorial", or "TUTORIAL".

const boxElement = document.getElementById('box');
const textToFind = 'TUTORIAL';

Solution:

const boxElement = document.getElementById('box');
const textToFind = 'TUTORIAL';

const textContentLower = boxElement.textContent.toLowerCase();
const searchTermLower = textToFind.toLowerCase();

if (textContentLower.includes(searchTermLower)) {
  console.log(`✅ Found the text "${textToFind}" (case-insensitive).`);
} else {
  console.log(`⛔️ The text was not found.`);
}
note

This is the standard and most reliable way to perform case-insensitive checks.

A Note on textContent vs. innerText​

You might also see innerText used for this task. It's important to know the difference:

  • textContent: Gets the raw text content of all elements, including hidden ones. It is faster and more predictable.
  • innerText: Is "CSS-aware" and only returns human-readable content. It will not get text from elements hidden with display: none, and it tries to replicate the rendered text layout.

For a simple "does this text exist?" check, textContent is almost always the better and faster choice.

Conclusion​

Checking for the existence of text on a page is a straightforward task if you follow best practices.

  • Use element.textContent.includes(searchText) as your core method.
  • Always scope your search to the smallest relevant container element (e.g., document.getElementById('my-container')) instead of the entire document.body. This is the most critical step for good performance.
  • For case-insensitive searches, convert both the content and your search term to lowercase with .toLowerCase() before comparing.

Table of Contents