Introduction
Creating a text highlighter can be a useful feature for enhancing the user experience on a website. In this tutorial, we’ll walk through the development of a simple yet effective text highlighter using HTML, CSS, and JavaScript. The code provided below can be easily integrated into your web projects.
HTML Structure
The HTML structure is straightforward, consisting of a container for the highlighting functionality. The main components include an input field for user input, a button to trigger the search, and a paragraph where the content is displayed. The entire layout is styled using CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Text Highlighter</title>
<link
href="https://fonts.googleapis.com/css2?family=Rubik&display=swap"
rel="stylesheet"
/>
</head>
<body>
<div class="highlight-container">
<div class="search-wrapper">
<input
type="text"
id="text-to-search"
placeholder="Enter text to search.."
/>
<button onclick="highlightText()">Search</button>
</div>
<p class="content" id="paragraph">
India, a diverse and vibrant nation, is renowned for its rich history,
cultural tapestry, and economic dynamism. Boasting a mosaic of
languages, religions, and traditions, India is a melting pot of
diversity. With a heritage that spans thousands of years, the country
has witnessed the rise and fall of empires, contributing significantly
to global civilization.
</p>
</div>
</body>
</html>CSS Styling
The CSS styling is essential for creating an aesthetically pleasing and user-friendly interface. The design includes a clean background, well-defined input and button styles, and a subtle box shadow for a modern look. The Rubik font is used throughout the page.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Rubik", sans-serif;
}
body {
height: 100%;
background-color: #1e1c27;
}
.highlight-container {
width: 90vmin;
background-color: #ffffff;
padding: 50px 40px;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
border-radius: 5px;
box-shadow: 0 20px 35px rgba(60, 60, 60, 0.2);
}
.search-wrapper {
display: flex;
justify-content: space-between;
}
.search-wrapper input {
width: 60%;
padding: 10px 5px;
border-radius: 3px;
border: 1px solid #201d2e;
}
.search-wrapper button {
width: 30%;
background-color: #201d2e;
border: none;
outline: none;
cursor: pointer;
color: #ffffff;
border-radius: 3px;
}
.highlight-container .content {
line-height: 35px;
text-align: justify;
margin-top: 30px;
}
mark {
background-color: #ffdd4b;
}JavaScript Functionality
The JavaScript function highlightText takes user input, escapes special characters, and uses a regular expression to find and replace matching text within the content paragraph with a highlighted <mark> element.
function highlightText() {
let textToSearch = document.getElementById("text-to-search").value;
let contentParagraph = document.getElementById("paragraph");
textToSearch = textToSearch.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
let pattern = new RegExp(`${textToSearch}`, "gi");
contentParagraph.innerHTML = contentParagraph.textContent.replace(
pattern,
(match) => `<mark>${match}</mark>`
);
}Conclusion
By combining HTML, CSS, and JavaScript, you can easily implement a text highlighter on your website. This tutorial provides a solid foundation for enhancing the user’s ability to find and focus on specific content within a given text. Feel free to customize the styles and functionality to suit the design requirements of your project.
Remember to test the text highlighter thoroughly to ensure it performs well across various browsers and devices. Feel free to incorporate additional features, such as case-sensitive search or highlighting multiple occurrences, to further enhance the user experience.
Happy coding!
