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

Question

从我之前选择特定html文本的问题,我已经通过这个链接来了解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) ？

编辑:我的努力(来自这个问题)

    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(与启动属性等效的behvaiour).它的规范和MDCRange有很好的文档记录.

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