apply Highlight HTML text using javascript as in Microsoft word
<p><strong>I have the following code for highlighting html text using javascript:</strong></p>

<pre><code>var counter = 1;
function BindEventForHighlight() {
   $('#ParaFontSize').bind("mouseup", HighlightText);
   $('#ParaFontSize').unbind("mouseup", RemoveHighlight);
}


function UnBindHighlightEvent() {
   $('#ParaFontSize').bind("mouseup", RemoveHighlight);
   $('#ParaFontSize').unbind("mouseup", HighlightText);
}


function HighlightText() {

   var text = window.getSelection();
   var start = text.anchorOffset;
   var end = text.focusOffset - text.anchorOffset; 

   range = window.getSelection().getRangeAt(0);
   range1 = window.getSelection().toString();
   var selectionContents = range.extractContents();
   var span = document.createElement("span");

   span.appendChild(selectionContents);

   span.setAttribute("id", counter);
   span.setAttribute("class", "highlight");
   range.insertNode(span);
   counter++;

}

function RemoveAllHighlights() {
  var selection = document.getElementById('ParaFontSize');
  var spans = selection.getElementsByTagName("span");
  for (var i = 0; i &lt; spans.length; i++) {
      spans[i].className = ""; 
  }
}

function RemoveHighlight() {
   var selection = window.getSelection();
  if (selection.toString() !== "" &amp;&amp;
           selection.anchorNode.parentNode.nodeName === "SPAN") {
     selection.anchorNode.parentNode.className = "";
  }
  else {
     return false;
  }
}
</code></pre>

<p>The HighlightText function uses range object to highlight text. and i want to save start and end of selected text into Data base, and when user get back to the same page he will see the highlighted text from previous time. also i want other scenarios as follow:</p>

<ol>
<li><p>when the user highlight some text, he will be able to unhighlight all or part of this     highlighted text and keep the remaining text highlighted.</p></li>
<li><p>the user able to clear all highlighted text in the page.</p></li>
</ol>

<p>let's say i want this highlighter functions as the highlighter in MS word.</p>

<p>Thanks in advance
Really appreciated.</p>
