Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Подсветка выделенного фрагмента текста (https://javascript.ru/forum/events/14985-podsvetka-vydelennogo-fragmenta-teksta.html)

traa 08.02.2011 19:14

Подсветка выделенного фрагмента текста
 
Суть:
Есть абстрактная страница.

Задача:
При выделении мышью какого-нибудь фрагмента выделенный текст получает бэкграунд (допустим, желтый)

Пример:

<span class="fourteen"><em class="highlite">less loading</em></span>
<p><em class="highlight">Add your goods and send a query for transport services, insurance and other back up services for cargo v</em>olume from 1 cubic meter and more. The loading is at the expenses of and on the responsibility of several Shippers.</p>


В тексте на странице были выделены одновременно слова
less loading
и
Add your goods and send a query for transport services, insurance and other back up services for cargo volume from 1 cubic meter and more. The loading is at the expenses of and on the responsibility of several Shippers.


Скрипт пробежался по нодам выделения и в каждой ноде проставил вот такие вот <em>.
Мучаюсь вопросом, - как именно это реализовать?

P.S: выделение за счет поиска текста(проверка на совпадение регуляркой) по всему документу и затем его выделения(пардон, тавтология), пожалуйста, не предлагать, т.к. отрабатывать такой скрипт будет неправильно в ряде случаев (вернее, правильно в основном в одном, - когда будет выделен чистый текст, без тэгов в нем)

Заранее спасибо!

Маэстро 08.02.2011 20:52

Цитата:

Сообщение от traa (Сообщение 91602)
Мучаюсь вопросом, - как именно это реализовать?

Нужно получить всё, что выбрано (selection)
На данном примере Вы должны понять (кроссбраузерно)
var rng,sel;
if (document.createRange) 
 {
 rng = document.createRange();
 rng.selectNodeContents(Clip);
 sel = window.getSelection();
 sel.removeAllRanges();
 sel.addRange(rng);
 }
else
 {
 rng = document.body.createTextRange();
 rng.moveToElementText(Clip);
 rng.select();
 }

далее работаете с коллекцией выбранных элементов

traa 08.02.2011 21:08

Выбрать, - это понятно, считайте, что оно уже выбрано.
Как с выбранным выделением, которое в переменной sel находится работать в плане изменения структуры ДОМ (добавления до и перед выделением тэгов, в зависимости от количества нодов)

traa 09.02.2011 21:05

Тема всё еще актуальна.

monolithed 09.02.2011 23:00

http://2007.fastcoder.ru/articles/?aid=609

traa 10.02.2011 01:41

Статья хорошая, спасибо большое. Но в ней не затронута тема выделения сразу нескольких нодов (например, сразу три-четыре ноды разного типа затронуты) и что с этим делать.

Я пока прикидываю, что нужно как-то ходить по ДОМ узлам и в каждом узле выделять необходимый текст, т.е. начиная с startContainer выделения и до endContainer ходить, используя nextSibling.
Но что-то, судя по всему, это не совсем верный вариант

Обычные текстовые ноды выделять не проблема, но когда оказываются еще элементные ноды, сразу возникает творческий тупик :(

traa 10.02.2011 16:36

В принципе, задача решена. Всем спасибо, хоть и предоставленные материалы не дали решения.

Apple 11.02.2011 23:30

traa,
а Вы случайно не знаете, как можно получить ID выделенных пользователем ячеек таблицы?
(и потом передать их методом POST?)

traa 12.02.2011 15:13

Apple,
Берете объект выделения (выше написано, как примерно, я немного по-другому, но это не суть), получаете из него range выделения, затем пробегаетесь по всем нодам рэнжа, проверяя, что из них является тэгом td и при совпадении выбираете идентификатор ячейки в массив.

Apple 13.02.2011 14:26

А как обращаться к нодам рэнжа?


Часовой пояс GMT +3, время: 12:35.