Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to find element by text using jQuery?
Overview
The Jquery consists of a predefined method which makes it easy for the developer to build this feature. The Jquery provides a selector Syntax by which we can find any text element. So the ":contains" selector is used for finding the text in any element. To learn fully about this ":contains" selector we will be developing this feature through an Example.
Syntax
The Syntax for finding the text in an element is given below −
$(selector:contains());
selector − The selector in the above Syntax is termed as any element or class or id name which is to be scanned for finding the text.
:contains() − This is a selector in the Jquery in which a parameter is passed as a text to it for which we had to find in the element.
Algorithm
Step 1 − Create a HTML file on your text editor and add a HTML boilerplate to the file.
Step 2 − Now add a Jquery CDN(Content Delivery Network) link to the head tag of the file.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
Step 3 − Now add a HTML input element and a button with HTML button tag.
<input type="text" placeholder="type the words to find..."> <button>Check</button>
Step 4 − Now create an unordered list with few list points to search on the element.
<ul> <li>Tutorialspoint provides best variety of courses.</li> <li>I am a Java Developer.</li> <li>HTML stands for Hypertext markup language.</li> <li>JavaScript is a scripting language.</li> <li>Web application provides are the best in terms of storage.</li> <li>Tutorialspoint is a best platform to learn.</li> </ul>
Step 5 − Add the internal style tag to make layout for the page.
<style>
ul{
display: flex;
flex-direction: column;
}
li{
margin: 0.5rem 0;
}
</style>
Step 6 − Now add a script tag to the body element.
<script></script>
Step 7 − Use the Jquery selector Syntax to access the button.
$("button").click(() => {}
Step 8 − Now select the input tag and store the input text in the value using the val() method.
var val = $("input").val();
Step 9 − Use the selector to select the list tag with ":contains()" selector and pass the "val" variable to find the entered text.
$(`li:contains(`+val+`)`).css({"backgroundColor":"green","color":"white"});
Step 10 − To find the element by text is created successfully.
Example
In this Example we will create an unordered list which contains a list of general points. We will also be creating an input box for the search and a button. In this Example we will dynamically search for any words that are present in the list tag.
<html>
<head>
<title> find the element by text </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<style>
ul{
display: flex;
flex-direction: column;
}
li{
margin: 0.5rem 0;
}
</style>
</head>
<body>
<h3>Type the words and check it in an element.</h3>
<input type="text" placeholder="type the words to find..."><button>Check</button>
<ul>
<li> Tutorialspoint provides best variety of courses.</li>
<li> I am a Java Developer.</li>
<li> HTML stands for Hypertext markup language.</li>
<li> JavaScript is a scripting language.</li>
<li> Web application provides are the best in terms of storage.</li>
<li> Tutorialspoint is a best platform to learn.</li>
</ul>
<script>
$("button").click(() => {
var val = $("input").val();
$(`li:contains(`+val+`)`).css({"backgroundColor":"green","color":"white"})
})
</script>
</body>
</html>
The given image below shows the Output of the above Example, in which the browser window loads with an input box to type the text inside the box and a button which will trigger the search function. As the user enters the text "Tutorialspoint" in the search box and hits the "check" button the contains selector will search for the text in the below given list element and will return the list tags with the green background color as shown below. The list which contains the green background contains the text which is typed in the search box.
Conclusion
This feature is used in many text editors and formatters which helps the user to search for any text. Its advantage is that, it does not matter how long the content is, it will find the text and highlight it to the user. We have used the ":contains" selector in the above program to build this feature, this selector is case sensitive in nature as if a user enters the text in small format then it will only return an element with the same type of format only.
320 Views
