html - 选择范围 - 获取范围 + 起始节点 + 结束节点 + 距离 [英] html - selection range - getting the range + starting node + ending node + distance

问题描述

从我的 previous question 中选择特定的 html 文本，我已经完成了 此链接 了解 html 字符串中的范围.

From my previous question for selecting specific html text, I have gone through this link to understand range in html string.

用于选择 html 页面上的特定文本.我们需要遵循这些步骤.

For selecting a specific text on html page. We need to follow this steps.

假定的 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脚本

java script to make selection by range

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)?

I want to do this in invert way. I mean, assume that selection is done by user on browser (safari). My question is that How can we get starting node (as we have 'the p node' here) and ending node (as we have 'the second li node' here) and the range as well (as we have 13,17 here)?

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

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

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

But, yet I am confused about getting like, if selected is first paragraph or second or third, or selected is in first heading or second heading or what....

推荐答案

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

Storing the selected range is simple. The following will return only the first selected range (Firefox at least supports multiple selections):

<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(与 start 属性等效的行为).Range 由 its 详细记录规范和MDC.

range will have properties startContainer (the node containing the start of the range), startOffset (an offset within the start container node: a character offset in the case of text nodes and child offset in elements), endContainer and endOffset (equivalent behvaiour to the start properties). Range is well documented by its specification and 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.

In IE, range will contain a TextRange, which works very differently. Rather than nodes and offsets, TextRanges are concerned with characters, words and sentences. Microsoft's site has some documentation: http://msdn.microsoft.com/en-us/library/ms533042%28VS.85%29.aspx, http://msdn.microsoft.com/en-us/library/ms535872%28VS.85%29.aspx.

这篇关于html - 选择范围 - 获取范围 + 起始节点 + 结束节点 + 距离的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！