Question

The content management system I wrote for our site uses a bookmarklet to post articles, which reads the selected area on a page with document.getSelection(). But in some cases it would be very useful to read the underlying HTML code for the selected area as well, to get links and other HTML formatting.

Anyone know of a jQuery plugin or other Javascript technique to access the raw HTML that produces a selected area?

Answer 1

First, as you said, get the selection

var sel = document.getSelection();

This does have some details about selected nodes, too, but if you want to do more then convert this to a range (If .rangeCount > 1 you may want to loop here)

var range = sel.getRangeAt(0);

Next, using range.commonAncestorContainer and range.startContainer walk through the DOM tree performing whatever you want until you reach range.endContainer.
All of these nodes should be in the selection.

---

Here is some code that’ll return all (top level) selected nodes and, optionally, apply a callback to every node in selection.

function selectedNodes(callback, context) {
    var sel = document.getSelection(),
        range = sel.getRangeAt(0),
        indices = [],
        nextNode = function nextNode(e) {
            if (e.childNodes.length > 0) return e.childNodes[0];
            while(!e.nextSibling && e.parentNode) e = e.parentNode;
            return e.nextSibling;
        },
        e = range.startContainer;
    if (callback) {
        callback.call(context, e);
        while(e !== range.endContainer) {
            e = nextNode(e);
            callback.call(context, e);
        }
        e = range.startContainer;
    }
    if (e === range.commonAncestorContainer) return [e];
    else {
        while (e !== range.commonAncestorContainer) {
            indices[0] = Array.prototype.indexOf.call(e.parentNode.childNodes, e);
            e = e.parentNode;
        }
        e = range.endContainer;
        while (e !== range.commonAncestorContainer) {
            indices[1] = Array.prototype.indexOf.call(e.parentNode.childNodes, e);
            e = e.parentNode;
        }
        return Array.prototype.slice.call(e.childNodes, indices[0], indices[1]+1);
    }
}

/*
selectedNodes(console.log, console);
node1
..
nodeN
[node1, .., nodeM] // only top-level
*/