1 Replies - 1313 Views - Last Post: 20 February 2013 - 02:52 PM

#1 andrewsw  Icon User is online

  • It's just been revoked!
  • member icon

Reputation: 3809
  • View blog
  • Posts: 13,518
  • 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  Icon User is online

  • It's just been revoked!
  • member icon

Reputation: 3809
  • View blog
  • Posts: 13,518
  • 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
  • +
  • -

Page 1 of 1