代码之家 › 专栏 › 技术社区 › sagarkothari

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

dhtml range select html javascript

sagarkothari · 技术社区 · 14 年前

从我 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);
    }

但是,如果选择的是第一段、第二段或第三段,或者选择的是第一段、第二段或第三段,或者选择的是第一段、第二段,或者什么,我还是很困惑。

1 回复 | 直到 7 年前

Tim Down 14 年前

存储所选范围很简单。以下仅返回第一个选定区域(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 .

在伊江, 范围 将包含一个 TextRange 它的工作方式非常不同。文本范围不涉及节点和偏移,而是涉及字符、单词和句子。微软网站上有一些文档: http://msdn.microsoft.com/en-us/library/ms533042%28VS.85%29.aspx , http://msdn.microsoft.com/en-us/library/ms535872%28VS.85%29.aspx .