Evidentiere cuvant selectat prin dublu-click

In acest tutorial este prezentat un script cu jQuery care evidentiaza in pagina cuvantul selectat prin dublu clic pe el.
Este util daca doriti sa adaugati in pagina dv. web posibilitatea ca atunci cand utilizatorul apasa dublu-click pe un cuvant din pagina, toate aparitiile acelui cuvand in pagina sa fie scoase in evidenta (colorate).
• Ca sa-l testati, apasati double-clic pe cuvinte din aceasta pagina.

- Acest script foloseste highlight plughin de la: www.johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html .
- Explicatii despre cod sunt in comentariile din script.

Utilizare

.highlight { background-color: yellow; color:blue; }

Codul Scriptului

<script type="text/javascript"><!--
/*
Plughin highlight v3
<http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html>
Johann Burkard
<http://johannburkard.de>
*/
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.each(function() {
  innerHighlight(this, pat.toUpperCase());
 });
};
jQuery.fn.removeHighlight = function() {
 return this.find("span.highlight").each(function() {
  this.parentNode.firstChild.nodeName;
  with (this.parentNode) {
   replaceChild(this.firstChild, this);
   normalize();
  }
 }).end();
};

// aceasta functie preia textul selectat in pagina
function getSelText() {
  var seltxt = '';      // retine textul selectat

  // preia textul
  if (window.getSelection) {
    seltxt = window.getSelection();
  } else if (document.getSelection) {
    seltxt = document.getSelection();
  } else if (document.selection) {
    seltxt = document.selection.createRange().text;
  }
  return seltxt;
}
--></script>
<script type="text/javascript"><!--
$(document).ready(function() {
  // la dublu-clic pe un cuvant din cadrul BODY
  $('body').dblclick(function() {
    var seltxt = getSelText();      // preia cuvantul selectat
    seltxt = $.trim(seltxt);        // sterge spatiile din margine
    $(this).removeHighlight().highlight(seltxt);      // acceseaza functiile de anulare si evidentiere cuvant
  });
});
--></script>