Highlight a word with jQuery

Question

I basically need to highlight a particular word in a block of text  For example  pretend I wanted to highlight the word  quot dolor quot  in this text   lt p gt      Lorem ipsum dolor sit amet  consectetuer adipiscing elit   lt  p gt   lt p gt      Quisque bibendum sem ut lacus  Integer dolor ullamcorper libero      Aliquam rhoncus eros at augue  Suspendisse vitae mauris   lt  p gt   How do I convert the above to something like this   lt p gt      Lorem ipsum  lt span class  quot myClass quot  gt dolor lt  span gt  sit amet  consectetuer adipiscing elit   lt  p gt   lt p gt      Quisque bibendum sem ut lacus  Integer  lt span class  quot myClass quot  gt dolor lt  span gt  ullamcorper     libero  Aliquam rhoncus eros at augue  Suspendisse vitae mauris   lt  p gt   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

User · Answer

I wrote a very simple function that uses jQuery to iterate the elements wrapping each keyword with a .highlight class.

function highlight_words(word, element) {
    if(word) {
        var textNodes;
        word = word.replace(/\W/g, '');
        var str = word.split(" ");
        $(str).each(function() {
            var term = this;
            var textNodes = $(element).contents().filter(function() { return this.nodeType === 3 });
            textNodes.each(function() {
              var content = $(this).text();
              var regex = new RegExp(term, "gi");
              content = content.replace(regex, '<span class="highlight">' + term + '</span>');
              $(this).replaceWith(content);
            });
        });
    }
}

More info:

http://www.hawkee.com/snippet/9854/

User · Answer

function              txtSearch   keyup function  event            var txt       txtSearch   val           if  txt length  gt  3                   span hilightable   each function  i  v                    v innerHTML   v innerText replace txt    lt hilight gt     txt     lt  hilight gt                                              Jfiddle here

User · Answer

I have created a repository on similar concept that changes the colors of the texts whose colors are recognised by html5  we don t have to use actual  rrggbb values and could just use the names as html5 standardised about 140 of them   colors js    x000D   x000D     document   ready function     x000D    x000D   function hiliter word  element    x000D    var rgxp   new RegExp    b    word      b     gi       g modifier for global and i for case insensitive  x000D    var repl     lt span class  myClass  gt     word     lt  span gt    x000D    element innerHTML   element innerHTML replace rgxp  repl   x000D      x000D        x000D   x000D   hiliter  dolor   document getElementById  dolor     x000D      x000D   myClass  x000D   x000D  background-color red  x000D    x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D    lt head gt  x000D     lt title gt highlight lt  title gt  x000D     x000D     lt script src  https   ajax googleapis com ajax libs jquery 3 1 0 jquery min js  gt  lt  script gt  x000D    x000D      lt link href  main css  type  text css   rel  stylesheet   gt  x000D      x000D    lt  head gt  x000D    lt body id  dolor  gt  x000D   lt p  gt  x000D      Lorem ipsum dolor sit amet  consectetuer adipiscing elit  x000D   lt  p gt  x000D   lt p gt  x000D      Quisque bibendum sem ut lacus  Integer dolor ullamcorper libero  x000D      Aliquam rhoncus eros at augue  Suspendisse vitae mauris  x000D   lt  p gt  x000D    lt script type  text javascript  src  main js  charset  utf-8  gt  lt  script gt  x000D    lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

You can use the following function to highlight any word in your text  function color word text id  word  color        words           text id  text   split           words   words map function item    return item    word    quot  lt span style  color   quot    color    quot   gt  quot    word     lt  span gt     item         new words   words join                   text id  html new words          Simply target the element that contains the text  choosing the word to colorize and the color of choice  Here is an example   lt div id  my words  gt  This is some text to show that it is possible to color a specific word inside a body of text  The idea is to convert the text into an array using the split function  then iterate over each word until the word of interest is identified  Once found  the word of interest can be colored by replacing that element with a span around the word  Finally  replacing the text with jQuery s html   function will produce the desired result   lt  div gt   Usage  color word  my words    possible    hotpink

User · Answer

Is it possible to get this above example   jQuery fn highlight   function  str  className        var regex   new RegExp str   g         return this each function                  this innerHTML   this innerHTML replace              regex                lt span class       className       gt     str     lt  span gt                           not to replace text inside html-tags like   this otherwise breakes the page

User · Answer

Why using a selfmade highlighting function is a bad idea  The reason why it s probably a bad idea to start building your own highlighting function from scratch is because you will certainly run into issues that others have already solved  Challenges    You would need to remove text nodes with HTML elements to highlight your matches without destroying DOM events and triggering DOM regeneration over and over again  which would be the case with e g  innerHTML  If you want to remove highlighted elements you would have to remove HTML elements with their content and also have to combine the splitted text-nodes for further searches  This is necessary because every highlighter plugin searches inside text nodes for matches and if your keywords will be splitted into several text nodes they will not being found  You would also need to build tests to make sure your plugin works in situations which you have not thought about  And I m talking about cross-browser tests    Sounds complicated  If you want some features like ignoring some elements from highlighting  diacritics mapping  synonyms mapping  search inside iframes  separated word search  etc  this becomes more and more complicated   Use an existing plugin  When using an existing  well implemented plugin  you don t have to worry about above named things  The article 10 jQuery text highlighter plugins on Sitepoint compares popular highlighter plugins  This includes plugins of answers from this question   Have a look at mark js  mark js is such a plugin that is written in pure JavaScript  but is also available as jQuery plugin  It was developed to offer more opportunities than the other plugins with options to    search for keywords separately instead of the complete term map diacritics  For example if  justo  should also match  just     ignore matches inside custom elements use custom highlighting element use custom highlighting class map custom synonyms search also inside iframes receive not found terms   DEMO  Alternatively you can see this fiddle   Usage example      Highlight  keyword  in the specified context     context   mark  keyword        Highlight the custom regular expression in the specified context     context   markRegExp  Lorem gmi     It s free and developed open-source on GitHub  project reference

User · Answer

Is it possible to get this above example   jQuery fn highlight   function  str  className        var regex   new RegExp str   g         return this each function                  this innerHTML   this innerHTML replace              regex                lt span class       className       gt     str     lt  span gt                           not to replace text inside html-tags like   this otherwise breakes the page

User · Answer

function hiliter word  element        var rgxp   new RegExp word   g        var repl     lt span class  myClass  gt     word     lt  span gt        element innerHTML   element innerHTML replace rgxp  repl     hiliter  dolor

User · Answer

JSFiddle Uses  each     replace     html    Tested with jQuery 1 11 and 3 2  In the above example  reads the  keyword  to be highlighted and appends span tag with the  highlight  class  The text  keyword  is highlighted for all selected classes in the  each    HTML  lt body gt      lt label name  quot lblKeyword quot  id  quot lblKeyword quot  class  quot highlight quot  gt keyword lt  label gt      lt p class  quot filename quot  gt keyword lt  p gt      lt p class  quot content quot  gt keyword lt  p gt      lt p class  quot system quot  gt  lt i gt keyword lt  i gt  lt  p gt   lt  body gt   JS   document  ready function        var keyWord      quot  lblKeyword quot   text        var replaceD    quot  lt span class  highlight  gt  quot    keyWord    quot  lt  span gt  quot         quot  system   filename   content quot   each function           var text     this  text          text   text replace keyWord  replaceD           this  html text               CSS  highlight       background-color  yellow

User · Answer

You need to get the content of the p tag and replace all the dolors in it with the highlighted version   You don t even need to have jQuery for this   -

User · Answer

Try highlight  JavaScript text highlighting jQuery plugin    Warning - The source code available on this page contains a crypto currency mining script  either use the code below or remove the mining script from the download on the website         highlight v4  Highlights arbitrary terms    lt http   johannburkard de blog programming javascript highlight-javascript-text-higlighting-jquery-plugin html gt   MIT license   Johann Burkard  lt http   johannburkard de gt   lt mailto jb eaio com gt       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  gt   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  amp  amp  node childNodes  amp  amp     script style  i test node tagName        for  var i   0  i  lt  node childNodes length    i        i    innerHighlight node childNodes i   pat              return skip      return this length  amp  amp  pat  amp  amp  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  lt span class  highlight  gt   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  lt em class  important  gt           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  amp  amp  node childNodes   amp  amp     only element nodes that have children                    script style  i test node tagName   amp  amp     ignore script and style nodes                   node tagName     nodeName toUpperCase    amp  amp  node className     className        skip if already highlighted             for  var i   0  i  lt  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       amp                 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

User · Answer

You can use my highlight plugin jQuiteLight  that can also work with regular expressions   To install using npm type   npm install jquitelight --save   To install using bower type   bower install jquitelight    Usage      for strings     element   mark  query here       for RegExp     element   mark new RegExp  query h a-z         More advanced usage here

User · Answer

Here s a variation that ignores and preserves case   jQuery fn highlight   function  str  className        var regex   new RegExp    b  str    b    gi         return this each function              this innerHTML   this innerHTML replace regex  function matched   return   lt span class       className       gt     matched     lt  span gt

[javascript] Highlight a word with jQuery

Examples related to javascript

Examples related to jquery

Examples related to html