Is it possible to select a specific text string?

Antimoany

I'm looking to highlight specific words by changing their text colour and background colour. In theory, very easy.

But I don't know how to highlight the desired words.

This might not be possible at all, but googling for help with stylus stuff or userstyles in general is nearly impossible, so my only choice is to ask here.

If a paragraph contains the phrase "wilting leaves", how do I write a style that alters only the phrase "wilting leaves", leaving the rest of the paragraph as-is?

anagrammar

You'd need javascript to parse the text and wrap matched words inside their own elements to be able to differentiate them from the rest of the text. A quick search led me to this script by @Jefferson, who's a good guy and occasionally answers questions here. Seems highly configurable, but you'll need to tweak it to suit your needs.

Antimoany

Thanks, I don't know a lot about javascript but I think I can use that script for my purposes.

EDIT: Actually, looks like I'm going to need help. I can't sign up to greasyfork to ask the dev for help becase that site will literally not let me make an account.

I can't figure out how to get it to actually change. The default highlights are working, but I can't add any new ones. If I close the edit tab, and then choose to edit the userscript again, the edit I made isn't even there. There's no save button. I hit CNTRL+S a few dozen times on the offchance, but that didn't work either.

I googled "how to save changes to userscript" and found a page telling me to use CNTRL+S. But that doesn't work.

EDIT: Suddenly the saves are sticking. Great. My edit is still there. But it's not working. It's in the script but the string isn't highlighting.

decembre

Here a little thing what i use with some chance 'maybe it can be help you):

== Using attr(), with pseudo-elements and JavaScript

we'll set a data-txt attribute using DOM scripting.
Here we've just copied the innerHTML of our paragraph element
to the data-txt attribute when the DOMContentLoaded event fires.

window.addEventListener('DOMContentLoaded', function(){
    var p = document.querySelector('p');
    p.dataset.txt = p.innerHTML;
}
window.addEventListener('DOMContentLoaded', function(){
    var p = document.querySelector('p');
    p.dataset.txt = p.innerHTML;
    p.classList.add('triptych');
},false);

anagrammar

You never wanna edit the actual script itself if you can avoid it. It's better to use "settings" overrides, so you can receive future updates without overwriting your edits.

Use TamperMonkey, and in the script settings, negate all the script "includes" with "user excludes", and then set your own "user includes" to whichever site you want it to work on. I'll use this forum as an example and take some screenshots.


Includes/excludes in TM:




Open script options UI:



Set your match words (you can disable the two below it):



If you click "edit" next to the matching text, you can change which text to match, the styling of matched text, and other options. The script has tons of built-in options, and a "seek" feature for skipping through matches. I've never had the need for this kinda script, but if I did, I like this one.

Antimoany

I really appreciate the detailed explanation! I did try using the "H" menu as the script page said to, but the "H" only appeared on the greasemonkey website, and I thought I had to edit the script manually to force it to apply to other sites.

The highlighter is working as desired now. Thank you!

anagrammar

Sure thing. Glad you got it working. =)