我为网站编写的内容管理系统使用书签来发布文章,文章使用document.getSelection()读取页面上的选定区域。但在某些情况下,阅读所选区域的基础HTML代码,获取链接和其他HTML格式也非常有用。
有人知道jQuery插件或其他Javascript技术来访问生成所选区域的原始HTML吗?
答案 0 :(得分:3)
首先,如您所说,获取selection
var sel = document.getSelection();
这也包含有关所选节点的一些详细信息,但如果您想要执行更多操作,请将其转换为range(如果.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
*/