Document selection.

jQuery plugin for document selection.

by Avinash_R

HTML

<p id="first-para">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut augue ut ligula vehicula imperdiet vitae id risus. Maecenas sed ligula lectus, eu ultrices lectus. Nam mollis fermentum neque sit amet molestie. Morbi dolor nulla, egestas vel vestibulum condimentum, ornare eget velit. Phasellus nec orci a libero mollis luctus. Phasellus arcu dui, aliquam non venenatis nec, congue sed purus. Nam lacinia iaculis libero. Morbi sed augue nisi, a pretium dui. Praesent eget metus est, eget scelerisque metus. Donec quis enim ac orci hendrerit tincidunt. Donec vestibulum quam at arcu iaculis ut rutrum sapien blandit. Maecenas pellentesque ultricies tellus, sit amet tincidunt elit condimentum vitae. Nam tincidunt risus id leo sollicitudin imperdiet. Donec eu velit arcu, et blandit dui. Nulla quis felis tortor.</p>
<p id="second-para">Quisque nec quam metus. Curabitur faucibus lacinia lorem sit amet vestibulum. Nam sed urna turpis. Donec ut tempus felis. Sed varius nibh sed dolor fermentum tristique. Quisque porttitor tincidunt dignissim. In consectetur libero orci. Quisque hendrerit accumsan risus, a elementum nibh condimentum sit amet. Fusce in porttitor turpis. Pellentesque leo nunc, lobortis non hendrerit vel, dapibus quis ante. Aenean et arcu id nisi aliquam tincidunt. Pellentesque iaculis turpis ut quam vulputate sagittis. Praesent faucibus sem sit amet ante faucibus congue. Proin eget ante a sapien bibendum sodales. Nunc est erat, ultricies eget bibendum sit amet, dapibus id tortor. Phasellus in quam massa, ac tincidunt risus.</p>
<p id="third-para">Cras vel purus lorem, quis egestas quam. Proin vel mi nisi. Curabitur eget purus velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce ultricies pretium leo, non ornare leo pulvinar sed. Proin aliquet iaculis mollis. Aliquam lacus ante, ullamcorper ac laoreet sed, vulputate blandit eros. Duis eget sapien eu tellus eleifend lobortis. Pellentesque in...

CSS

p {
    margin-bottom: 1.5em;
}

JavaScript

(function () {
    $.extend($, {
        selection: function (options) {
            var selection, i, l, range, highlight, startNode, endNode;
            // right now this is working as a getter. 
            // This should 10.use the `options` parameter and also act as a getter.
            selection = document.getSelection();
            if (selection.isCollapsed) {
                return "";
            }
            for (i = 0, l = selection.rangeCount; i < l; i++) {
                range = selection.getRangeAt(i);
                if (!(range.collapsed)) {
                    if (range.startContainer === range.endContainer) {
                        range.surroundContents($("<mark></mark>")[0]);
                    } else {
                        var startRange = document.createRange();
                        var endRange = document.createRange();

                        startRange.setStart(range.startContainer, range.startOffset);
                        startRange.setEndAfter(range.startContainer);

                        endRange.setStartBefore(range.endContainer);
                        endRange.setEnd(range.endContainer, range.endOffset);
                        
                        startRange.surroundContents($("<mark></mark>")[0]);
                        endRange.surroundContents($("<mark></mark>")[0]);

                    }
                }
            }
            return selection;
        }
    });

    $(document).on("mouseup", function (e) {
        console.log($.selection());
    }).on("keyup", function (e) {
        if (e.shiftKey && e.keyCode >= 37 && e.keyCode <= 40) {
            console.log($.selection());
            console.log(window.pageXOffset / document.documentElement.scrollWidth);
        }
    });
}());