Introducing ala_marker: A Multi-Color Text Highlighter Plugin for jQuery
ala_marker brings multi-color, regex-powered highlights to textareas using a transparent overlay — caret-safe, LTR/RTL-aware, and cross-browser friendly.
Core Concept
Instead of altering the textarea content, ala_marker builds a transparent overlay <div> on top of it. The overlay renders the highlights while the underlying text stays fully editable. Colors are applied with slight opacity so the caret never gets “lost” behind solid fills.
Key Features
- Multiple colors: Assign as many colors as you like; each color can cover several words, characters, or patterns.
- Regex support: Provide full regular expressions for precise matching — ideal for multilingual text and symbols.
- LTR/RTL detection: The plugin automatically handles both directions, with a test button to preview behavior.
- Cross-browser tuning: Small visual offsets accommodate subtle differences (notably in Firefox) for consistent alignment.
- Non-intrusive: The textarea value remains unchanged, so copy/paste and processing are unaffected.
How It Works
Apply the plugin to a textarea by its ID. In options, pass a map of { regexPattern: color }. The plugin rebuilds a mirrored HTML view with colored spans on its overlay while keeping the original textarea interactive underneath.
Quick Start
Include jQuery and the plugin file, then initialize:
<!-- jQuery and ala_marker assets -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="/path/to/ala_marker.js"></script>
<textarea id="myTextarea">Type here…</textarea>
<script>
// Initialize ala_marker (example palette)
$('#myTextarea').ala_marker({
ala_keywords: {
'\\b(love|peace|hope)\\b': '#ff9', // soft yellow
'[0-9]+': '#9ff', // light blue
'[?!]': '#f99' // gentle red
}
});
</script>
Tip: Colors are rendered with opacity by design to keep the caret visible.
Developer Notes
Browsers can render borders and text metrics a few pixels differently. During testing, Firefox tended to shift the overlay slightly; a minor constant offset corrects this so the overlay stays in sync with the underlying textarea.
Why Transparency Matters
Solid backgrounds can hide the caret. Using partially transparent highlights ensures the caret remains visible, making editing smooth and predictable.
You are free to use, modify, and distribute this plugin.