javascript - jQuery highlight plugin cancels text selection, making copy impossible while also rendering links unclickable -

i'm using jquery highlight plugin select text on web page.

i've hooked selecting , deselecting mouse events:

document.addeventlistener('mouseup', doselect); document.addeventlistener('mousedown', dodeselect); 

the functions are:

function doselect() {     var selectionrange = window.getselection();     var selection = selectionrange.tostring();     if (selection.trim().length > 0) {         $('body').highlight(selection);     } }  function dodeselect() {     $('body').unhighlight(); } 

short , easy. library searches selected text , wraps each occurrence in <span> , text stands out.

it's working great, have 2 issues how behaves.

1. the problem once span elements applied, cannot click hyperlinks (the ones found/selected), don't react clicks (i have deselect text first).

2. once span elements added, original selection somehow lost, i.e. cannot copy selected ctrl+c.

these issues can seen in jsfiddle.

why happening?

the code

the working demo available here: jsfiddle

javascript

var $body     = $('body'); var $copyarea = $('#copyarea'); document.addeventlistener('mouseup',   doselect); document.addeventlistener('mousedown', dodeselect); document.addeventlistener('keydown',   keypresshandler);  function keypresshandler(e) {     if(e.ctrlkey && e.keycode == 67) {         $copyarea.focus().select();     } }  function doselect() {     var selectionrange = window.getselection();     var selection = selectionrange.tostring();     if (selection.trim().length > 0) {         $copyarea.val(selection);         $body.highlight(selection);     }    }  function dodeselect(e) {     var elem = $(e.target).parents('a');     if(elem.length == 0) {         $copyarea.val('');         $body.unhighlight();     } } 

html

sample text select. <br/>sample text select. <br/>sample text select. <br/>google.com <a href="http://google.com" target="_blank">google.com</a> <a href="http://google.com" target="_blank">     <span>         <span>google.com</span>     </span> </a>  <textarea id="copyarea"></textarea> 

css

.highlight {     background-color: #ffff88; } #copyarea {     position:fixed;      top:-999px;      height:0px; } 

part 1 - clicking through selection

presumably, reason clicking on highlighted link doesn't work because process disables highlighting kicks in first , cancels click.

to bypass that, implement condition checks if target element of mousedown event has a element ancestor. if true, not execute $body.unhighlight();, allowing click pass through , open link.

function dodeselect(e) {     var elem = $(e.target).parents('a');     if(elem.length == 0) {         $copyarea.val('');         $body.unhighlight();     } } 

part 2 - copying selection

presumably, again, reason selection lost because document modified highlighting, introduces elements dom.

my first idea reapply selection after modification done. became annoying , went in different direction, allowed me stumble upon this:

the definitive guide copying , pasting in javascript

this offered simple , efficient idea: using hidden element contain selectable text.

therefore, allow copying selected text highlighted despite having lost original selection:

1. we add hidden textarea element our document.

   <textarea id="copyarea"></textarea> 

2. we reference element.

   var $copyarea = $('#copyarea'); 

3. we add event handler keydown event.

   document.addeventlistener('keydown',  keypresshandler); 

4. we add event handler.

   function keypresshandler(e) {     if(e.ctrlkey && e.keycode == 67) {         $copyarea.focus().select();     } } 

5. we modify doselect() add logic set selection value of textarea element, in form of $copyarea.val(selection);.

   function doselect() {     var selectionrange = window.getselection();     var selection = selectionrange.tostring();     if (selection.trim().length > 0) {         $copyarea.val(selection);         $body.highlight(selection);     }    } 

what handler ? captures combination ctrl+c , focuses on text in hidden textarea, ends being copied keyboard command issued.