Contains text (:contains(text))

In this chapter you will learn:

Description and Syntax for Contains text selector
Examples for Contains text selector
How to remove an element by its contents.
Mark under line by content

Description and Syntax

$(':contains(text)')

select all elements that contain the specified text. The text must have matching case to be selected.

Examples

$('p:contains(nothing special)') selects all <p> elements that contain the text nothing special
$('li:contains(second)') selects all <li> elements that contain the text second

The following code finds a table cell with letter F.

<html><!--from ja  v  a  2 s .com-->
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
               $("tr:contains('F')").css("background-color", "#bbbbff");
        });
    </script>
  </head>
  <body>
    <body>
    <table>
        <tr><td>First</td></tr>
        <tr><td>Middle</td></tr>
        <tr><td>Last</td></tr>
    </table>
    </body>
</html>

Click to view the demo

Remove by content

The following code removes elements which contains Hello.

<html><!--   j a va2 s.c  o m-->
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
             $("p").remove(":contains('Hello')");
        });
    </script>
  </head>
  <body>
    <body>
       <p class="hello">Hello</p>
    </body>
</html>

Click to view the demo

Mark under line by content

The following code marks div which contains J.

<html><!-- java 2  s. com-->
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $("div:contains('J')").css("text-decoration", "underline");
    });

    </script>
 <style>
  div { background:yellow; width:80px; height:80px; margin:5px; float:left; }


  </style>

  </head>
  <body>
      <div>Java</div>
      <div>C#</div>
      <div>JavaScript</div>
      <div>CSS</div>
      <div>Ja va2s.com</div>
      <div>ja va2s.com</div>
      <div>Java2s.com</div>
  </body>
</html>