Javascript Course

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 .
- Explanations about the code are in the comments in script.


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

Plughin highlight v3
Johann Burkard
jQuery.fn.highlight = function(pat) {
 function innerHighlight(node, pat) {
 var skip = 0;
 if (node.nodeType == 3) {
 var pos =;
 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);
 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() {
 with (this.parentNode) {
 replaceChild(this.firstChild, this);

// 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;
$(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

Daily Test with Code Example

Which tag is used to add definition lists into a <dl> element?
<dt> <dd> <li>
  <dd> - Hyper Text Markup Language</dd>
  <dd> - Language for web pages</dd>
Which CSS property can hide an element on page, letting an empty space in its place?
display position visibility
#id {
  visibility: hidden;
Click on the event which is triggered when the mouse clicks on an object.
onclick onmouseover onfocus
document.getElementById("id").onclick = function(){
Indicate the PHP variable that contains the contents of both $_GET, $_POST, and $_COOKIE arrays.
if(isset($_REQUEST["id"])) {
  echo $_REQUEST["id"];
Highlight selected, clicked word in page

Last accessed pages

  1. Get the value of multiple selected checkboxes with same name (5844)
  2. Read Excel file data in PHP - PhpExcelReader (77580)
  3. Wake Up! (7314)
  4. setTimeout and this with bind() method in JavaScript class (1740)
  5. Update and Delete in MySQL Table (693)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (481)
  2. Register and show online users and visitors (337)
  3. JavaScript Course - Free lessons (250)
  4. PHP-MySQL free course, online tutorials PHP MySQL code (248)
  5. querySelector and querySelectorAll (237)