Introducing Trace.js – A Lightweight jQuery based Text Highlighter Plugin
Amit Sahoo

Amit Sahoo @connectamitsahoo

About: Amit Sahoo | Web Developer & Open-Source Contributor Passionate PHP, JavaScript, and MySQL developer with 5+ years of experience.

Joined:
Mar 1, 2025

Introducing Trace.js – A Lightweight jQuery based Text Highlighter Plugin

Publish Date: Mar 1
1 0

🌟 What is Trace.js?

Trace.js is a lightweight jQuery plugin for highlighting words or phrases inside HTML elements.

🚀 Features:

  • ✅ Supports case-sensitive and case-insensitive searches.
  • ✅ Highlights full or partial matches.
  • ✅ Works with dynamic content.
  • Zero dependencies! Just jQuery required.

⚡ Why I Built Trace.js

Recently, one of my junior developers needed to highlight a word inside a list of paragraphs dynamically. This gave me an idea what should I build next.


📦 How to Install Trace.js

Method 1️⃣ Install via NPM

npm i trace-text-highlighter
Enter fullscreen mode Exit fullscreen mode

Method 2️⃣ Use CDN

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/connectamitsahoo/trace.js@latest/dist/trace.min.js"></script>
Enter fullscreen mode Exit fullscreen mode

🛠 How to use Trace.js

$("#content").trace({
                match: "highlight",     // Word to highlight
                color: "yellow",        // Highlight color (default: yellow)
                traceType: "full",      // Only highlights full words (default: partial)
                caseSensitive: true     // Enables case-sensitive matching. (default: false) 
            });
Enter fullscreen mode Exit fullscreen mode

🏆 Real-World Use Cases

🔹 Search Result Highlighting – Highlight user search queries dynamically.
🔹 Content Emphasis – Highlight key terms in articles or documentation.
🔹 Live Text Filtering – Visually emphasize matching text in real-time.


💡 Feedback & Contributions Welcome!

Trace.js is open-source under the MIT License. Check out the repo and feel free to contribute or report issues!
🔗 GitHub Repo
🔗 NPM Package

Let me know what you think! Drop a comment below. 🚀

Comments 0 total

    Add comment