javascript - 有没有办法获取选定区域的底层 HTML 代码？

Question

我为我们的网站编写的内容管理系统使用书签来发布文章，它使用 document.getSelection() 读取页面上的选定区域。但在某些情况下，读取选定区域的底层 HTML 代码以及获取链接和其他 HTML 格式会非常有用。

任何人都知道 jQuery 插件或其他 Javascript 技术来访问生成选定区域的原始 HTML？

Answer 1

首先，正如你所说，得到选择

var sel = document.getSelection();

这也有一些关于选定节点的详细信息，但如果你想做更多，那么将它转换为一个范围（如果.rangeCount > 1你可能想在这里循环）

var range = sel.getRangeAt(0);

接下来，使用range.commonAncestorContainer并range.startContainer遍历 DOM 树，执行任何你想做的事情，直到你到达range.endContainer.
所有这些节点都应该在选择中。

---

这是一些代码，它将返回所有（顶级）选定节点，并且可以选择对选择中的每个节点应用回调。

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
*/