Получить позицию в div выделенного текста

Question

Я хотел бы узнать начальную и конечную позицию (количество символов) моего выделенного текста, включая HTML.

Пример:

<div class="container">  
<div id="test"> 
     Hello world, how <a href="#">are</a> you doing? 
    </div> 
</div> 

То, что я хотел бы знать, например:

function startStop(){ 
    // 
    // Do something here with selected text inside the DIV container 
    // 
    return { 
     start: ???, 
     stop: ??? 
    } 
} 

Когда я выбирал: how <a href="#">are</a> you результат будет: start = 30 и stop = 57

примечание: так он начинает отсчет с container div

UPDATE: Когда я использую: window.getSelection().getRangeAt(0).startOffset это дает мне startOffset НО внутри текущего элемента, я хочу от родительского элемента.
Так что в моем примере это будет выход 6, если я выбрал «мир», но мне также нужно <div id="test"> поэтому выход должен быть: 21

Answer 1

Попробуйте это:

function startStop(word){ 
    var start = $.trim($('#test')[0].innerHTML).indexOf(word); 
    var stop = start + word.length; 
    return { 
     start: start, 
     stop: stop 
    } 
} 

облицовку убедитесь, что все пробелы и т. д. удаляются. Затем мы просто проверяем индекс данного слова внутри внутреннего html, чтобы знать начало. И конец равен началу + длине данного слова.

Обратите внимание, что он будет возвращать 29, а не 30, потому что она начинается с 0 ...

Небольшой TestCase можно увидеть здесь: http://jsfiddle.net/UQ2aC/

---

Если вы хотите, чтобы выбранный ДИВ включен, вы можно использовать outerHTML вместо innerHTML (ср. http://jsfiddle.net/UQ2aC/1/)

$.trim($('#test')[0].outerHTML).indexOf(word); 

Обратите внимание, что вы должны убедиться, что ваш HTML красиво структурированы без пробелов перед вашим предложением в div. Потому что так оно и будет.

---

Альтернатива, если вы действительно хотите использовать «грязные» HTML будет выглядеть примерно так:

$.trim($('#test')[0].outerHTML).indexOf('>') + $.trim($('#test')[0].innerHTML).indexOf('world') + 1 

это первый подсчитывают длину самого первого тега, и добавить длину внутренний текст без каких-либо пробелов ... (cfr. http://jsfiddle.net/UQ2aC/2/)

Answer 2

Я не совсем уверен, что вы пытаетесь архивировать, но если вы хотите считать символы внутри тега div, это может помочь: Javascript character count