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

#javascript #jquery #webdev

🌟 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

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>

🛠 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) 
            });

🏆 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. 🚀

DEV Community