How to find an element by text using jQuery ?

How to find an element by text using jQuery ?

Last Updated : 01 Oct, 2021

We will learn how to find an element using jQuery's API. This article requires some knowledge of HTML, CSS, JavaScript, Bootstrap, and jQuery. The elements can be selected based on whether they contain the string we want to find. This can be done using the jQuery contains selector to select elements that contain the string.

About contains selector

Depending on the element, the matching text can appear directly within or within a descendant of the selected element. The :contains() selector in jQuery is used to select elements containing the specified string. The text must have a matching case to be selected.

Syntax: A string of text to look for. It's case-sensitive.

jQuery(":contains(text)")

Approach:

Create an HTML file "index.html" in your local system.
Follow the basic HTML template and two-paragraph by adding the text inside the <p> tag.
Select the <p> tag with contains selector and pass the keyword that you want to select as a parameter in contains selector method.
After you successfully follow the above steps then attach a CSS property to that selected paragraph which contains the keyword that you pass as an argument in the contains method.

Example: In this case, we are looking for the element that contains the word "Gfg". We change the color of the particular paragraph that contains the word "Gfg" after selecting the element.

HTML

<!DOCTYPE html>
<html>

<head>
    <link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
        rel="stylesheet" integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
        crossorigin="anonymous">
    
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js">
    </script>

    <style>
        body {
            border: 2px solid green;
            min-height: 240px;
        }

        .center {
            display: flex;
            justify-content: center;
        }

        h1 {
            color: green;
            text-align: center;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>

    <div class="row container">
        <div class="col">
            <p>
                Web development refers to the building, 
                creating, and maintaining of websites.
                Gfg includes aspects such as web design,
                web publishing, web programming, and 
                database management. It is the creation 
                of an application that works over the 
                internet i.e. websites.
            </p>
        </div>
        
        <div class="col">
            <p>
                Web development refers to the building, 
                creating, and maintaining of websites.
                It includes aspects such as web design, 
                web publishing, web programming, and 
                database management. It is the creation 
                of an application that works over the 
                internet i.e. websites.
            </p>
        </div>
    </div>

    <script>
        $('p:contains("Gfg")').css({ 'color': 'green' });
    </script>
</body>

</html>

Output:

contains text

How to find an element by text using jQuery ?

D

debadebaduttapanda7

Improve

Article Tags :

Similar Reads

How to find all paragraph elements using jQuery ?

Given a webpage containing paragraph elements and the task is to find every paragraph element using the jQuery module. We have to find the <p> elements from the HTML page, and you can achieve this task by using the element selectors. The element selector will select the element based on the el

How to get font size of an element using jQuery ?

In this article, we will see how to get the font size of an element using jQuery. To get the font size of an element, we will use css() method. The css() method is used to set or return the style property of the selected element. Syntax: var style = $(selector).css(property) Return value: This metho

How to filter the children of any element using jQuery ?

In this article we will learn how to filter the children of any element in JQuery. JQuery is a fast and lightweight JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript. It is widely famous for its motto o

How to find element with specific ID using jQuery ?

The question is to determine whether an element with a specific id exists or not using JQuery. jQuery on() Method: This method adds one or more event handlers for the selected elements and child elements.Syntax: $(selector).on(event, childSelector, data, function, map)Parameters: event: It is requir

How to select an element by name with jQuery ?

Selecting an element by name with jQuery allows you to target HTML elements using their `name` attribute. This method is commonly used in form handling, where input fields, checkboxes, or radio buttons share the same name, enabling you to easily manipulate or retrieve their values.Table of ContentUs