jQuery: find element by text

jquery contains exact
jquery filter
jquery if element contains text
jquery :contains case insensitive
jquery get button with text
queryselector contains(text)
jquery replace text
jquery has

Can anyone tell me if it's possible to find an element based on its content rather than by an id or class?

I am attempting to find elements that don't have distinct classes or id's. (Then I then need to find that element's parent.)


You can use the :contains selector to get elements based on their content.

Demo here

$('div:contains("test")').css('background-color', 'red');
<div>This is a test</div>
<div>Another Div</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

jQuery: find element by text, You can use the :contains selector to get elements based on their content. Demo here. $('div:contains("test")').css('background-color', 'red'); jQuery – Search text in the Element with :contains () Selector. The :contains () is a jQuery selector which allows us to search text within the element and select it and perform an action on it. For example – you are dynamically listing records from MySQL database table here, you have a requirement to add search filter based on key press.


In jQuery documentation it says:

The matching text can appear directly within the selected element, in any of that element's descendants, or a combination

Therefore it is not enough that you use :contains() selector, you also need to check if the text you search for is the direct content of the element you are targeting for, something like that:

function findElementByText(text) {
    var jSpot = $("b:contains(" + text + ")")
                .filter(function() { return $(this).children().length === 0;})
                .parent();  // because you asked the parent of that element

    return jSpot;
}

jQuery :contains() Selector, The string can be contained directly in the element as text, or in a child element. This is mostly used together with another selector to select the elements  The matching text can appear directly within the selected element, in any of that element's descendants, or a combination thereof. As with attribute value selectors, text inside the parentheses of :contains() can be written as a bare word or surrounded by quotation marks. The text must have matching case to be selected.


Fellas, I know this is old but hey I've this solution which I think works better than all. First and foremost overcomes the Case Sensitivity that the jquery :contains() is shipped with:

var text = "text";

var search = $( "ul li label" ).filter( function ()
{
    return $( this ).text().toLowerCase().indexOf( text.toLowerCase() ) >= 0;
}).first(); // Returns the first element that matches the text. You can return the last one with .last()

Hope someone in the near future finds it helpful.

jQuery - Search text in the element with :contains() selector, The :contains() is a jQuery selector which allows us to search text within the element and select it and perform an action on it. Stack Overflow for Teams is a private, secure spot for you and your coworkers to find and share information. Learn more Select element based on EXACT text contents


Rocket's answer doesn't work.

<div>hhhhhh
<div>This is a test</div>
<div>Another Div</div>
</div>

I simply modified his DEMO here and you can see the root DOM is selected.

$('div:contains("test"):last').css('background-color', 'red');

add ":last" selector in the code to fix this.

jQuery, Parameters: This selector contains single parameter text which is mandatory and used to Example 1: This example uses :contains() selector to select element. The matching text can appear directly within the selected element, in any of that element's descendants, or a combination thereof. As with attribute value selectors, text inside the parentheses of :contains() can be written as bare words or surrounded by quotation marks. The text must have matching case to be selected.


Best way in my opinion.

$.fn.findByContentText = function (text) {
    return $(this).contents().filter(function () {
        return $(this).text().trim() == text.trim();
    });
};

How to Get the Text inside an Element Using jQuery, You can simply use the jQuery text() method to get all the text content inside an element. The text() method also return the text content of child elements. element. Type: Element or jQuery. An element or a jQuery object to match elements against. Given a jQuery object that represents a set of DOM elements, the .find () method allows us to search through the descendants of these elements in the DOM tree and construct a new jQuery object from the matching elements.


Using jQuery to find elements that contain a specific text string , This snippet of code uses the .filter() function within jQuery to find all “li” elements that contain just the text “findthis”. Click Below text. This is the simple paragraph. Click on the paragraph given in the simple example above and on click of the paragraph, CSS will add to it. Get Element By Class and Find Element with Two Class. If you have elements with same class name, you can access the required element using the other class.


jQuery Selectors, jQuery append() method inserts text at the end in the element. You can get a particular element by using id selector pattern. Specify an id of an element for which  Definition and Usage. The find () method returns descendant elements of the selected element. A descendant is a child, grandchild, great-grandchild, and so on. The DOM tree: This method traverse downwards along descendants of DOM elements, all the way down to the last descendant. To only traverse a single level down the DOM tree (to return direct children), use the children () method.


jQuery :contains Selector – Find All Elements in a Web Page using a , In the article I'll explain with example about jQuery :contains() selector and how it It looks for the text in each element (in our example the elements are <div>). The :contains() selector selects elements containing the specified string. The string can be contained directly in the element as text, or in a child element. This is mostly used together with another selector to select the elements containing the text in a group (like in the example above). Note: The text is case sensitive.