Skip to content Skip to sidebar Skip to footer
Home / Css / Html

Highlight Word In Div Using Javascript

Post a Comment
hi i have to implement find and replace functionality in my project. in this functionality there is one find and replace button on the top of contenteditable div. when user click o

Solution 1:

You will need to search through the div to find the word and then put that word into a span, and change the background color of the span.

Edit: I just noticed that you are not using CSS, so you will need to insert a font tag to change the color.


Solution 2:

I just stole this from Sphix, the documentation tool:

/**
 * highlight a given string on a jquery object by wrapping it in
 * span elements with the given class name.
 */
jQuery.fn.highlightText = function(text, className) {
  function highlight(node) {
    if (node.nodeType == 3) {
      var val = node.nodeValue;
      var pos = val.toLowerCase().indexOf(text);
      if (pos >= 0 && !jQuery.className.has(node.parentNode, className)) {
        var span = document.createElement("span");
        span.className = className;
        span.appendChild(document.createTextNode(val.substr(pos, text.length)));
        node.parentNode.insertBefore(span, node.parentNode.insertBefore(
          document.createTextNode(val.substr(pos + text.length)),
          node.nextSibling));
        node.nodeValue = val.substr(0, pos);
      }
    }
    else if (!jQuery(node).is("button, select, textarea")) {
      jQuery.each(node.childNodes, function() {
        highlight(this)
      });
    }
  }
  return this.each(function() {
    highlight(this);
  });
}

/**
 * helper function to hide the search marks again
 */
hideSearchWords : function() {
  $('.sidebar .this-page-menu li.highlight-link').fadeOut(300);
  $('span.highlight').removeClass('highlight');
},

/**
 * highlight the search words provided in the url in the text
 */
highlightSearchWords : function() {
  var params = $.getQueryParameters();
  var terms = (params.highlight) ? params.highlight[0].split(/\s+/) : [];
  if (terms.length) {
    var body = $('div.body');
    window.setTimeout(function() {
      $.each(terms, function() {
        body.highlightText(this.toLowerCase(), 'highlight');
      });
    }, 10);
    $('<li class="highlight-link"><a href="javascript:Documentation.' +
      'hideSearchWords()">' + _('Hide Search Matches') + '</a></li>')
        .appendTo($('.sidebar .this-page-menu'));
  }
},

So, adding this to a js file in your site, any page with it that receives a highlight GET parameter will search and highlight the word in the page. You can find a demo of the working code in:

http://sphinx.pocoo.org/intro.html?highlight=python

Note: This code needs jQuery, off course...


Solution 3:

Its actually pretty easy using the prototype library:

<html> 
    <head> 
        <style type="text/css">
            #content span {
                background-color: yellow;
            }
        </style>
        <script type="text/javascript" src="prototype.js"></script>
        <script type="text/javascript">
            Event.observe(window,'load',function(){
                var htm = $('content').innerHTML;
                $('content').innerHTML = htm.sub('my','<span>my</span>');
            });
        </script>
    </head>
    <body>

        <div id="content">
            This is the div containing my content.
        </div>

    </body>
</html>

This should get you started so you can implement the rest.


Solution 4:

To highlight a word you have to select it somehow. One option is to surround the word with a span tag.

this is <span class="highlight">test</span> some text test

then specify CSS for the highlight class.


Post a Comment for "Highlight Word In Div Using Javascript"