window.getSelection() не предоставляет html-узлы

Question

window.getSelection() не предоставляет html-узлы

Это мой источник страницы:

<body>
<div>
    <p><span id="1">word</span> <span id="2">word</span> </p>
    <div><span id="3">word</span> <span id="4">word</span></div>
    <ul>
        <li><span id="5">word</span> <span id="6">word</span></li>
    </ul>
    </ul>
    <p><span id="7">word</span> <span id="8">word</span> <strong><span id="9">word</span></strong> </p>
</div>
</body>

Я хочу выделить (применить новый класс) выбранные пользователем диапазоны и получить его идентификаторы.

Я могу получить выбранный пользователем контент через window.getSelection(). Но я не знаю, как получить выбранные текстовые узлы.

Заранее спасибо, Логан

2

javascript jquery getselection

Источник

user669400 24 авг '12 в 11:39

1 ответ

Решение

Другие вопросы по тегам javascript jquery getselection

user145346 24 авг '12 в 12:24 2012-08-24 12:24 · Accepted Answer · 2012-08-24 12:24

window.getSelection() возвращает selection объект ( ссылка), который включает в себя начало (anchorNode) и конец (extentNode). Итак, на основе предоставленного вами HTML-кода с измененным идентификатором так, что он не использует только цифры ( ссылка) - вот демонстрация. Нажмите на любое слово или выберите группу слов, чтобы увидеть, как они получают "красное" имя класса.

Модифицированный HTML

<div>
    <p><span id="s1">word1</span> <span id="s2">word2</span> </p>
    <div><span id="s3">word3</span> <span id="s4">word4</span></div>
    <ul>
        <li><span id="s5">word5</span> <span id="s6">word6</span></li>
    </ul>
    <p><span id="s7">word7</span> <span id="s8">word8</span> <strong><span id="s9">word9</span></strong> </p>
</div>

скрипт

$('div').bind('mouseup', function(){

    var i,
        s = window.getSelection(),
        // get ID of starting node
        start = parseInt((s.anchorNode.parentNode.id || '').substring(1), 10),
        // get ID of end node
        end = parseInt((s.extentNode.parentNode.id || '').substring(1), 10),
        // start gathering spans
        spans = $('#s' + start);

    // remove selected class
    $('span[id^=s]').removeClass('red');

    // add each span
    for (i = start; i <= end; i++) {
        spans = spans.add( $('#s' + i) );
    }

    // add selected class
    spans.addClass('red');

});