Highlight selected, clicked word in page

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 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>

<a href="http://coursesweb.net/" title="CoursesWeb.net">CoursesWeb.net</a>

h2 {
  font-family:"Calibri",sans-serif;
}

var elm_list = document.querySelectorAll("div.cls");
var nr_elms = elm_list.length;       // number of selected items
alert(nr_elms);

$arr =[1, 2, 3, 4);
$arr_sum = array_sum($arr);
echo $arr_sum;       // 10