How to Select Element By Text in JavaScript

JavaScript allows you to select DOM elements in numerous ways using ID, tag, name, class, attributes, etc. Sometimes you may need to select DOM elements based on their HTML text, in JavaScript. In this article, we will learn how to select element by text in JavaScript.

How to Select Element By Text in JavaScript

Let us say you have the following HTML element.

<a ...>SampleText</a>

There are several ways to select element by text in JavaScript.

1. Using XPath

XPath is a simple way to search an element using query selectors.

var xpath = "//a[text()='SampleText']";
var matchingElement = document.evaluate(xpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;

2. Using DocumentElement

You can also use outerHTML and innerHTML properties to select DOM elements using HTML text. Here is an example to select elements based on outerHTML attribute.

document.documentElement.outerHTML.includes('SampleText')

Similarly, you can also select DOM elements using innerHTML property.

document.documentElement.innerHTML.includes('SampleText')

3. Using JQuery

JQuery is a powerful and popular JavaScript library that offers many useful functions. You can use the contains() function to easily select DOM elements using their innerHTML text.

var element = $( "a:contains('SampleText')" );

In this article, we have learnt how to select DOM elements using their text values.

How to Select Element By Text in JavaScript