I’ve been recently working on some project wherein I wanted to grab the selected text and highlight it. The best approach in my opinion would be put markers around selected text and calculate their position starting from <body> tag.
Failed Attempt
In this approach, I decided to take advantage of Range Object to grab selected text and wrap it in markers in order to highlight it. This works pretty well until we select texts from different ranges. This is the code I’ve used, Notice I’m wrapping the selected text by <chucknorris> tag which acts as a marker in this case but unfortunately range.surroundContents() method does not allow to wrap texts of different ranges and returns an error.
Uncaught Error: BAD_BOUNDARYPOINTS_ERR: DOM Range Exception 1
function grabSelectedText() {
var t = '',
window = $('#iframe')[0].contentWindow.window,
document = $('#iframe')[0].contentWindow.document,
chucknorris = document.createElement("chucknorris");
if (window.getSelection) {
t = window.getSelection();
} else if (document.getSelection) {
t = document.getSelection();
} else if (document.selection) {
t = document.selection.createRange().text;
}
var range = t.getRangeAt(0).cloneRange();
range.surroundContents(chucknorris); // Does not work for different ranges
t.removeAllRanges();
t.addRange(range);
return t;
}Range differs when selected texts belong to different HTML tags. For example, If we select and wrap Bold Italic text from <strong>Bold </strong><em>Italic</em> string, we’ll have 2 different ranges because both the words wrapped inside different tags but for individual words, it will work.
Demo (keep your Firebug console open to see errors)
Successful Attempt
After googling a lot, I’d come across Rangy – an awesome cross-browser range and selection library in Javascript. It provides a simple standards-based API for performing common DOM Range and Selection tasks in all major browsers. So, above function changes to below:
getSelectedText: function () {
var window = $('#iframe')[0].contentWindow.window,
selection = rangy.getSelection($('#iframe')[0]);
markerApplier = rangy.createCssClassApplier(null, {
elementTagName: 'chucknorris'
});
markerApplier.toggleSelection(window);
return selection;
}
Usage
I’ve written a wrapper named Rangee on top of Rangy to simply grab and highlight the selected text.
// For Iframe's content and Storing the selection details in localStorage
var objSel = rangee.init('iframe', iframe.contentWindow.window || iframe.contentDocument.defaultView).grabSelection();
selection1Storage.push(objSel);
localStorage['selection1'] = JSON.stringify(selection1Storage);
// For parent window and Storing the selection details in localStorage
var objSel = rangee.init('div', window).grabSelection();
selection2Storage.push(objSel);
localStorage['selection2'] = JSON.stringify(selection2Storage);
// Highlighting previous selection (stored in localStorage)
rangee.init('iframe', iframe.contentWindow.window || iframe.contentDocument.defaultView);
rangee.highlight(JSON.parse(localStorage['selection1']) );
rangee.init('div', window);
rangee.highlight(JSON.parse(localStorage['selection2']) );
Final Demo
References
http://code.google.com/p/rangy/
http://stackoverflow.com/q/11537032/415057
Its always better to hack around than... 