Text Highlighter - Dynamic

Highlights User-defined Text

< Feedback on Text Highlighter - Dynamic


Posted: 2015-09-07
Edited: 2015-10-12

New Beta Version Available for Testing

Over the past year I've gotten a good amount of feedback about this script, which was largely unchanged from the original by erosman. Users indicated that it needs to be able to handle more than one keyword/style pair, and there also was interest in allowing more advanced matching pattern (regular expressions). I personally found it annoying that the page had to be reloaded after a change. In thinking about how to improve the script, I also thought it would be useful to add buttons to seek within the document to the matches. So with all of that in mind, I present version 1.9.7beta 1.9.8beta.

The beta should migrate over your existing keyword list and style rules. However, my testing has been limited, so please make a note of those before installing "just in case" something goes wrong.


NOTE: THE STYLE RULES NEED TWEAKING TO OVERRIDE SOME SITE STYLES. Please give me your examples of sites where the bar is messed up.

The script is available here: Please see the following script instead: Text Highlight and Seek

I often get multiple install dialogs from my web server and I have no idea why. You can close the extra ones; you don't need to install multiple times.

To get an idea of how it will work, please see the following screen shots:

(1) The script displays a small "H" button in the upper right corner of the page. You can click that button to display the control bar.

(2) You can display a list of the keyword/style sets from the bar. Some samples are included for reference.

(3) Use the Seek button for a set to enable the buttons on the control bar.

(4) and (5) Use the Edit button to open a panel to modify the keywords or associated styles. Note that any color or background-color rules in "Custom" will override the controls above it. Please note: the script does not clean your input! I will need to think about how to help avoid useless keywords for the next pre-release version.

(6) Use the Add New Set button to create a new set.

(7) Use the Options drop-down on the control bar to turn off the "H" button or to not highlight in <pre> and <code> tags.

The "monkey menu" has a option to flush out all of the new keyword/style sets so you can start testing as though it was a fresh install. If the data somehow gets corrupted, you might need to use that. This beta

I look forward to your comments!

Posted: 2015-09-08

Wow, this is far greater than I expected. With these many options, specially regex and whole word match we would have more magical power to highlight and cross what interest us the most. I would definitely use it everywhere!

Works perfectly on both Firefox and Opera.

Thank you for this great script.. I'm going to build my long list of rules now!

ps. I used to have an issue loading pages that have input box containing a keyword to be highlighted, now it is gone.. how great is that :P

Posted: 2015-09-10

Version 1.9.9beta will fix the following:

(1) Showing/hiding highlights for a set and then changing between "anywhere" and "whole word" causes a previously marked part of a word to be highlighted as a whole word, and you have to reload the page to fix it.

(2) Seek does not skip over hidden matches.

Posted: 2015-09-20

Great script:)
Is there a way to edit it, so that it would not change the font or the size of the words, just change the colors?

Posted: 2015-09-20

Hi Okiq, regarding the text color, I'll think about how to implement that. For now, if you add:


to the Custom box, that will override the RGB value for the color.

The script doesn't change the font size. It does surround the highlighted text with <span></span> tags, so if the site has a rule which kicks in for span elements, that could explain why they have unexpected styles. Are there particular sites where you notice this problem?

Posted: 2015-09-20
Edited: 2015-09-20

Version 2.0.0beta changes from using a <span> tag to a made up <thdfrag> tag, to hopefully avoid web page style rules specific to spans.

This version also has right-click context menu integration for Firefox users (doesn't work on Chrome):

* You can right-click a highlight, then disable highlighting for that set.
* You can select a word and right-click it, then enable highlighting of a matching set (if any); if none match, because it is doing a fairly exact search, the script displays the current list of sets.
* You can select a word and right-click it, then create a new highlight set for that word.

Posted: 2015-09-30
Edited: 2015-09-30

When using regex, the whole match will be highlighted. Is there a chance to make it highlight a group. Example: /de(activate)/ that would highlight activate only when it's preceded by de.


Posted: 2015-09-30

When using regex, the whole match will be highlighted. Is there a chance to make it highlight a group. Example: /de(activate)/ that would highlight activate only when it's precede by de.


Hi Jenie, I'm sure it's possible if one really understands how regular expression work. Ha ha. Is there a page you can point me to with sample code for it?

The current design of the data structure doesn't provide for custom/partial replacement rules for individual keyword sets, but hopefully that could be solved without requiring vast amounts of data re-entry. Actually, it might be possible to store both strings in the keywords property rather than creating a new property; that would minimize disruption for the (3?) current beta users.

Posted: 2015-09-30
Edited: 2015-09-30

Hi Jefferson, I didn't fully get what you meant, maybe because I'm not that good with codes..

As I understand by using "Match type:Whole word only" your script would put it in something similar to a regex..

/ word1 | word2 | word3 / but highlight the word itself and never the spaces. So I want to do the same thing here only not with spaces but rather whatever I want. Using "Match type: Regular Expression".

In another word in that example, I want to highlight "activate" only if it's a part of the word "deactivate".

Posted: 2015-10-05

Hey Jefferson,

I registered special on this website just to say "Thank you" for modifying this user script. Glad to see this thread is fairly new as well! For the longest time, I have been using "innerHTML" to accomplish this, e.g.:

document.body.innerHTML=document.body.innerHTML.replace(/Justin Boone/g, function(m){return ''+m+''});

But it was far too slow, (especially in Tampermonkey, less in Greasemonkey). I found erosman's original script (on the userscripts.org archive) before I knew of your modification and was sad to see it didn't work 1) In Firefox without me modifying the code, and 2) In Chrome, at all.

But there you were, the hero in my next Google search to see if someone had updated the script. Thank you sir! I'm using this to highlight the most accurate Fantasy Football experts, and my current players on my favorite news websites as well. An example is attached-- this simple kind of functionality sure puts me ahead! :)

I'm really looking forward to any new changes you make to this application. Consider me another beta tester!

I'd like to suggest an "Import" option (as I see you're already planning)-- this would allow us to change them in bulk a lot quicker. I'd also change "hide" to "remove" or "delete" and also place that function in the keyword/highlight drop down. Perhaps a way to re-arrange them as well? (Even if that has to be done in an export/import, it would be handy).

There's only ONE MORE suggestion I have, and that would be some ability to have multiple different types of highlights on the "same" keyword. As you can see in the attachment, I have a border-bottom:2px of a particular border color, to color-code the top experts of 2014 (last year). The same border color corresponds to this year's background color. As you can see, in order to do this I need to create a new set for each of the dozens of possible options. If I try to create another set with the same word criteria, the second one is currently ignored. I don't know if that's tough to fix but it would be awesome!

Anyway, thank you again for taking the initiative to make this "already powerful" idea much more powerful, (and usable!)


Posted: 2015-10-06

Hi Matt, CSS can accommodate additional classes, so that John Doe could be in two sets with both sets of style rules applied, but the current beta is built around two assumptions that make it hard to overlap sets:

(1) A highlighted fragment has only one set number in the txhidy15 attribute; and
(2) Inside a highlighted fragment, there is only plain text, so the script won't look for a possible match inside an existing fragment.

I'm not sure how hard it would be to redesign those things.

Posted: 2015-10-06
Edited: 2015-10-06

Edit: nevermind. My idea wouldn't work. Sorry for this post-- I can't delete it.

Posted: 2015-10-12

Hello Testers:

Thank you for your feedback, I'm ready to release what we have. The main change in version 2.0.3 versus the last beta is that there is now an Import feature which you probably will need to migrate your keyword sets.


To avoid disrupting users of this version of the script, I decided to move the beta code over to a new script. That is: Text Highlight and Seek. Here is the process:

  1. Export from beta: Click Export Sets to display your data and copy/paste that to a text editor (e.g., Notepad on Windows). To avoid introducing line breaks into the data, set your editor not to word wrap before saving.
  2. Disable beta: On the Firefox Add-ons page/Tampermonkey Dashboard, find Text Highlighter - Dynamic and disable it. (I suggest not removing it yet in case you discover that your export was incomplete.)
  3. Install Text Highlight and Seek.
  4. Import your data: Click Import Sets and paste your data and click OK. You can try any of the options (Total replace, Replace same-numbered sets, or Add -- Add will leave the sample sets in place).

If you run into any problems in the transition, please let me know.

Matt -- total replace should allow you to edit externally and actually delete things you don't want instead of just hiding them.

Posted: 2015-10-13
Edited: 2015-10-13


Thanks for the update. However, I followed your update directions and installed your new script and ran into a couple major issues.

Here was my initial export with 8 sets: http://pastebin.com/ZA3Q4GWu

After disabling the old version, installing the new version, and customizing my includes (sites), I went to import and it prompted me for "what kind of import" because the default sets were still in place (but disabled). I said Total Replace.

Issue 1: It is only showing two of my sets (set 114 & 115).

Issue 2: Neither of these two sets are working.

When I click to export what I have just imported, all of my sets are still there, identical to my import.

Any ideas?


Posted: 2015-10-13

P.S. Here is a screenshot of what displays in this "dynamic" version.

Posted: 2015-10-13

Hi Matt, regarding Issue #1:

I don't know what happened, but in your export data on Pastebin, it seems that everything between set102 and set113 is missing, and set113 has "visible":"false" when it should be true.

Need to get offline now but will look at Issue #2.

Posted: 2015-10-13
Edited: 2015-10-13

Hi Matt, I think I see where the data disappeared from the export, but I don't know why. This is in set102:

"backcolor":"rgb(2...rder-bottom:#fff600 solid 2px;"

Can you re-export to see whether this is an issue in the original data, and/or an artifact of the export process? I didn't check to see whether the Prompt dialog could mangle long strings... it shouldn't...

It's hard for me to replicate Issue #2 without editing the keywords to something on this site, and it works with the additional terms.

Posted: 2020-04-13
Edited: 2020-04-13


Post reply

Sign in to post a reply.