javascript - html - 选择范围 - 获取范围+起始节点+结束节点+距离

Question

来 self 的 previous question为了选择特定的 html 文本，我已经完成了 this link理解 html 字符串中的范围。

用于选择 html 页面上的特定文本。我们需要按照以下步骤操作。

假定的 HTML:

<h4 id="entry1196"><a
    href="http://radar.oreilly.com/archives/2007/03/call_for_a_blog_1.html"
    class="external">Call for a Blogger's Code of Conduct</a></h4>

<p>Tim O'Reilly calls for a Blogger Code of Conduct. His proposals are:</p>

<ol>
    <li>Take responsibility not just for your own words, but for the
        comments you allow on your blog.</li>
    <li>Label your tolerance level for abusive comments.</li>
    <li>Consider eliminating anonymous comments.</li>
</ol>

按范围选择的java脚本

var range = document.createRange();  // create range
var startPar = [the p node];         // starting parameter 
var endLi = [the second li node];    // ending parameter
range.setStart(startPar,13);         // distance from starting parameter.
range.setEnd(endLi,17);              // distance from ending parameter
range.select();                      // this statement will make selection

我想以相反的方式来做这件事。我的意思是，假设选择是由用户在浏览器 (safari) 上完成的。我的问题是我们如何获得起始节点(因为我们在这里有“p 节点”)和结束节点(因为我们在这里有“第二个 li 节点”)以及范围(因为我们在这里有 13,17) ？

编辑:我的努力(来自this question)

    var sel = window.getSelection();

    if (sel.rangeCount < 1) {
        return;
    }
    var range = sel.getRangeAt(0);
    var startNode = range.startContainer, endNode = range.endContainer;

    // Split the start and end container text nodes, if necessary
    if (endNode.nodeType == 3) {
        endNode.splitText(range.endOffset);
        range.setEnd(endNode, endNode.length);
    }

    if (startNode.nodeType == 3) {
        startNode = startNode.splitText(range.startOffset);
        range.setStart(startNode, 0);
    }

但是，如果选择的是第一段或第二段或第三段，或者选择的是第一个标题或第二个标题等等，我还是很困惑......

Answer 1

存储所选范围很简单。以下将只返回第一个选择的范围(Firefox 至少支持多选):

<script type="text/javascript">

function getSelectionRange() {
    var sel;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.rangeCount) {
            return sel.getRangeAt(0);
        }
    } else if (document.selection) {
        return document.selection.createRange();
    }
    return null;
}

var range;

</script>
<input type="button" onclick="range = getSelectionRange();"
    value="Store selection">

range 将具有属性 startContainer(包含范围开始的节点)、startOffset(开始容器节点内的偏移量:文本节点中的字符偏移量和元素中的子偏移量)，endContainer 和 endOffset(相当于开始属性的行为)。 Range 由 its specification 详细记录和 MDC .

在 IE 中，range 将包含一个 TextRange，其工作方式非常不同。 TextRanges 关注的不是节点和偏移量，而是字符、单词和句子。 Microsoft 的站点有一些文档:http://msdn.microsoft.com/en-us/library/ms533042%28VS.85%29.aspx , http://msdn.microsoft.com/en-us/library/ms535872%28VS.85%29.aspx .