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