How to Create a Text Search and Highlight With JavaScript
In this Javascript tutorial, we will see how to use string manipulation and regular expressions to search for specific values and highlights the matching results.
the HTML elements needed for the functionality: the textarea, search value input field, and search button. An event listener is attached to the search button, which triggers the search function when clicked.
Project Source Code:
<!DOCTYPE html>
<html>
<head>
<title>Search Value In Text</title>
<style>
*{
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: sans-serif;
}
body{ background-color: #f5f5f5; }
.container{ max-width: 800px; max-width: 0 auto; padding: 20px; }
#textarea{
font-size: 16px;
line-height: 1.5;
padding: 10px;
background-color: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
border-radius: 5px;
}
#search-value{
font-size: 16px;
padding: 10px;
border: none;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
margin-right: 10px;
width: 200px;
}
#search-button{
font-size: 16px;
padding: 10px 20px;
border: none;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
color: #fff;
cursor: pointer;
background-color: #2196f3;
transition: background-color 0.2s ease-in-out;
}
#search-button:hover{ background-color: #1976d2; }
.highlight{
background-color: red;
font-weight: bold;
color: #fff;
}
</style>
</head>
<body>
<div class="container">
<p id="textarea">You can search for a value in a textarea using
JavaScript by getting the value of the textarea,
and then using JavaScript string methods to search
for the desired value.
</p>
<input type="text" id="search-value">
<button id="search-button">Search</button>
</div>
<script>
// Get references to the HTML elements we need
const textarea = document.getElementById("textarea");
const searchValue = document.getElementById("search-value");
const searchButton = document.getElementById("search-button");
// Attach an event listener to the search button
searchButton.addEventListener("click", search);
// Define the function to be called when the search button is clicked
function search(){
// Get the text from the textarea and the search value
// from the input field
const text = textarea.innerText.trim();
const value = searchValue.value.trim();
// If either the textarea or search value is empty,
// display an error message and return
if(text === "" || value === ""){
alert("Please Enter a Value to Search For");
return;
}
// Create a regular expression to match the search value
const regex = new RegExp(value,"gi");
// Check if the textarea contains the search value
if(regex.test(text)){
// If there is a match, highlight the matching text by wrapping it
// in a span with the 'highlight' class
const highlightedText = text.replace(regex,
`<span class="highlight">$&</span>`);
textarea.innerHTML = highlightedText;
}else{
// If there is no match, display a message to the user
alert("No Match Found");
}
}
</script>
</body>
</html>
Code Explanation:
The JavaScript Implementation: The script begins by referencing the HTML elements needed for the functionality: the textarea, search value input field, and search button.
An event listener is attached to the search button, which triggers the search function when clicked.
The search function retrieves the text from the textarea and the search value from the input field.
It performs validation checks to ensure that both the textarea and search value are not empty.
If either of them is empty, an error message is displayed, and the function returns.
Next, a regular expression is created using the search value, with the "gi" flags to perform a global and case-insensitive search.
The regular expression is then used to test if the textarea contains a match for the search value.
If there is a match, the script replaces the matched text with the same text wrapped in a span element with the "highlight" class. This highlights the matching text by applying the specified CSS styles. If there is no match, an alert is displayed to inform the user.
OUTPUT:
