Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

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

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

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=
        rel="stylesheet" integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
        crossorigin="anonymous">
      
    <script src=
    </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




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!