In this tutorial is presented a script with jQuery that highlights the word which is selected by double-click on it.
It is useful if you want to add in your webpage the posibility that when the user double-clicks on a word, all occurrences of that word in the page will be highlighted.

• To test it, just double-click on words in this page.

- This script uses the highlight plughin from www.johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html .
- Explanations about the code are in the comments in script.

Usage

1. Add to your page (after jQuery library) the JavaScript code bellow.
2. In the CSS style add this code (define a color, and background for highlighted words).
.highlight { background-color: yellow; color:blue; }
- If you want to highlight to words in a specific area, replace the "body" to this line of code: $('body').dblclick(function(), with the reference to that area. For example: $('#id_element').dblclick(function() .

Script code

<script><!--
/*
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();
};

// 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><!--
$(document).ready(function() {
 // when double click on BODY area
 $('body').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); // calls the function that anulate and highlight
 });
});
--></script>

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which HTML5 tag is indicated to be used as container for menu with navigation links in Web site?
<section> <nav> <article>
<nav><ul>
 <li><a href="http://coursesweb.net/css/" title="CSS Course">CSS Course</a></li>
 <li><a href="http://www.marplo.net/jocuri/" title="Flash Games">Flash Games</a></li>
</ul></nav>
Which CSS property shifts an item horizontally to the left or right of where it was?
text-align clear float
.some_class {
  width: 30%;
  float: left;
}
Click on the Math object method which returns x, rounded downwards to the nearest integer.
Math.ceil(x) Math.abs(x) Math.floor(x)
var num = 12.34567;
num = Math.floor(num);
alert(num);       // 12
Indicate the PHP function which returns the number of characters in string.
mb_strlen() count() stristr()
$str = "string with utf-8 chars åèö";
$nrchr = mb_strlen($str);
echo $nrchr;        // 30
Highlight selected, clicked word in page

Last accessed pages

  1. Get and Modify content of an Iframe (17345)
  2. Get Attribute (ID, Class, Name, Title, Src) with jQuery (60187)
  3. The form object (915)
  4. Insert, Select and Update NULL value in MySQL (41036)
  5. PHP MySQL - INSERT INTO (11946)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (1436)
  2. Tabs effect with CSS (1371)
  3. Contact page - CoursesWeb (1368)
  4. Insert, Select and Update NULL value in MySQL (793)
  5. PHP getElementById and getElementsByTagName (622)