获取选定的文本和页面上选定的节点？ [英] Get selected text and selected nodes on a page?

问题描述

当选择一段文本（可能跨越多个DOM节点）时，是否可以使用Javascript提取选定的文本和节点？

想象一下这个HTML代码：

 < h1> Hello World< / h1>< p>您好< b> ;< / p为H. 
  

如果用户启动了一个以World ...开头的mouseDown事件，在there！之后，我希望能够返回：

 文字：{selectedText：WorldHi there！ }，
节点：[
 {node：h1，offset：6，length：5}，
 {node：p，offset：0，length：16}，
 {node：p> b，offset：0，length：6} 
] 
  

我试着把HTML放到textarea中，但是只能得到selectedText。我还没有试过< canvas> 元素，但这可能是另外一个选项。
$ b 如果不是JavaScript，有没有一种方法可以使用Firefox扩展？

解决方案

你是一个颠簸的旅程，但这是完全有可能的。主要的问题是，IE和W3C暴露完全不同的界面选择，所以如果你想跨浏览器功能，那么你基本上必须写整个事情两次。此外，两个接口都缺少一些基本功能。

Mozilla开发人员连接的故事位于 W3C选择。 Microsoft的系统记录在MSDN上。我建议从PPK的范围介绍开始。

以下是我相信的一些基本功能：

  //在浏览器中选择对象会有所不同
函数getSelection（）{
 return（msie）
？ document.selection 
：（window.getSelection || document.getSelection）（）; 
 
 
 //范围对象在浏览器中会有所不同
函数getRange（）{
 return（msie）
？ getSelection（）。createRange（）
：getSelection（）。getRangeAt（0）
} 
 
 //抽取一个范围的父容器
函数parentContainer范围）{
 return（msie）
？ range.parentElement（）
：range.commonAncestorContainer; 
} 
  

When selecting a block of text (possibly spanning across many DOM nodes), is it possible to extract the selected text and nodes using Javascript?

Imagine this HTML code:

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

If the user initiated a mouseDown event starting at "World..." and then a mouseUp even right after "there!", I'm hoping it would return:

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

I've tried putting the HTML into a textarea but that will only get me the selectedText. I haven't tried the <canvas> element but that may be another option.

If not JavaScript, is there a way this is possible using a Firefox extension?

解决方案

You are in for a bumpy ride, but this is quite possible. The main problem is that IE and W3C expose completely different interfaces to selections so if you want cross browser functionality then you basically have to write the whole thing twice. Also, some basic functionality is missing from both interfaces.

Mozilla developer connection has the story on W3C selections. Microsoft have their system documented on MSDN. I recommend starting at PPK's introduction to ranges.

Here are some basic functions that I believe work:

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

这篇关于获取选定的文本和页面上选定的节点？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！