Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Highlight a word with jQuery

I basically need to highlight a particular word in a block of text. For example, pretend I wanted to highlight the word "dolor" in this text:

<p>     Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p> <p>     Quisque bibendum sem ut lacus. Integer dolor ullamcorper libero.     Aliquam rhoncus eros at augue. Suspendisse vitae mauris. </p> 

How do I convert the above to something like this:

<p>     Lorem ipsum <span class="myClass">dolor</span> sit amet, consectetuer adipiscing elit. </p> <p>     Quisque bibendum sem ut lacus. Integer <span class="myClass">dolor</span> ullamcorper     libero. Aliquam rhoncus eros at augue. Suspendisse vitae mauris. </p> 

Is this possible with jQuery?

Edit: As Sebastian pointed out, this is quite possible without jQuery - but I was hoping there might be a special method of jQuery which would let you do selectors on the text itself. I'm already using jQuery heavily on this site, so keeping everything wrapped up in jQuery would make things perhaps a bit more tidy.

like image 598
nickf Avatar asked Sep 23 '08 06:09

nickf


People also ask

How do you highlight a word in JavaScript?

Highlight Text Using the Mark Tag Method in JavaScriptIf you surround any text inside the mark tag, the browser will automatically highlight it in a striking yellow color. This will make highlighting a searched text quite a simple task then.


2 Answers

Try highlight: JavaScript text highlighting jQuery plugin. Warning: The source code available on this page contains a cryptocurrency mining script, either use the code below or remove the mining script from the script downloaded from the website.

/*  highlight v4  Highlights arbitrary terms.  <http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html>  MIT license.  Johann Burkard <http://johannburkard.de> <mailto:[email protected]>  */  jQuery.fn.highlight = function(pat) {  function innerHighlight(node, pat) {   var skip = 0;   if (node.nodeType == 3) {    var pos = node.data.toUpperCase().indexOf(pat);    if (pos >= 0) {     var spannode = document.createElement('span');     spannode.className = 'highlight';     var middlebit = node.splitText(pos);     var endbit = middlebit.splitText(pat.length);     var middleclone = middlebit.cloneNode(true);     spannode.appendChild(middleclone);     middlebit.parentNode.replaceChild(spannode, middlebit);     skip = 1;    }   }   else if (node.nodeType == 1 && node.childNodes && !/(script|style)/i.test(node.tagName)) {    for (var i = 0; i < node.childNodes.length; ++i) {     i += innerHighlight(node.childNodes[i], pat);    }   }   return skip;  }  return this.length && pat && pat.length ? this.each(function() {   innerHighlight(this, pat.toUpperCase());  }) : this; };  jQuery.fn.removeHighlight = function() {  return this.find("span.highlight").each(function() {   this.parentNode.firstChild.nodeName;   with (this.parentNode) {    replaceChild(this.firstChild, this);    normalize();   }  }).end(); }; 

Also try the "updated" version of the original script.

/*  * jQuery Highlight plugin  *  * Based on highlight v3 by Johann Burkard  * http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html  *  * Code a little bit refactored and cleaned (in my humble opinion).  * Most important changes:  *  - has an option to highlight only entire words (wordsOnly - false by default),  *  - has an option to be case sensitive (caseSensitive - false by default)  *  - highlight element tag and class names can be specified in options  *  * Usage:  *   // wrap every occurrance of text 'lorem' in content  *   // with <span class='highlight'> (default options)  *   $('#content').highlight('lorem');  *  *   // search for and highlight more terms at once  *   // so you can save some time on traversing DOM  *   $('#content').highlight(['lorem', 'ipsum']);  *   $('#content').highlight('lorem ipsum');  *  *   // search only for entire word 'lorem'  *   $('#content').highlight('lorem', { wordsOnly: true });  *  *   // don't ignore case during search of term 'lorem'  *   $('#content').highlight('lorem', { caseSensitive: true });  *  *   // wrap every occurrance of term 'ipsum' in content  *   // with <em class='important'>  *   $('#content').highlight('ipsum', { element: 'em', className: 'important' });  *  *   // remove default highlight  *   $('#content').unhighlight();  *  *   // remove custom highlight  *   $('#content').unhighlight({ element: 'em', className: 'important' });  *  *  * Copyright (c) 2009 Bartek Szopka  *  * Licensed under MIT license.  *  */  jQuery.extend({     highlight: function (node, re, nodeName, className) {         if (node.nodeType === 3) {             var match = node.data.match(re);             if (match) {                 var highlight = document.createElement(nodeName || 'span');                 highlight.className = className || 'highlight';                 var wordNode = node.splitText(match.index);                 wordNode.splitText(match[0].length);                 var wordClone = wordNode.cloneNode(true);                 highlight.appendChild(wordClone);                 wordNode.parentNode.replaceChild(highlight, wordNode);                 return 1; //skip added node in parent             }         } else if ((node.nodeType === 1 && node.childNodes) && // only element nodes that have children                 !/(script|style)/i.test(node.tagName) && // ignore script and style nodes                 !(node.tagName === nodeName.toUpperCase() && node.className === className)) { // skip if already highlighted             for (var i = 0; i < node.childNodes.length; i++) {                 i += jQuery.highlight(node.childNodes[i], re, nodeName, className);             }         }         return 0;     } });  jQuery.fn.unhighlight = function (options) {     var settings = { className: 'highlight', element: 'span' };     jQuery.extend(settings, options);      return this.find(settings.element + "." + settings.className).each(function () {         var parent = this.parentNode;         parent.replaceChild(this.firstChild, this);         parent.normalize();     }).end(); };  jQuery.fn.highlight = function (words, options) {     var settings = { className: 'highlight', element: 'span', caseSensitive: false, wordsOnly: false };     jQuery.extend(settings, options);          if (words.constructor === String) {         words = [words];     }     words = jQuery.grep(words, function(word, i){       return word != '';     });     words = jQuery.map(words, function(word, i) {       return word.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");     });     if (words.length == 0) { return this; };      var flag = settings.caseSensitive ? "" : "i";     var pattern = "(" + words.join("|") + ")";     if (settings.wordsOnly) {         pattern = "\\b" + pattern + "\\b";     }     var re = new RegExp(pattern, flag);          return this.each(function () {         jQuery.highlight(this, re, settings.element, settings.className);     }); }; 
like image 183
mlarsen Avatar answered Sep 22 '22 08:09

mlarsen


function hiliter(word, element) {     var rgxp = new RegExp(word, 'g');     var repl = '<span class="myClass">' + word + '</span>';     element.innerHTML = element.innerHTML.replace(rgxp, repl); } hiliter('dolor'); 
like image 22
Andrew Hedges Avatar answered Sep 22 '22 08:09

Andrew Hedges