💬 Quote Highlighter

Highlights quoted text with customizable colors, styles, and features

Задайте вопрос, напишите отзыв или пожалуйтесь на скрипт.

Автор: misspent
Установок в день: 0
Всего установок: 2
Оценки: 0 0 0
Версия: 1.2
Создано: 29.05.2026
Обновлено: 29.05.2026
Размер: 17,4 КБ
Лицензия: MIT
Работает на: всех сайтах

📌 What It Is

A lightweight script that highlight quoted sentences. It operates entirely client-side, scanning the DOM after page load and continuing to watch for dynamically added content.

🆘 Further notes, Support or Other

🐞 Requests & Bugs

Bug: If you encounter a page that does not work, please give me the website link.
Bug: If something isn't acting how it should, please speak up. I'm willing to attempt to improve this in any way I can.
Requests: Please be concise. I want as much information as possible, like references, screenshots, logs, etc. The more you can give, the easier it is for all of us.

🗪 FaQ

❓ Question: Script written by AI
- ✅ Answer: Yes, as I did have a VERY old version that was a mess + a joke.
❓ Question: Description written by AI
- ✅ Answer: Everything below ⭐ What it does. If it's not perfect, then point it out and it'll be updated.
❓ Question: Why do you not have x/y features
- ✅ Answer: Brain didn't think of it or didn’t want it in the script, but if you ask, then I may add it, cause why not.
❓ Question: Will you upload the other you "made"
- ✅ Answer: See what I did with the made? Pathetic right? Moving on. I'm not sure, as some are rather old, not worth it, really niche, and/or superior scripts by people who actually know what they're doing exist.
❓ Question: Why did I make this script
- ✅ Answer: I research and browse many pages/forums rather frequently, and even though I've filtered a lot as is thanks to Stylus & uBlock Origin extensions, I wanted something that jumps straight to what I might be after, and a light-bulb moment went off when a friend mentioned AI. Some may not like that, but the number of little "projects" I've managed to do thanks to it is mind-blowing to me.

📝 Notes

Browser: LibreWolf
Script extension: ViolentMonkey
Operating System: Windows 11 LTSC
Recommendation: Auto Highlight is far more advanced than this script; I only wanted a version of what I had "made" in script form, mainly for phone/ease of use.

⭐ What It Does

🫀 Core Functionality

Scans all text nodes in the document body using a TreeWalker to find quoted strings matching the configured regex pattern
Wraps matched quotes in styled <span> elements with the class quote-highlight
Watches for DOM changes via MutationObserver to catch quotes added by lazy-loading, infinite scroll, SPAs (Single Page Applications), or AJAX content
Debounces mutation handling (150ms default) to avoid performance thrashing on rapid DOM updates

🛠️ Visual Customization (via CONFIG)

The script offers granular control over appearance:

Setting	Default	Purpose
`textColor`	`#EA9D9C` (soft red/pink)	Color of the quoted text
`backgroundColor`	`rgba(234, 157, 156, 0.12)`	Subtle background tint
`borderRadius`	`0px`	Corner rounding on highlights
`padding`	`0 2px`	Horizontal breathing room
`underline`	`false`	Toggle between background highlight or underline style
`fontWeight`	(commented out)	Optional bold emphasis

Hover state applies a brightness(1.08) filter for subtle interactivity.

🧠 Smart Filtering & Safety Guards

Length constraints: Ignores matches shorter than 2 chars or longer than 500 chars to avoid false positives and performance issues
Tag blacklist: Skips content inside <script>, <style>, <code>, <pre>, <textarea>, <input>, <video>, and other specified elements
Contenteditable protection: Avoids modifying editable regions (like rich text editors)
Already-highlighted detection: Prevents double-wrapping by checking for existing quote-highlight class
CSS-injected styling: Uses GM_addStyle (Userscript API) to inject highlight styles directly

🔥 What It Offers

Feature	Benefit
Universal compatibility	Works on any site—news other than excluded, forums, documentation, social media
SPA & dynamic content support	MutationObserver catches React/Vue/Angular injected content automatically
Non-destructive DOM manipulation	Uses `DocumentFragment` for efficient batch replacements; preserves surrounding text nodes intact
Developer/debug API	Exposes `window.QuoteHighlighter` with `rescan()`, `disconnect()`, and `config` access for console debugging
Zero dependencies	Pure vanilla JS, no libraries required
Configurable regex	Easy to swap `quoteRegex` for different quote styles or regional variants

🤖 Technical Architecture

┌─────────────────┐     ┌──────────────────┐     ┌─────────────────┐
│   DOM Load or   │────▶│   TreeWalker     │────▶│  Regex Match    │
│  Mutation Event │     │ (text node scan) │     │ (quote pattern) │
└─────────────────┘     └──────────────────┘     └────────┬────────┘
                                                          │
                              ┌───────────────────────────┘
                              ▼
                    ┌──────────────────┐
                    │ DocumentFragment │
                    │  (span + text)   │
                    └────────┬─────────┘
                             │
                             ▼
                    ┌──────────────────┐
                    │ replaceChild()   │
                    │ (DOM injection)  │
                    └──────────────────┘

🔎 Regex Pattern Breakdown

/(?<!\w)(["“”““'‘`"])(.*?)(["””””'’`.])(?!\w)/g

Add more yourself by adding symbols between the [] where the other quotes are.

⚡ Use Cases

Reading comprehension: Make quoted speech or citations stand out while reading long articles
Content auditing: Visually verify quote usage across a site
Forum/reddit browsing: Spot user quotes instantly in comment threads
Research: Highlight interview excerpts or cited passages in online papers
Accessibility: Color-coded quotes assist in parsing dialogue-heavy content