| 1 | /*
|
| 2 | * jQuery Highlight plugin
|
| 3 | *
|
| 4 | * Based on highlight v3 by Johann Burkard
|
| 5 | * http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html
|
| 6 | *
|
| 7 | * Code a little bit refactored and cleaned (in my humble opinion).
|
| 8 | * Most important changes:
|
| 9 | * - has an option to highlight only entire words (wordsOnly - false by default),
|
| 10 | * - has an option to be case sensitive (caseSensitive - false by default)
|
| 11 | * - highlight element tag and class names can be specified in options
|
| 12 | *
|
| 13 | * Usage:
|
| 14 | * // wrap every occurrance of text 'lorem' in content
|
| 15 | * // with <span class='highlight'> (default options)
|
| 16 | * $('#content').highlight('lorem');
|
| 17 | *
|
| 18 | * // search for and highlight more terms at once
|
| 19 | * // so you can save some time on traversing DOM
|
| 20 | * $('#content').highlight(['lorem', 'ipsum']);
|
| 21 | * $('#content').highlight('lorem ipsum');
|
| 22 | *
|
| 23 | * // search only for entire word 'lorem'
|
| 24 | * $('#content').highlight('lorem', { wordsOnly: true });
|
| 25 | *
|
| 26 | * // don't ignore case during search of term 'lorem'
|
| 27 | * $('#content').highlight('lorem', { caseSensitive: true });
|
| 28 | *
|
| 29 | * // wrap every occurrance of term 'ipsum' in content
|
| 30 | * // with <em class='important'>
|
| 31 | * $('#content').highlight('ipsum', { element: 'em', className: 'important' });
|
| 32 | *
|
| 33 | * // remove default highlight
|
| 34 | * $('#content').unhighlight();
|
| 35 | *
|
| 36 | * // remove custom highlight
|
| 37 | * $('#content').unhighlight({ element: 'em', className: 'important' });
|
| 38 | *
|
| 39 | *
|
| 40 | * Copyright (c) 2009 Bartek Szopka
|
| 41 | *
|
| 42 | * Licensed under MIT license.
|
| 43 | *
|
| 44 | */
|
| 45 |
|
| 46 | jQuery.extend({
|
| 47 | highlight: function (node, re, nodeName, className) {
|
| 48 | if (node.nodeType === 3) {
|
| 49 | var match = node.data.match(re);
|
| 50 | if (match) {
|
| 51 | var highlight = document.createElement(nodeName || 'span');
|
| 52 | highlight.className = className || 'highlight';
|
| 53 | var wordNode = node.splitText(match.index);
|
| 54 | wordNode.splitText(match[0].length);
|
| 55 | var wordClone = wordNode.cloneNode(true);
|
| 56 | highlight.appendChild(wordClone);
|
| 57 | wordNode.parentNode.replaceChild(highlight, wordNode);
|
| 58 | return 1; //skip added node in parent
|
| 59 | }
|
| 60 | } else if ((node.nodeType === 1 && node.childNodes) && // only element nodes that have children
|
| 61 | !/(script|style)/i.test(node.tagName) && // ignore script and style nodes
|
| 62 | !(node.tagName === nodeName.toUpperCase() && node.className === className)) { // skip if already highlighted
|
| 63 | for (var i = 0; i < node.childNodes.length; i++) {
|
| 64 | i += jQuery.highlight(node.childNodes[i], re, nodeName, className);
|
| 65 | }
|
| 66 | }
|
| 67 | return 0;
|
| 68 | }
|
| 69 | });
|
| 70 |
|
| 71 | jQuery.fn.unhighlight = function (options) {
|
| 72 | var settings = { className: 'highlight', element: 'span' };
|
| 73 | jQuery.extend(settings, options);
|
| 74 |
|
| 75 | return this.find(settings.element + "." + settings.className).each(function () {
|
| 76 | var parent = this.parentNode;
|
| 77 | parent.replaceChild(this.firstChild, this);
|
| 78 | parent.normalize();
|
| 79 | }).end();
|
| 80 | };
|
| 81 |
|
| 82 | jQuery.fn.highlight = function (words, options) {
|
| 83 | var settings = { className: 'highlight', element: 'span', caseSensitive: false, wordsOnly: false };
|
| 84 | jQuery.extend(settings, options);
|
| 85 |
|
| 86 | if (words.constructor === String) {
|
| 87 | words = [words];
|
| 88 | }
|
| 89 | words = jQuery.grep(words, function(word, i){
|
| 90 | return word != '';
|
| 91 | });
|
| 92 | words = jQuery.map(words, function(word, i) {
|
| 93 | return word.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
|
| 94 | });
|
| 95 | if (words.length == 0) { return this; };
|
| 96 |
|
| 97 | var flag = settings.caseSensitive ? "" : "i";
|
| 98 | var pattern = "(" + words.join("|") + ")";
|
| 99 | if (settings.wordsOnly) {
|
| 100 | pattern = "\\b" + pattern + "\\b";
|
| 101 | }
|
| 102 | var re = new RegExp(pattern, flag);
|
| 103 |
|
| 104 | return this.each(function () {
|
| 105 | jQuery.highlight(this, re, settings.element, settings.className);
|
| 106 | });
|
| 107 | };
|
| 108 |
|