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 defines marked text? (can be used to highlight parts of text)
<mark> <embed> <span>
<p>Free corses: <mark>coursesweb.net</mark> for Web Development.</p>
Which CSS pseudo-class adds a style to an element when the mouse is over it?
:focus :hover :active
a:hover {
  font-weight: bold;
  color: #00da01;
}
Click on the function which returns a string value that represents the number rounded to the x digits after the decimal point.
toPrecision(x) toFixed(x) floor(x)
var num = 12.34567;
num = num.toFixed(2);
alert(num);       // 12.35
Indicate the PHP function which reads an entire file into an array.
[) file() readfile()
$arr = file("a_file.txt", FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
var_export($arr);
Highlight selected, clicked word in page

Last accessed pages

  1. Draw arrow markers with clicks in html element (1812)
  2. Get Lower, Higher and Closest Number in JavaScript (1663)
  3. Get Time Elapsed (1156)
  4. Constants and Operators (678)
  5. querySelector and querySelectorAll (11354)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (1279)
  2. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (1244)
  3. Tabs effect with CSS (1236)
  4. Contact page - CoursesWeb (1234)
  5. Insert, Select and Update NULL value in MySQL (730)