How to highlight text using javascript

Question

Can someone help me with a javascript function that can highlight text on a web page  And the requirement is to - highlight only once  not like highlight all occurrences of the text as we do in case of search

User · Answer

function stylizeHighlightedString          var text   window getSelection            For diagnostics     var start   text anchorOffset      var end   text focusOffset - text anchorOffset       range   window getSelection   getRangeAt 0        var selectionContents   range extractContents        var span   document createElement  span         span appendChild selectionContents        span style backgroundColor    yellow       span style color    black        range insertNode span

User · Answer

Here s my regexp pure JavaScript solution   function highlight text        document body innerHTML   document body innerHTML replace          new RegExp text           lt      lt      gi              lt b style  background-color  ff0 font-size 100   gt   amp  lt  b gt

User · Answer

Simple TypeScript example  NOTE  While I agree with  Stefan in many things  I only needed a simple match highlighting   module myApp Search        use strict        export class Utils           private static regexFlags    gi           private static wrapper    mark            private static wrap match  string   string               return   lt     Utils wrapper     gt     match     lt      Utils wrapper     gt                       static highlightSearchTerm term  string  searchResult  string   string               let regex   new RegExp term  Utils regexFlags                return searchResult replace regex  match   gt  Utils wrap match                        And then constructing the actual result   module myApp Search        use strict        export class SearchResult           id  string          title  string           constructor result  term   string                this id   result id              this title   term   Utils highlightSearchTerm term  result title    result title

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   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

I have the same problem  a bunch of text comes in through a xmlhttp request  This text is html formatted  I need to highlight every occurrence   str   lt img src  brown fox jpg  title  The brown fox    gt          lt p gt some text containing fox  lt  p gt     The problem is that I don t need to highlight text in tags  For example I need to highlight fox   Now I can replace it with   var word  fox   word     b        word replace                        -   g      1                b    var r   new RegExp word  igm    str replace r   lt span class  hl  gt  1 lt  span gt      To answer your question  you can leave out the g in regexp options and only first occurrence will be replaced but this is still the one in the img src property and destroys the image tag    lt img src  brown  lt span class  hl  gt fox lt  span gt  jpg  title  The brown  lt span  class  hl  gt fox lt  span gt    gt    This is the way I solved it but was wondering if there is a better way  something I ve missed in regular expressions   str   lt img src  brown fox jpg  title  The brown fox    gt          lt p gt some text containing fox  lt  p gt   var word  fox   word     b        word replace                        -   g      1            b    var r   new RegExp word  igm    str replace    gt    lt    lt   igm function a       return a replace r   lt span class  hl  gt  1 lt  span gt

User · Answer

None of the other solutions really fit my needs  and although Stefan Steiger s solution worked as I expected I found it a bit too verbose   Following is my attempt    x000D   x000D      x000D     Highlight keywords inside a DOM element x000D      param  string  elem Element to search for keywords in x000D      param  string    keywords Keywords to highlight x000D      param  boolean  caseSensitive Differenciate between capital and lowercase letters x000D      param  string  cls Class to apply to the highlighted keyword x000D      x000D  function highlight elem  keywords  caseSensitive   false  cls    highlight     x000D    const flags   caseSensitive    gi     g   x000D       Sort longer matches first to avoid x000D       highlighting keywords within keywords  x000D    keywords sort  a  b    gt  b length - a length   x000D    Array from elem childNodes  forEach child   gt    x000D      const keywordRegex   RegExp keywords join       flags   x000D      if  child nodeType     3       not a text node x000D        highlight child  keywords  caseSensitive  cls   x000D        else if  keywordRegex test child textContent     x000D        const frag   document createDocumentFragment    x000D        let lastIdx   0  x000D        child textContent replace keywordRegex   match  idx    gt    x000D          const part   document createTextNode child textContent slice lastIdx  idx    x000D          const highlighted   document createElement  span    x000D          highlighted textContent   match  x000D          highlighted classList add cls   x000D          frag appendChild part   x000D          frag appendChild highlighted   x000D          lastIdx   idx   match length  x000D            x000D        const end   document createTextNode child textContent slice lastIdx    x000D        frag appendChild end   x000D        child parentNode replaceChild frag  child   x000D        x000D        x000D    x000D   x000D     Highlight all keywords found in the page x000D  highlight document body    lorem    amet    autem     x000D   highlight   x000D    background  lightpink  x000D    x000D   lt p gt Hello world lorem ipsum dolor sit amet  consectetur adipisicing elit  Est vel accusantium totam  ipsum delectus et dignissimos mollitia  lt  p gt  x000D   lt p gt  x000D    Lorem ipsum dolor sit amet  consectetur adipisicing elit  Numquam  corporis  x000D     lt small gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  Accusantium autem voluptas perferendis dolores ducimus velit error voluptatem  qui rerum modi  lt  small gt  x000D   lt  p gt  x000D   x000D   x000D    I would also recommend using something like escape-string-regexp if your keywords can have special characters that would need to be escaped in regexes   const keywordRegex   RegExp keywords map escapeRegexp  join        flags

User · Answer

Since HTML5 you can use the  lt mark gt  lt  mark gt  tags to highlight text  You can use javascript to wrap some text keyword between these tags  Here is a little example of how to mark and unmark text   JSFIDDLE DEMO

User · Answer

You can use the jquery highlight effect   But if you are interested in raw javascript code  take a look at what I got Simply copy paste into an HTML  open the file and click  highlight  - this should highlight the word  fox   Performance wise I think this would do for small text and a single repetition  like you specified    x000D   x000D  function highlight text    x000D    var inputText   document getElementById  inputText    x000D    var innerHTML   inputText innerHTML  x000D    var index   innerHTML indexOf text   x000D    if  index  gt   0     x000D     innerHTML   innerHTML substring 0 index      lt span class  highlight  gt     innerHTML substring index index text length      lt  span gt     innerHTML substring index   text length   x000D     inputText innerHTML   innerHTML  x000D      x000D    x000D   highlight   x000D    background-color  yellow  x000D    x000D   lt button onclick  highlight  fox    gt Highlight lt  button gt  x000D   x000D   lt div id  inputText  gt  x000D    The fox went over the fence x000D   lt  div gt  x000D   x000D   x000D    Edits    Using replace  I see this answer gained some popularity  I thought I might add on it   You can also easily use replace   the fox jumped over the fence  replace  fox    lt span gt fox lt  span gt      Or for multiple occurrences  not relevant for the question  but was asked in comments  you simply add global on the replace regular expression     the fox jumped over the other fox  replace  fox g   lt span gt fox lt  span gt      Hope this helps to the intrigued commenters    Replacing the HTML to the entire web-page  to replace the HTML for an entire web-page  you should refer to innerHTML of the document s body    document body innerHTML

User · Answer

We if you also want it to be highlighted on page load  there is a new way  just add     text Highlight 20These try accessing this link in a new tab https   stackoverflow com questions 38588721    text Highlight 20a 20text

User · Answer

The solutions offered here are quite bad   You can t use regex  because that way  you search highlight in the html tags  You can t use regex  because it doesn t work properly with UTF   anything with non-latin English characters   You can t just do an innerHTML replace  because this doesn t work when the characters have a special HTML notation  e g   amp amp  for  amp    amp lt  for  lt    amp gt  for  gt    amp auml  for      amp ouml  for     amp uuml  for     amp szlig  for     etc   What you need to do  Loop through the HTML document  find all text nodes  get the textContent  get the position of the highlight-text with indexOf  with an optional toLowerCase if it should be case-insensitive   append everything before indexof as textNode  append the matched Text with a highlight span  and repeat for the rest of the textnode  the highlight string might occur multiple times in the textContent string   Here is the code for this  var InstantSearch           quot highlight quot   function  container  highlightText                var internalHighlighter   function  options                         var id                     container   quot container quot                   tokens   quot tokens quot                   all   quot all quot                   token   quot token quot                   className   quot className quot                   sensitiveSearch   quot sensitiveSearch quot                             tokens   options id tokens               allClassName   options id all  id className               allSensitiveSearch   options id all  id sensitiveSearch                 function checkAndReplace node  tokenArr  classNameAll  sensitiveSearchAll                                var nodeVal   node nodeValue  parentNode   node parentNode                      i  j  curToken  myToken  myClassName  mySensitiveSearch                      finalClassName  finalSensitiveSearch                      foundIndex  begin  matched  end                      textNode  span  isFirst                   for  i   0  j   tokenArr length  i  lt  j  i                                          curToken   tokenArr i                       myToken   curToken id token                       myClassName   curToken id className                       mySensitiveSearch   curToken id sensitiveSearch                        finalClassName    classNameAll   myClassName    quot   quot    classNameAll   myClassName                        finalSensitiveSearch    typeof sensitiveSearchAll      quot undefined quot    sensitiveSearchAll   mySensitiveSearch                        isFirst   true                      while  true                                                if  finalSensitiveSearch                              foundIndex   nodeVal indexOf myToken                           else                             foundIndex   nodeVal toLowerCase   indexOf myToken toLowerCase                              if  foundIndex  lt  0                                                        if  isFirst                                  break                               if  nodeVal                                                                textNode   document createTextNode nodeVal                                   parentNode insertBefore textNode  node                                    End if  nodeVal                               parentNode removeChild node                               break                               End if  foundIndex  lt  0                           isFirst   false                            begin   nodeVal substring 0  foundIndex                           matched   nodeVal substr foundIndex  myToken length                            if  begin                                                        textNode   document createTextNode begin                               parentNode insertBefore textNode  node                                End if  begin                           span   document createElement  quot span quot                            span className    finalClassName                          span appendChild document createTextNode matched                            parentNode insertBefore span  node                            nodeVal   nodeVal substring foundIndex   myToken length                            Whend                       Next i                    End Function checkAndReplace               function iterator p                                if  p     null  return                   var children   Array prototype slice call p childNodes   i  cur                   if  children length                                        for  i   0  i  lt  children length  i                                                  cur   children i                           if  cur nodeType     3                                                        checkAndReplace cur  tokens  allClassName  allSensitiveSearch                                                     else if  cur nodeType     1                                                        iterator cur                                                                                       End Function iterator              iterator options id container                 End Function highlighter                     internalHighlighter                                container  container                   all                                                className   quot highlighter quot                                          tokens                                                  token  highlightText                           className   quot highlight quot                            sensitiveSearch  false                                                                     End Call internalHighlighter            End Function highlight      Then you can use it like this  function TestTextHighlighting highlightText        var container   document getElementById  quot testDocument quot        InstantSearch highlight container  highlightText      Here s an example HTML document  lt  DOCTYPE html gt   lt html gt       lt head gt           lt title gt Example of Text Highlight lt  title gt           lt style type  quot text css quot  media  quot screen quot  gt               highlight  background   D3E18A                light  background-color  yellow            lt  style gt       lt  head gt       lt body gt           lt div id  quot testDocument quot  gt              This is a test              lt span gt  This is another test lt  span gt                                                    lt span gt Test123 amp auml  amp ouml  amp uuml  amp Auml  amp Ouml  amp Uuml  lt  span gt           lt  div gt       lt  body gt   lt  html gt   By the way  if you search in a database with LIKE   e g  WHERE textField LIKE CONCAT       query        which you shouldn t do  you should use fulltext-search or Lucene   then you can escape every character with   and add an SQL-escape-statement  that way you ll find special characters that are LIKE-expressions  e g  WHERE textField LIKE CONCAT       query       ESCAPE      and the value of  query is not   completed   but    c o m p l e t e d    tested  works with SQL-Server and PostgreSQL  and every other RDBMS system that supports ESCAPE   A revised typescript-version  namespace SearchTools          export interface IToken               token  string          className  string          sensitiveSearch  boolean              export class InstantSearch                 protected m container  Node          protected m defaultClassName  string          protected m defaultCaseSensitivity  boolean          protected m highlightTokens  IToken              constructor container  Node  tokens  IToken    defaultClassName   string  defaultCaseSensitivity   boolean                        this iterator   this iterator bind this               this checkAndReplace   this checkAndReplace bind this               this highlight   this highlight bind this               this highlightNode   this highlightNode bind this                    this m container   container              this m defaultClassName   defaultClassName     quot highlight quot               this m defaultCaseSensitivity   defaultCaseSensitivity    false              this m highlightTokens   tokens                       token   quot test quot                   className  this m defaultClassName                  sensitiveSearch  this m defaultCaseSensitivity                                     protected checkAndReplace node  Node                        let nodeVal  string   node nodeValue              let parentNode  Node   node parentNode              let textNode  Text   null               for  let i   0  j   this m highlightTokens length  i  lt  j  i                                  let curToken  IToken   this m highlightTokens i                   let textToHighlight  string   curToken token                  let highlightClassName  string   curToken className    this m defaultClassName                  let caseSensitive  boolean   curToken sensitiveSearch    this m defaultCaseSensitivity                   let isFirst  boolean   true                  while  true                                        let foundIndex  number   caseSensitive                           nodeVal indexOf textToHighlight                            nodeVal toLowerCase   indexOf textToHighlight toLowerCase                          if  foundIndex  lt  0                                                if  isFirst                              break                           if  nodeVal                                                        textNode   document createTextNode nodeVal                               parentNode insertBefore textNode  node                                End if  nodeVal                           parentNode removeChild node                           break                           End if  foundIndex  lt  0                       isFirst   false                        let begin  string   nodeVal substring 0  foundIndex                       let matched  string   nodeVal substr foundIndex  textToHighlight length                        if  begin                                                textNode   document createTextNode begin                           parentNode insertBefore textNode  node                            End if  begin                       let span  HTMLSpanElement   document createElement  quot span quot                         if   span classList contains highlightClassName                           span classList add highlightClassName                        span appendChild document createTextNode matched                        parentNode insertBefore span  node                        nodeVal   nodeVal substring foundIndex   textToHighlight length                        Whend                   Next i                End Sub checkAndReplace            protected iterator p  Node                        if  p    null                  return               let children  Node     Array prototype slice call p childNodes                if  children length                                for  let i   0  i  lt  children length  i                                          let cur  Node   children i                           https   developer mozilla org en-US docs Web API Node nodeType                     if  cur nodeType     Node TEXT NODE                                                 this checkAndReplace cur                                             else if  cur nodeType     Node ELEMENT NODE                                                 this iterator cur                                              Next i                    End if  children length                 End Sub iterator           public highlightNode n Node                        this iterator n                End Sub highlight            public highlight                         this iterator this m container                End Sub highlight             End Class InstantSearch         End Namespace SearchTools   Usage  let searchText   document getElementById  quot txtSearchText quot    let searchContainer   document body     document getElementById  quot someTable quot    let highlighter   new SearchTools InstantSearch searchContainer                  token   quot this is the text to highlight quot     searchText value          className   quot highlight quot      this is the individual highlight class         sensitiveSearch  false                highlighter highlight       this would highlight in the entire table    foreach tr - for each td2  highlighter highlightNode td2      this highlights in the second column of table

User · Answer

I would like to share more about the usage of the scroll text fragment syntax      text  prefix-  textStart  textEnd   -suffix      Example Demo link         text to How to highlight text using javascript       text to text How to highlight text using javascript       text tex- t How to highlight text using javascript       text text- using -javascript How to highlight text using javascript     If you want to highlight multiple text fragments in one URL   amp text       Example Demo link         text javascript amp text highlight amp text Ankit How to highlight text using javascript     see more  https   web dev text-fragments  textstart

User · Answer

Simply pass your word into the following function  function highlight words word        const page   document body innerHTML      document body innerHTML   page replace new RegExp word   quot gi quot     match    gt    lt mark gt   match  lt  mark gt        Usage  highlight words  quot hello quot    This will highlight all instances of the word on the page

User · Answer

Using the surroundContents   method on the Range type   Its only argument is an element which will wrap that Range    function styleSelected       bg   document createElement  span      bg style backgroundColor    yellow     window getSelection   getRangeAt 0  surroundContents bg

User · Answer

I was wondering that too  you could try what I learned on this post   I used    x000D   x000D  function highlightSelection     x000D     var userSelection   window getSelection    x000D     for var i   0  i  lt  userSelection rangeCount  i      x000D      highlightRange userSelection getRangeAt i    x000D       x000D      x000D      x000D      x000D     function highlightRange range    x000D         var newNode   document createElement  span    x000D         newNode setAttribute  x000D             style   x000D             background-color  yellow  display  inline   x000D            x000D         range surroundContents newNode   x000D       x000D   lt html gt  x000D    lt body contextmenu  mymenu  gt  x000D   x000D     lt menu type  context  id  mymenu  gt  x000D      lt menuitem label  Highlight Yellow  onclick  highlightSelection    icon   images comment icon gif  gt  lt  menuitem gt  x000D     lt  menu gt  x000D     lt p gt this is text  select and right click to high light me  if you can t see the option  please use this lt button onclick  highlightSelection    gt button  lt  button gt  lt p gt  x000D   x000D   x000D    you could also try it here  http   henriquedonati com projects Extension extension html  xc

User · Answer

Fast forward to 2019  Web API now has natively support for highlighting texts   const selection   document getSelection    selection setBaseAndExtent anchorNode  anchorOffset  focusNode  focusOffset     And you are good to go  anchorNode is the selection starting node  focusNode is the selection ending node  And  if they are text nodes  offset is the index of the starting and ending character in the respective nodes  Here is the documentation  They even have a live demo

[javascript] How to highlight text using javascript

Examples related to javascript

Examples related to highlighting