Forum

Scris: **Vin Dec 02, 2011**

Buna ziua!
Folosind jQuery, as vrea ca la selectarea prin dubluclick a unui cuvant din cadrul paginii, acesta sa se coloreze intr-o anumita culoare pe un anumit fond si de alta culoare toate aparitiile cuvantului respectiv in cadrul paginii.
Imi puteti spune cum ma refer numai la un cuvant din cadrul unui text?

Cod: Selectaţi tot

<script type="text/javascript">
           $(document).ready(function
		   {
		   if $('#continut').dblclick()

                   });
 </script>
<div id="continut">
         Ana are mere si alune.
 </div>

Scris: **Sâm Dec 03, 2011**

Salut
Incearca sa folosesti exemplu urmator:

Cod: Selectaţi tot

<html>
<head>
<style type="text/css"><!--
.highlight { background-color: yellow; color:blue }
--></style>
<script type="text/javascript" src="jquery_1.6.1.js"></script>
<script type="text/javascript"><!--
/*
Plughin highlight v3
Highlights arbitrary terms.
<http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html>
MIT license.
Johann Burkard
<http://johannburkard.de>
<mailto:jb@eaio.com>
*/

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();
};

// function to get selected text in a webpage
function getSelText() {
  var seltxt = '';      // store selected text

  // get selected text
  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() {
  // when double click on the area of "#content" element
  $('#content').dblclick(function() {
    var seltxt = getSelText();      // get selected text
    seltxt = $.trim(seltxt);        // remove the whitespace from the beginning and end of "seltxt"
    $(this).removeHighlight().highlight(seltxt);      // highlight all the texts in "#content" which matches "seltxt"
  });
});
--></script>

</head>
<body>

<div id="content">
 Ana are mere si alune. Mere galbene.
</div>

</body>
</html>

Forum

Evidentiere cuvinte selectate la dublu-clic cu JQuery

Evidentiere cuvinte selectate la dublu-clic cu JQuery

Evidentiere cuvinte selectate la dublu-clic cu JQuery