Question

I’m searching for cross browser solution (Chrome, FF, Opera > 10, IE >= 8) for the following problem:

There is some html code:

<div>
    <div id="one">
        <p id="red">red</p>
        <p id="green">green</p>
    </div>
    <div id="two">
        <p id="blue">blue</p>
        <p id="black">black</p>
    </div>
</div>

and user selects with mouse text from ‘een’ (in #green node) to ‘blu’ (in #blue node). How can I check if #blue is inside selection (it does not matter if is whole or partially selected) and #red and #black are not in selection.
Simple API would look like this:

Selection.isElementSelected(document.getElementById('black'));

I’ve tried to use DOMSelection and Ranges but the problem is that I need to check elements in nested structure. In Chrome I can use Range.intersectsNode(), but this is the only browser with support of this method.

Any suggestions?

Answer 1

After some research I’ve made solution based on following materials:
https://developer.mozilla.org/en/DOM/range

http://msdn.microsoft.com/en-us/library/ms535872(v=vs.85).aspx

http://www.quirksmode.org/dom/range_intro.html

In case of IE8 entire node must be selected but this is acceptable for me.

Here is is some playground on jsfiddle: http://jsfiddle.net/58Uvd/
And here is code:

(function () {

    function UserRange (win) {
        this.win = win || window;
        this.doc = this.win.document;

        this.userRange = this.createUserRange();
    }

    var NonIEPrototype = {

        constructor: UserRange,

        createUserRange: function () {
            var selection = this.win.getSelection();
            return selection.rangeCount
                ? selection.getRangeAt(0)
                : this.doc.createRange();
        },

        overlapsNode: function (node) {
            return this.intersectsNode(node);
        },


        intersectsNode: function (node) {
            // this method is implemented in Firefox with Gecko before 1.9
            // and other non-IE browsers
            if (this.userRange.intersectsNode) {
                return this.userRange.intersectsNode(node);
            }

            return this.intersectsRange(this.createRangeWithNode(node));
        },

        createRangeWithNode: function (node) {
            var rangeWithNode = node.ownerDocument.createRange();
            try {
                rangeWithNode.selectNode(node);
            }
            catch (ex) {
                rangeWithNode.selectNodeContents(node);
            }
            return rangeWithNode;
        },

        intersectsRange: function (range) {
            return this.userRange.compareBoundaryPoints(Range.END_TO_START, range) === -1 &&
                this.userRange.compareBoundaryPoints(Range.START_TO_END, range) === 1;
        }
    };

    var IEPrototype = {

        constructor: UserRange,

        createUserRange: function () {
            return this.doc.selection.createRange();
        },

        overlapsNode: function (node) {
            var rangeWithNode = this.createRangeWithNode(node);
            return this.containsRange(rangeWithNode);
        },

        createRangeWithNode: function (node) {
            var range = node.ownerDocument.selection.createRange();
            range.moveToElementText(node);
            return range;
        },

        containsRange: function (range) {
            return this.userRange.inRange(range);
        }
    };

    UserRange.prototype = window.getSelection ? NonIEPrototype : IEPrototype;
    window.UserRange = UserRange;

}());

And usage:

var userRange = new UserRange();
userRange.overlapsNode(document.getElementById('node-to-check'));