Question

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

想象一下这个HTML代码：

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

如果用户发起了一个从“World ...”开始的mouseDown事件，然后是一个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放入textarea但这只会让我获得selectedText。我没有尝试<canvas>元素，但这可能是另一种选择。

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

Answer 1

你正在乘坐颠簸，但这很有可能。主要问题是IE和W3C为选择提供了完全不同的接口，所以如果你想要跨浏览器功能，那么你基本上必须把整个事情写两次。此外，两个接口都缺少一些基本功能。

Mozilla开发者连接在W3C selections上有故事。 Microsoft拥有他们的系统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;
}

Answer 2

我的Rangy库将通过统一IE中的不同API来实现您的一部分。 9和所有其他主流浏览器，并通过在其Range对象上提供getNodes()函数：

function getSelectedNodes() {
    var selectedNodes = [];
    var sel = rangy.getSelection();
    for (var i = 0; i < sel.rangeCount; ++i) {
        selectedNodes = selectedNodes.concat( sel.getRangeAt(i).getNodes() );
    }
    return selectedNodes;
}

在所有浏览器中获取所选文本非常简单。在Rangy，它只是

var selectedText = rangy.getSelection().toString();

没有Rangy：

function getSelectedText() {
    var sel, text = "";
    if (window.getSelection) {
        text = "" + window.getSelection();
    } else if ( (sel = document.selection) && sel.type == "Text") {
        text = sel.createRange().text;
    }
    return text;
}

对于字符偏移，您可以对选择中的任何节点node执行类似的操作。请注意，这不一定代表文档中的可见文本，因为它不考虑折叠空格，通过CSS隐藏文本，通过CSS定位在正常文档流外部的文本，<br>隐含的换行符和块元素，以及其他细微之处。

var sel = rangy.getSelection();
var selRange = sel.getRangeAt(0);
var rangePrecedingNode = rangy.createRange();
rangePrecedingNode.setStart(selRange.startContainer, selRange.startOffset);
rangePrecedingNode.setEndBefore(node);
var startIndex = rangePrecedingNode.toString().length;
rangePrecedingNode.setEndAfter(node);
var endIndex = rangePrecedingNode.toString().length;
alert(startIndex + ", " + endIndex);

Answer 3

这会按照我的理解返回所选节点：当我有

<p> ... </p><p> ... </p><p> ... </p><p> ... </p><p> ... </p>...
<p> ... </p><p> ... </p><p> ... </p><p> ... </p><p> ... </p>

很多节点，我只选择了几个节点，然后我只希望这些节点在列表中。

function getSelectedNodes() {
  // from https://developer.mozilla.org/en-US/docs/Web/API/Selection
  var selection = window.getSelection();
  if (selection.isCollapsed) {
    return [];
  };
  var node1 = selection.anchorNode;
  var node2 = selection.focusNode;
  var selectionAncestor = get_common_ancestor(node1, node2);
  if (selectionAncestor == null) {
    return [];
  }
  return getNodesBetween(selectionAncestor, node1, node2);
}

function get_common_ancestor(a, b)
{
    // from http://stackoverflow.com/questions/3960843/how-to-find-the-nearest-common-ancestors-of-two-or-more-nodes
    $parentsa = $(a).parents();
    $parentsb = $(b).parents();

    var found = null;

    $parentsa.each(function() {
        var thisa = this;

        $parentsb.each(function() {
            if (thisa == this)
            {
                found = this;
                return false;
            }
        });

        if (found) return false;
    });

    return found;
}

function isDescendant(parent, child) {
     // from http://stackoverflow.com/questions/2234979/how-to-check-in-javascript-if-one-element-is-a-child-of-another
     var node = child;
     while (node != null) {
         if (node == parent) {
             return true;
         }
         node = node.parentNode;
     }
     return false;
}

function getNodesBetween(rootNode, node1, node2) {
  var resultNodes = [];
  var isBetweenNodes = false;
  for (var i = 0; i < rootNode.childNodes.length; i+= 1) {
    if (isDescendant(rootNode.childNodes[i], node1) || isDescendant(rootNode.childNodes[i], node2)) {
      if (resultNodes.length == 0) {
        isBetweenNodes = true;
      } else {
        isBetweenNodes = false;
      }
      resultNodes.push(rootNode.childNodes[i]);
    } else if (resultNodes.length == 0) {
    } else if (isBetweenNodes) {
      resultNodes.push(rootNode.childNodes[i]);
    } else {
      return resultNodes;
    }
  };
 if (resultNodes.length == 0) {
    return [rootNode];
  } else if (isDescendant(resultNodes[resultNodes.length - 1], node1) || isDescendant(resultNodes[resultNodes.length - 1], node2)) {
    return resultNodes;
  } else {
    // same child node for both should never happen
    return [resultNodes[0]];
  }
}

代码应位于：https://github.com/niccokunzmann/spiele-mit-kindern/blob/gh-pages/javascripts/feedback.js

我在这里发布了这个答案，因为我希望在这里找到它。

Answer 4

您可能希望从http://javascript.internet.com/page-details/copy-selected-text.html

开始

Answer 5

如果您只想要范围，可以采用更短的方式。

function getRange(){
    return (navigator.appName=="Microsoft Internet Explorer")
        ? document.selection.createRange().parentElement()
        : (getSelection||document.getSelection)().getRangeAt(0).commonAncestorContainer
}

Answer 6

所有符合标准的代码均适用于IE11 +。

文字字符串

window.getSelection().getRangeAt(0).toString()

开始节点（即使向后选择文字）：

window.getSelection().anchorNode

结束节点（即使向后选择文字）：

window.getSelection().focusNode

您想了解更多吗？选择一些文本并在控制台中运行以下JavaScript：

console.log(window.getSelection());
console.log(window.getSelection().getRangeAt(0));

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

6 个答案: