获取页面上选定的文本和选定的节点？

当选择文本块（可能跨越许多 DOM 节点）时，是否可以使用 Javascript 提取所选文本和节点？

想象一下这个 HTML 代码：

<h1>Hello World</h1><p>Hi <b>there!</b></p>

如果用户从“World...”开始启动 mouseDown 事件，然后在“there!”之后启动 mouseUp 事件，我希望它会返回：

Text : { selectedText: "WorldHi there!" },
Nodes: [ 
  { node: "h1", offset: 6, length: 5 }, 
  { node: "p", offset: 0, length: 16 }, 
  { node: "p > b", offset: 0, length: 6 } 
]

我尝试将 HTML 放入文本区域，但这只会得到 selectedText。我还没有尝试过<canvas>元素但这可能是另一种选择。

如果不是 JavaScript，有没有办法使用 Firefox 扩展来实现这一点？

你将经历一段坎坷的旅程，但这很有可能。主要问题是 IE 和 W3C 向选择公开了完全不同的接口，因此如果您想要跨浏览器功能，那么您基本上必须将整个过程编写两次。此外，这两个界面都缺少一些基本功能。

Mozilla 开发者连接有这样的故事W3C 选择 https://developer.mozilla.org/en/DOM/window.getSelection。微软有他们的系统MSDN 上有记录 http://msdn.microsoft.com/en-us/library/ms535869(VS.85).aspx。我建议从 PPK 开始范围简介 http://www.quirksmode.org/dom/range_intro.html.

以下是我认为有效的一些基本功能：

// selection objects will differ between browsers
function getSelection () {
  return ( msie ) 
    ? document.selection
    : ( window.getSelection || document.getSelection )();
}

// range objects will differ between browsers
function getRange () {
  return ( msie ) 
      ? getSelection().createRange()
      : getSelection().getRangeAt( 0 )
}

// abstract getting a parent container from a range
function parentContainer ( range ) {
  return ( msie )
      ? range.parentElement()
      : range.commonAncestorContainer;
}