html - диапазон выбора - получение диапазона + начальный узел + конечный узел + расстояние - PullRequest
Новая
       14

html - диапазон выбора - получение диапазона + начальный узел + конечный узел + расстояние

9 голосов
/ 02 июня 2010

Из моего предыдущего вопроса для выбора конкретного 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

Я хочу сделать это в обратном порядке. Я имею в виду, предположим, что выбор делается пользователем в браузере (сафари). Мой вопрос заключается в том, как мы можем получить начальный узел (как у нас здесь «узел 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);
    }

Но, тем не менее, я не понимаю, как это сделать, если выбран первый абзац, второй или третий, или выбран первый заголовок или второй заголовок, или что ...

1 Ответ

6 голосов
/ 02 июня 2010

Сохранить выбранный диапазон просто. Следующее вернет только первый выбранный диапазон (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 хорошо задокументировано его спецификациями и 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.

...