Trace.js - Lightweight jQuery Text Highlighter

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.

🚀 Features

✅ Highlight Specific Words
✅ Full or Partial Word Matching
✅ Case Sensitivity Option
✅ Custom Highlight Colors
✅ Easy Unhighlighting with .untrace()

📦 Installation

1️⃣ Install via npm

npm install trace-text-highlighter

2️⃣ CDN (Recommended)

<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>

3️⃣ Download Manually

Download Trace.js Include it after jQuery:

<script src="jquery.min.js"></script>
<script src="trace.js"></script>

🛠 Usage

Basic Highlight

$("#content").trace({
    match: "highlight",  // Word to highlight
    color: "yellow"     // Highlight color (default: yellow)
});

Full Word Matching

$("#content").trace({
    match: "word",
    traceType: "full" // Only highlights full words
});

Case-Sensitive Highlight

$("#content").trace({
    match: "case",
    caseSensitive: true
});

Remove Highlights

$("#content").untrace();

⚙ Options

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.

🔧 Example Code

<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>

🔑 License

This project is licensed under the MIT License.

Author: Amit\ Version: 1.0.1\ GitHub Repository: Trace.js on GitHub

🤝 Contributing

Pull requests are welcome! For major changes, please open an issue first to discuss your ideas.

⭐ Like This? Star the Repo! ⭐

git clone https://github.com/connectamitsahoo/trace.js.git

Package detail

trace-text-highlighter

readme