jQuery Tutorial

How to select the matching element contains text in jQuery ?

Gets the matching element contains text in jQuery

$("element:contains('text')")

contains is used to get the elements which are having text containing a specified text.

To get the number of matching elements,

$("element:contains('text')").length

Gets the list of paragraph elements which are having text contains '3'.

$("p:contains('3')")

differences html and text method

Gets the html content of particular elements

Gets the text content of particular elements excludes html tag and attributes.

jQuery Example to get the matching element with html and text methods

<html>
   <head>
      <title>The jQuery Example - To get matching element </title>

 <script src="https://code.jquery.com/jquery-1.10.2.js"></script>	
      <script type = "text/javascript">
        function get_contains_text_tag() {
        var obj = $("p:contains('3')").html();
        var obj1 = $("p:contains('4')").text();
        alert("Matching element html: " + obj +"\n" + "Matching element text: "+obj1);
        }
      </script>		
   </head>	
   <body>
<p>line 0</p>
<p>line 1</p>
<p>line 2</p>
<p>line 3<span>testing</span></p>
<p>line 4<span>testing 1</span></p>
<p>line 5</p>
<p>line 6</p>
<input type="button" value="Get Matching Element" onclick="get_contains_text_tag();"/>
   </body>
</html>

Output:

here obj has the html content of matching paragraph element and obj1 has the text content of matching element which contains text.

Gets the matching element contains text when clicking on 'Get Matching Element' button.

jQuery Example to get the multiple matching elements with html and text methods

<html>
   <head>
      <title>The jQuery Example -  To get matching elements </title>

 <script src="https://code.jquery.com/jquery-1.10.2.js"></script>	
      <script type = "text/javascript">
        function get_contains_text_tag() {
        var obj = $("p:contains('3')").html();
        var obj1 = $("p:contains('4')").text();
        alert("Matching elements html: " + obj +"\n" + "Matching elements text: "+obj1);
        }
      </script>		
   </head>	
   <body>
<p>line 0</p>
<p>line 1</p>
<p>line 3<span>testing 1</span></p>
<p>line 3<span>testing 2</span></p>
<p>line 4<span>testing 1</span></p>
<p>line 4<span>testing 2</span></p>
<p>line 6</p>
<input type="button" value="Get Matching Element" onclick="get_contains_text_tag();"/>
   </body>
</html>

Output:

here obj has the html content of first matching paragraph element and obj1 has the text content of multiple matching elements which are having text contains the '4'.

« Previous Next »

jQuery Programming Examples