• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

The Programming Expert

Solving All of Your Programming Headaches

  • HTML
  • JavaScript
  • jQuery
  • PHP
  • Python
  • SAS
  • VBA
  • About
You are here: Home / jQuery / jQuery contains – How to Check if a Paragraph Contains Specific Text

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

April 24, 2022 Leave a Comment

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:

This blog is a compilation of a programmer’s findings in the world of software development, website creation, and automation of processes.

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.

At the end of the day, we want to be able to just push a button and let the code do its magic.

Below, you can select a category and browse posts in a category.

Thank you for reading!

———————

Enter a word below to check if it is contained in any paragraphs above.

Check text

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.

Other Articles You'll Also Like:

  • 1.  Using jQuery to Remove Attribute from HTML Element
  • 2.  Using jQuery to Toggle Class of HTML Element
  • 3.  Using jQuery to Change Background Color
  • 4.  Using jQuery to Show and Hide a Div
  • 5.  jQuery focusout – How to Use the focusout() Method on an HTML Form
  • 6.  jQuery mouseenter – An Interactive Example of the mouseenter Method
  • 7.  Using jQuery to see if URL Contains Specific Text
  • 8.  Using jQuery to Convert a String to Uppercase
  • 9.  How to Use jQuery to Clear a textarea Field
  • 10.  Check if Input is Empty Using jQuery

About The Programming Expert

The Programming Expert is a compilation of a programmer’s findings in the world of software development, website creation, and automation of processes.

Programming allows us to create amazing applications which make our work more efficient, repeatable and accurate.

At the end of the day, we want to be able to just push a button and let the code do it’s magic.

You can read more about us on our about page.

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

About The Programming Expert

the programming expert main image

The Programming Expert is a compilation of hundreds of code snippets to help you find solutions to your problems in Python, JavaScript, PHP, HTML, SAS, and more.

Search

Learn Coding from Experts on Udemy

Looking to boost your skills and learn how to become a programming expert?

Check out the links below to view Udemy courses for learning to program in the following languages:

Copyright © 2022 · The Programming Expert · About · Privacy Policy