6 Replies - 3297 Views - Last Post: 10 May 2019 - 06:19 AM

#1 andrewsw   User is offline

  • never lube your breaks
  • member icon

Reputation: 6798
  • View blog
  • Posts: 28,095
  • Joined: 12-December 12

Highlight words on page (Bookmarklet)

Posted 20 February 2013 - 02:45 PM

Snippets are busted currently so I'll post my Bookmarklet here for the moment in case it is of interest to anyone. I know I can press Ctrl-F on a web-page, type the word I'm looking for, and navigate up and down, but I would prefer to just highlight all occurrences of the selected word or phrase on the page.

The following code is a Bookmarklet. Copy the compressed version of the code, create a Bookmark (or Favorite) and paste the code as the url (or address). Give it a name and add it to your Bookmarks toolbar. Then highlight a word or phrase and click the button to highlight all occurrences of the same word or phrase in yellow. Click the button again with nothing selected to remove the highlights.

Compressed version:
javascript: (function() {var els, i, txt=""; if (window.getSelection) {txt = window.getSelection(); } else if (document.getSelection) {txt = document.getSelection(); } else if (document.selection) {txt = document.selection.createRange().text; } else {txt = ""; } if (txt) {txt = txt.toString(); } if (!txt || txt.length == 0) {els = document.querySelectorAll(".hiColor"); i = els.length; while (i--) {els[i].style.backgroundColor="transparent"; els[i].className = ""; } return null; } function searchNode(node, te, len) {var pos, skip=0, spannode, middlebit, endbit, middleclone; if(node.nodeType==3) {pos=node.data.toUpperCase().indexOf(te); if(pos>=0) {spannode=document.createElement("SPAN"); spannode.className ="hiColor"; middlebit=node.splitText(pos); endbit=middlebit.splitText(len); middleclone=middlebit.cloneNode(true); spannode.appendChild(middleclone); middlebit.parentNode.replaceChild(spannode,middlebit); skip=1; } } else if ( node.nodeType==1 && node.childNodes && node.tagName.toUpperCase()!="SCRIPT"&& node.tagName.toUpperCase!="STYLE") {for (var child=0; child < node.childNodes.length; ++child) {child=child+searchNode(node.childNodes[child], te, len); } } return skip; } searchNode(document.body, txt.toUpperCase(), txt.length); els = document.querySelectorAll(".hiColor"); if (els && els.length) {for (var i=0; i < els.length; i++) {els[i].style.backgroundColor="yellow"; } } return null; })();

Formatted version:
javascript: (function() {
    var els, i, txt=""; 
    if (window.getSelection) {
        txt = window.getSelection(); 
    } else if (document.getSelection) {
        txt = document.getSelection(); 
    } else if (document.selection) {
        txt = document.selection.createRange().text; 
    } else {
        txt = ""; 
    } 
    if (txt) {
        txt = txt.toString();
    } 
    if (!txt || txt.length == 0) {
        els = document.querySelectorAll(".hiColor");
        i = els.length;
        while (i--) {
            els[i].style.backgroundColor="transparent";
            els[i].className = "";
        }
        return null; 
    } 
    function searchNode(node, te, len) {
        var pos, skip=0, spannode, middlebit, endbit, middleclone; 
        if(node.nodeType==3) {
            pos=node.data.toUpperCase().indexOf(te); 
            if(pos>=0) {
                spannode=document.createElement("SPAN"); 
                spannode.className ="hiColor"; 
                middlebit=node.splitText(pos); 
                endbit=middlebit.splitText(len); 
                middleclone=middlebit.cloneNode(true); 
                spannode.appendChild(middleclone); 
                middlebit.parentNode.replaceChild(spannode,middlebit); 
                skip=1; 
            } 
        } else if ( node.nodeType==1 && node.childNodes && 
                node.tagName.toUpperCase()!="SCRIPT"&& node.tagName.toUpperCase!="STYLE") {
            for (var child=0; child < node.childNodes.length; ++child) {
                child=child+searchNode(node.childNodes[child], te, len); 
            } 
        } 
        return skip; 
    } 
    searchNode(document.body, txt.toUpperCase(), txt.length);
    els = document.querySelectorAll(".hiColor");
    if (els && els.length) {
        for (var i=0; i < els.length; i++) {
            els[i].style.backgroundColor="yellow";
        }
    }
    return null;
})();

There are 1416 characters in the compressed version. This may be too many for some very old browsers. If this is the case, let me know and I will post a minified version.

Actually, querySelectorAll doesn't work in IE7 - update your browser :)

Is This A Good Question/Topic? 1
  • +

Replies To: Highlight words on page (Bookmarklet)

#2 andrewsw   User is offline

  • never lube your breaks
  • member icon

Reputation: 6798
  • View blog
  • Posts: 28,095
  • Joined: 12-December 12

Re: Highlight words on page (Bookmarklet)

Posted 20 February 2013 - 02:52 PM

Actually, you might delete the word transparent (leaving empty quotes) so that the text reverts to any previously assigned backgroundColor - although, it should do this anyway.
Was This Post Helpful? 0
  • +
  • -

#3 Aleks09   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 09-May 19

Re: Highlight words on page (Bookmarklet)

Posted 09 May 2019 - 05:20 AM

Works pretty well. But what if I want to simplify the task and make only the selection of the current word or phrase? In other words, convert this bookmarklet to a permanent marker.
PS I'm not a full-fledged programmer yet.
Was This Post Helpful? 0
  • +
  • -

#4 andrewsw   User is offline

  • never lube your breaks
  • member icon

Reputation: 6798
  • View blog
  • Posts: 28,095
  • Joined: 12-December 12

Re: Highlight words on page (Bookmarklet)

Posted 09 May 2019 - 05:45 AM

Hello and thank you.

I am not sure what you mean by a permanent marker. Do you mean for it to automatically highlight selected text without clicking the bookmarklet button?
Was This Post Helpful? 0
  • +
  • -

#5 Aleks09   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 09-May 19

Re: Highlight words on page (Bookmarklet)

Posted 09 May 2019 - 08:56 AM

Quote

Do you mean for it to automatically highlight selected text without clicking the bookmarklet button?

No, absolutely not. This should work as is. Except for the “find” function, it should be removed. This should only work for the current selection under the cursor.
Was This Post Helpful? 0
  • +
  • -

#6 andrewsw   User is offline

  • never lube your breaks
  • member icon

Reputation: 6798
  • View blog
  • Posts: 28,095
  • Joined: 12-December 12

Re: Highlight words on page (Bookmarklet)

Posted 09 May 2019 - 11:34 PM

Hello. It would be possible, although, I wrote it more than 6 years ago and, sorry, am not inspired to edit it at this point.

It wouldn't be too tricky though. Look for the part that isolates the current selection, and the part that wraps in a span.

If you just want the feature, though, then you could search for a highlighter plugin for your browser.
Was This Post Helpful? 0
  • +
  • -

#7 Aleks09   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 09-May 19

Re: Highlight words on page (Bookmarklet)

Posted 10 May 2019 - 06:19 AM

While I'm trying to change the code, I stumble upon very similar code Search node innerText for a matching string and wrap the match in the innerHTML maintaining tags and it has been posted only 2.5 years ago.
I've some vague moments with the searchNode(node.childNodes[child], but I think I can do it.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1