jQuery contains – How to Check if a Paragraph Contains Specific Text

We can use the jQuery contains selector to check if a character or string is contained in the text of a paragraph or div.

p:contains(text)

The above code would check all p elements for the text “text”.

To see it in full jQuery code:

$("p:contains(text)")

In the code above, if any paragraphs contain the text, “text”, then we can do something with all of these paragraphs, like change their CSS properties in some way.

$("p:contains(text)").css("font-size","20px");

The above code would change the font size of any paragraph that contains the word “text”;

Let’s take a look at an example below.

Using the jQuery contains selector to find and change text

In this example, we will provide a bunch of paragraphs to the user. We will let the user enter a word, and check if the word is contained in any of the paragraphs. If it is, we will highlight that paragraph.

For the text, we will just use the text found on our About page.

Here is our HTML setup:

<div id="div1">
  <p>This blog is a compilation of a programmer’s findings in the world of software development, website creation, and automation of processes.</p>
  <p>Working with Python, Javascript, PHP, HTML, SAS, and other programming languages can allow us to create amazing programs which make our work more efficient, repeatable, and accurate.</p>
  <p>At the end of the day, we want to be able to just push a button and let the code do its magic.</p>
 <p>Below, you can select a category and browse posts in a category.</p>
  <p>Thank you for reading!</p>
</div>
<p>---------------------</p>
<p>Enter a word below to check if it is contained in any paragraphs above.</p>
<input id="userInput" type="text">
<div id="click-me">Check text</div>

In the JavaScript part of this example, we will first get the text entered by the user using the jQuery val() method.

We will then check all of the paragraphs of div, #div1 to see if any contain the text the user has entered. We will perform this check using the jQuery contains selector.

We will finally highlight any paragraphs that contain the word the user has entered. We will do this by changing the background color of the paragraph using the css() method.

Since we will let the user run this code as many times as they like, we will clear the background colors after every new search.

Here is our JavaScript and jQuery code:

$("#click-me").click(function(){
  //Clear background color
  $("#div1 p").css("background","none");

  //Get the user input
  var userInput = $("#userInput").val();

  //Check and change backgrounds if word is found
  $("#div1 p:contains(" + userInput + ")").css("background","#7bbfa2");

});

The final code and output for this example is below:

Code Output:

Full Code:

<div id="div1">
  <p>This blog is a compilation of a programmer’s findings in the world of software development, website creation, and automation of processes.</p>
  <p>Working with Python, Javascript, PHP, HTML, SAS, and other programming languages can allow us to create amazing programs which make our work more efficient, repeatable, and accurate.</p>
  <p>At the end of the day, we want to be able to just push a button and let the code do its magic.</p>
 <p>Below, you can select a category and browse posts in a category.</p>
  <p>Thank you for reading!</p>
</div>
<p>---------------------</p>
<p>Enter a word below to check if it is contained in any paragraphs above.</p>
<input id="userInput" type="text">
<div id="click-me">Check text</div>

<script>

$("#click-me").click(function(){
  $("#div1 p").css("background","none");
  var userInput = $("#userInput").val();
  $("#div1 p:contains(" + userInput + ")").css("background","#7bbfa2");
});

</script>

Hopefully this article has been useful in helping you understand the jQuery contains selector.