Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 08.02.2011, 18:14
Интересующийся
Отправить личное сообщение для traa Посмотреть профиль Найти все сообщения от traa
 
Регистрация: 03.02.2011
Сообщений: 27

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

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

Пример:

<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: выделение за счет поиска текста(проверка на совпадение регуляркой) по всему документу и затем его выделения(пардон, тавтология), пожалуйста, не предлагать, т.к. отрабатывать такой скрипт будет неправильно в ряде случаев (вернее, правильно в основном в одном, - когда будет выделен чистый текст, без тэгов в нем)

Заранее спасибо!
Ответить с цитированием
  #2 (permalink)  
Старый 08.02.2011, 19:52
Профессор
Отправить личное сообщение для Маэстро Посмотреть профиль Найти все сообщения от Маэстро
 
Регистрация: 02.07.2010
Сообщений: 642

Сообщение от traa Посмотреть сообщение
Мучаюсь вопросом, - как именно это реализовать?
Нужно получить всё, что выбрано (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();
 }

далее работаете с коллекцией выбранных элементов
Ответить с цитированием
  #3 (permalink)  
Старый 08.02.2011, 20:08
Интересующийся
Отправить личное сообщение для traa Посмотреть профиль Найти все сообщения от traa
 
Регистрация: 03.02.2011
Сообщений: 27

Выбрать, - это понятно, считайте, что оно уже выбрано.
Как с выбранным выделением, которое в переменной sel находится работать в плане изменения структуры ДОМ (добавления до и перед выделением тэгов, в зависимости от количества нодов)
Ответить с цитированием
  #4 (permalink)  
Старый 09.02.2011, 20:05
Интересующийся
Отправить личное сообщение для traa Посмотреть профиль Найти все сообщения от traa
 
Регистрация: 03.02.2011
Сообщений: 27

Тема всё еще актуальна.
Ответить с цитированием
  #5 (permalink)  
Старый 09.02.2011, 22:00
Особый гость
Посмотреть профиль Найти все сообщения от monolithed
 
Регистрация: 02.04.2010
Сообщений: 4,260

http://2007.fastcoder.ru/articles/?aid=609
Ответить с цитированием
  #6 (permalink)  
Старый 10.02.2011, 00:41
Интересующийся
Отправить личное сообщение для traa Посмотреть профиль Найти все сообщения от traa
 
Регистрация: 03.02.2011
Сообщений: 27

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

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

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

Последний раз редактировалось traa, 10.02.2011 в 00:58.
Ответить с цитированием
  #7 (permalink)  
Старый 10.02.2011, 15:36
Интересующийся
Отправить личное сообщение для traa Посмотреть профиль Найти все сообщения от traa
 
Регистрация: 03.02.2011
Сообщений: 27

В принципе, задача решена. Всем спасибо, хоть и предоставленные материалы не дали решения.
Ответить с цитированием
  #8 (permalink)  
Старый 11.02.2011, 22:30
Новичок на форуме
Отправить личное сообщение для Apple Посмотреть профиль Найти все сообщения от Apple
 
Регистрация: 11.02.2011
Сообщений: 4

traa,
а Вы случайно не знаете, как можно получить ID выделенных пользователем ячеек таблицы?
(и потом передать их методом POST?)
Ответить с цитированием
  #9 (permalink)  
Старый 12.02.2011, 14:13
Интересующийся
Отправить личное сообщение для traa Посмотреть профиль Найти все сообщения от traa
 
Регистрация: 03.02.2011
Сообщений: 27

Apple,
Берете объект выделения (выше написано, как примерно, я немного по-другому, но это не суть), получаете из него range выделения, затем пробегаетесь по всем нодам рэнжа, проверяя, что из них является тэгом td и при совпадении выбираете идентификатор ячейки в массив.
Ответить с цитированием
  #10 (permalink)  
Старый 13.02.2011, 13:26
Новичок на форуме
Отправить личное сообщение для Apple Посмотреть профиль Найти все сообщения от Apple
 
Регистрация: 11.02.2011
Сообщений: 4

А как обращаться к нодам рэнжа?
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Вывод выделенного текста в форме другого окна Mrjoey Events/DOM/Window 10 22.06.2011 21:31
получение выделенного текста ASerputko Общие вопросы Javascript 2 13.01.2011 08:57
позиция выделенного текста в textarea, начало/конец `p r o x y jQuery 3 07.05.2009 08:08
потеря выделенного фрагмента underW Общие вопросы Javascript 2 06.04.2009 14:39
Замена выделенного текста alexKniaz Общие вопросы Javascript 0 27.10.2008 22:25