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

Question

选择一个文本 block (可能跨越许多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 放入文本区域，但这只会让我得到选定的文本。我没试过 <canvas>元素，但这可能是另一种选择。

如果不是 JavaScript，有没有一种方法可以使用 Firefox 扩展？

Answer 1

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

Mozilla 开发人员连接在 W3C selections 上有故事.微软有他们的系统documented on MSDN .我建议从 PPK 的 introduction to ranges 开始.

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

// 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;
}