• 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
  • Ruby
  • 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.  jQuery blur – How to Use the blur() Method on an HTML Form
  • 2.  Using jQuery to Hide Element by Class
  • 3.  Using jQuery to Scroll to Div
  • 4.  Set the Height of a Div Using jQuery
  • 5.  jQuery mouseout – An Interactive Example of the mouseout Method
  • 6.  jQuery siblings – Get the Sibling Elements of a Div
  • 7.  Using jQuery to Add Option to Select List
  • 8.  Using jQuery to Get the Bottom Position of Element
  • 9.  Using jQuery to Change the Font Size of a Paragraph
  • 10.  jQuery focusout – How to Use the focusout() Method on an HTML Form

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

Welcome to The Programming Expert. We are a group of US-based programming professionals who have helped companies build, maintain, and improve everything from simple websites to large-scale projects.

We built The Programming Expert to help you solve your programming problems with useful coding methods and functions in various programming languages.

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 © 2023 · The Programming Expert · About · Privacy Policy