☰

Universal Text Highlighting

highlights text in an element

  1. // ==UserScript==
  2. // @name       Universal Text Highlighting
  3. // @version    1.1
  4. // @author http://bartaz.github.io/sandbox.js/jquery.highlight.html
  5. // @description  highlights text in an element
  6. // @require http://code.jquery.com/jquery-latest.min.js
  7. // @match       http://*/*
  8. // @match       https://*/*
  9. // @copyright  2012+, You
  10. // @namespace https://greasyfork.org/users/2698
  11. // @grant       none
  12. // ==/UserScript==
  13.  
  14. jQuery.extend({
  15.     highlight: function (node, re, nodeName, className) {
  16.         if (node.nodeType === 3) {
  17.             var match = node.data.match(re);
  18.             if (match) {
  19.                 var highlight = document.createElement(nodeName || 'span');
  20.                 highlight.className = className || 'highlight';
  21.                 var wordNode = node.splitText(match.index);
  22.                 wordNode.splitText(match[0].length);
  23.                 var wordClone = wordNode.cloneNode(true);
  24.                 highlight.appendChild(wordClone);
  25.                 wordNode.parentNode.replaceChild(highlight, wordNode);
  26.                 return 1; //skip added node in parent
  27.             }
  28.         } else if ((node.nodeType === 1 && node.childNodes) && // only element nodes that have children
  29.                 !/(script|style)/i.test(node.tagName) && // ignore script and style nodes
  30.                 !(node.tagName === nodeName.toUpperCase() && node.className === className)) { // skip if already highlighted
  31.             for (var i = 0; i < node.childNodes.length; i++) {
  32.                 i += jQuery.highlight(node.childNodes[i], re, nodeName, className);
  33.             }
  34.         }
  35.         return 0;
  36.     }
  37. });
  38.  
  39. jQuery.fn.unhighlight = function (options) {
  40.     var settings = { className: 'highlight', element: 'span' };
  41.     jQuery.extend(settings, options);
  42.  
  43.     return this.find(settings.element + "." + settings.className).each(function () {
  44.         var parent = this.parentNode;
  45.         parent.replaceChild(this.firstChild, this);
  46.         parent.normalize();
  47.     }).end();
  48. };
  49.  
  50. jQuery.fn.highlight = function (words, options) {
  51.     var settings = { className: 'highlight', element: 'span', caseSensitive: false, wordsOnly: false };
  52.     jQuery.extend(settings, options);
  53.     
  54.     if (words.constructor === String) {
  55.         words = [words];
  56.     }
  57.     words = jQuery.grep(words, function(word, i){
  58.       return word != '';
  59.     });
  60.     words = jQuery.map(words, function(word, i) {
  61.       return word.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
  62.     });
  63.     if (words.length == 0) { return this; };
  64.  
  65.     var flag = settings.caseSensitive ? "" : "i";
  66.     var pattern = "(" + words.join("|") + ")";
  67.     if (settings.wordsOnly) {
  68.         pattern = "\\b" + pattern + "\\b";
  69.     }
  70.     var re = new RegExp(pattern, flag);
  71.     
  72.     return this.each(function () {
  73.         jQuery.highlight(this, re, settings.element, settings.className);
  74.     });
  75. };
  76.  
  77. //define element to wrap css color around
  78. $('body p').highlight('Today'); //Replace Today with the word you want to highlight
  79.  
  80. //define css color rule for highlight bg
  81. $(".highlight").css({ backgroundColor: "#FFFF88" });