Вопрос по javascript, indexing – Javascript найти положение вхождения выделенного текста в DIV

3

У меня есть строка со словом пять раз. Если я выбрал, привет, он должен вернуть 4

 <div id="content">hello hai hello hello hello</div>

получение выбранного текстового скрипта

<script>
 if(window.getSelection){
   t = window.getSelection();
 }else if(document.getSelection){
   t = document.getSelection();
 }else if(document.selection){
   t =document.selection.createRange().text;
 }
 </script>

Если выбираюhai должно вернуться1.

Если выбираюhello hai должно вернуться1, пожалуйста помоги.

Может ли быть какой-либо HTML внутри<div> или это гарантированно будет один текстовый узел? Tim Down
да в HTML есть HTML tom joy
хороший вопрос даже я хочу его ответ. Rikin Thakkar

Ваш Ответ

2   ответа
8

Предполагая, что содержимое<div> гарантированно будет один текстовый узел, это не так уж сложно. Следующее не работает в IE & lt; 9, который не поддерживает API выбора и диапазона. Если вам нужна поддержка этих браузеров, я могу предоставить код для этого конкретного случая, или вы можете использовать мойСтройный библиотека.

Живая демоверсия:http://jsfiddle.net/timdown/VxTfu/

Код:

if (window.getSelection) {
    var sel = window.getSelection();
    var div = document.getElementById("content");

    if (sel.rangeCount) {
        // Get the selected range
        var range = sel.getRangeAt(0);

        // Check that the selection is wholly contained within the div text
        if (range.commonAncestorContainer == div.firstChild) {
            // Create a range that spans the content from the start of the div
            // to the start of the selection
            var precedingRange = document.createRange();
            precedingRange.setStartBefore(div.firstChild);
            precedingRange.setEnd(range.startContainer, range.startOffset);

            // Get the text preceding the selection and do a crude estimate
            // of the number of words by splitting on white space
            var textPrecedingSelection = precedingRange.toString();
            var wordIndex = textPrecedingSelection.split(/\s+/).length;
            alert("Word index: " + wordIndex);
        }
    }
}
Если<div id="content">hello hai hello hello hello</div> выбор hai должен вернуть 1, а выбор второго hello должен вернуть 2 tom joy
извините за неясный вопрос. Я должен был дать понять. Мне нужно получить выбранный текстовый индекс. Не могли бы вы поделиться ....... tom joy
+1, хороший полный пример.
Круто !!! Superb !!!! :)
@tomjoy: Это немного сложнее и не понятно из твоего вопроса.
3

Вам нужно будет использоватьСпектр Возможности DOM. Вот как получить текущий выбранный диапазон:

var currentRange = window.getSelection().getRangeAt(0);

Оттуда currentRage.startOffset сообщит вам позицию вашего выбора в файле. Поэтому вам нужно сравнить это с начальным диапазоном вашего элемента:

var myContent = document.getElementById('content');
var divRange = document.createRange ();
divRange.selectNodeContents (myContent);

Теперь вы можете сравнить divRange.startOffset с вашим выбором startOffset и определить, какой из них вы используете.

Вы можете написать полный код. Спасибо.
Вы можете написать сравнительный код также tom joy
startOffset это позиция внутриstartContainer который является контейнерным узлом начальной границы диапазона, а не внутри всего документа.startContainer может даже не быть текстовым узлом.
@tomjoy, пример Тима Дауна - лучшая отправная точка. Чтобы различать разные слова, вам нужно будет создать массив всех слов и найти начальный индекс каждого слова. Тогда вы сможете выяснить, к какому случаю относится конкретное слово.

Похожие вопросы