Question

在http://rangy.googlecode.com/svn/trunk/demos/core.html，有一个演示，演示如何获取用户选择的内容的HTML。

但是，我还希望获得整个节点结构，从顶级节点到所选内容所属的节点。我如何获得此节点结构？例如，请查看下面的示例内容

<div id="toplevelnotselectedbyuser">

<p id="thispisselectedbyuser">
This text is not selected by the user...
Some sample text that has been selected by user...
Some more text that has not been selected by the user.
</p>
</div>

现在，如果用户只选择内容“用户已选择的某些示例文本...”，并且如果使用上面给出的示例（使用“rangy”库），则只使用文本“Some”用户选择的示例文本...“由该库显示为选定的HTML - 我也想要div和p的信息......我该怎么做？我更喜欢jquery，但纯javascript或任何其他库，也可以和我一起...

Answer 1

我不认为浏览器会根据DOM考虑文本范围。如果这很容易，那么这个笨拙的工具可能会提供这些信息。您可能不得不破解它，可能是通过挂钩鼠标事件来确定选择结束时范围内的父元素。

我认为这将是一项昂贵的操作，但在jQuery中就像

$(document).on('mouseup','*',function(e) {
  console.log($(this));
  return false;
});

...在这种情况下，$（this）将是用户停止选择的DOM元素。我通过使用适当的选择器而不是上面的document来尽可能地限制范围。

这是一个玩它的jsFiddle（在控制台打开的情况下运行以查看结果）： http://jsfiddle.net/8uzgt/2/

js beginner-如何获取网页中选定内容的html以及选择的整个节点层次结构

1 个答案: