Trace.js is a lightweight and customizable jQuery plugin for highlighting words or phrases inside HTML elements.
Supports case sensitivity, full/partial matches, and dynamic styling.
✅ Highlight Specific Words
✅ Full or Partial Word Matching
✅ Case Sensitivity Option
✅ Custom Highlight Colors
✅ Easy Unhighlighting with .untrace()
npm install trace-text-highlighter
<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>
Download Trace.js Include it after jQuery:
<script src="jquery.min.js"></script>
<script src="trace.js"></script>
$("#content").trace({
match: "highlight", // Word to highlight
color: "yellow" // Highlight color (default: yellow)
});
$("#content").trace({
match: "word",
traceType: "full" // Only highlights full words
});
$("#content").trace({
match: "case",
caseSensitive: true
});
$("#content").untrace();
Option | Type | Default | Description |
---|---|---|---|
match |
String | null |
Required - The word/phrase to highlight. |
color |
String | "yellow" |
Highlight color (supports named colors & hex codes). |
traceType |
String | "partial" |
"partial" (matches within words) or "full" (matches whole words only). |
caseSensitive |
Boolean | false |
Enables case-sensitive matching. |
<div id="content">
jQuery is a fast, small, and feature-rich JavaScript library.
</div>
<script>
$(document).ready(function () {
$("#content").trace({ match: "jQuery", color: "lightblue" });
});
</script>
This project is licensed under the MIT License.
Author: Amit
Version: 1.0.1
GitHub Repository: Trace.js on GitHub
Pull requests are welcome! For major changes, please open an issue first to discuss your ideas.
git clone https://github.com/connectamitsahoo/trace.js.git