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>