Blog

Live Text Highlighter Using HTML, CSS, and JavaScript

In this post, we’re going to build search feature that highlight words in real-time as you type — from scratch — using just HTML, CSS, and JavaScript. This is a fun and practical project for beginners to understand DOM manipulation, real-time input handling, and regular expressions.

What Are We Going to Build?

We’re creating a Live Text Highlighter. It will work like this:

  • There’s a paragraph of text.
  • You start typing in an input box.
  • Any word you type that exists in the paragraph will get highlighted instantly.

HTML – The Structure

<h1>Live Text Highlighter</h1>

<div id="content">
  Programming is a form of art. When you write code, whether it is JavaScript, Python, or Java, you are creating something from nothing. It’s a process that requires creativity, logic, and problem-solving skills. The beauty of programming is that anyone can learn it and create amazing things, from simple web pages to complex applications.
</div>

<input type="text" id="search" placeholder="Type to highlight text...">

<p class="note">Start typing in the input box above to highlight text in the paragraph.</p>

CSS – Styling the Page

Now that we have the structure, let’s make it look good. This is where CSS comes in. We’ll add spacing, colors, fonts, and a highlight effect.

body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  margin: 20px;
  color: #333;
}

h1 {
  text-align: center;
  color: #444;
}

#content {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 15px;
  background: #f9f9f9;
  max-width: 600px;
  margin: 20px auto;
  overflow-wrap: break-word;
}

input[type="text"] {
  display: block;
  font-size: 16px;
  padding: 10px;
  margin: 10px auto;
  width: 90%;
  max-width: 600px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.highlight {
  background-color: #ffeb3b;
  color: #000;
  font-weight: bold;
}

.note {
  text-align: center;
  font-size: 14px;
  color: #777;
}

JavaScript – The Interactivity

This is where the real magic happens. Our JavaScript code will:

  • Detect what the user types.
  • Search that word inside the paragraph.
  • Wrap matched words with a <span> that has the highlight class.
const searchInput = document.getElementById('search');
const contentElement = document.getElementById('content');
const originalText = contentElement.textContent;

searchInput.addEventListener('input', function () {
  const searchText = searchInput.value;

  // Escape special characters for regex
  const escapedSearchText = searchText.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');

  // Create a case-insensitive regular expression
  const regex = new RegExp(`(${escapedSearchText})`, 'gi');

  // Replace matched words with a span that has the highlight class
  const highlightedText = searchText.trim()
    ? originalText.replace(regex, '<span class="highlight">$1</span>')
    : originalText;

  contentElement.innerHTML = highlightedText;
});

Conclusion

This project shows how you can combine simple HTML, CSS, and JavaScript to build something functional and interactive. Whether you’re a beginner learning JavaScript or a web dev practicing DOM manipulation — this is a great little tool to play with.