Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Можно ли захватить дополнительный текст вокруг выделенного? (https://javascript.ru/forum/jquery/27026-mozhno-li-zakhvatit-dopolnitelnyjj-tekst-vokrug-vydelennogo.html)

zebra741258963 31.03.2012 18:37

Можно ли захватить дополнительный текст вокруг выделенного?
 
Есть какой-то врагмент текста. Например:
<p>Наша Маша громко плачет <b>уронила</b> в реку мячик...</p>
Через jQuery я могу повесить на тег <B> событие, что при нажатии на него фраза которая в этом теге буде передана мне скажем через ajax (не важно как передаётся, хоть просто в alert выводится). Это легко...
А можно как-то сделать чтобы кроме этой фразы я получил ещё 10 символов до неё и 10 символов текста после неё?

zebra741258963 01.04.2012 01:03

Может выше написал не ясно, по этому решил приложить код:
<p>Наша Маша громко плачет <b>уронила</b> в реку мячик...</p> 

<script src=jQuery.js></script>
<script>
$(document).ready(function()
 {

 $('b').click(function() {  alert($(this).text());  });

 });
</script>
Имеется текст в котором выделены слова. Если нажимаешь на выделенное слово - оно выводится (в данном случае выведется слово "уронила"). Но задача чтобы выводилось не только это слово, а более глубокий захват, дполнительно по 10 символов с обеих сторон. Ну к примеру в данном случае это было бы - "плачет <b>уронила</b> в реку" (или без тегов).
Ну может быть у кого-нибудь есть хотя бы теоретические идеи?

B@rmaley.e><e 01.04.2012 01:30

Теоретическая идея такова: берём элемент, смотрим соседние узлы. Если они текстовые, то берём 10 символов из них (если там меньше, то идём к другим соседям, возможно, поднимаясь вверх по иерархии), если узлы не текстовые, а обычные элементы, то смотрим их содержимое.

T-sh 01.04.2012 02:55

я бы так сделал:

1. берём содержимое текущего (кликнутого) элемента (в вашем случае, "уронила").
2. берём html() родителя кликнутого элемента (получится: "Наша Маша громко плачет <b>уронила</b> в реку мячик...").
3. удаляем теги
4. регуляркой берём 10 символов до "уронила" и 10 символов после.

zebra741258963 01.04.2012 13:49

T-sh,
Это совершенно не правильный подход! В тексте слово "уронила" может встречаться много раз и часть из них может быть также выделена тегами. В том-то и задача, чтобы получить символы до и после именно вокруг того слова, по которому кликнули!

B@rmaley.e><e,
Всё правильно, придётся идти вверх по иерархии...
Но ведь тег "В" не разбивает фрагмент параграф на соседние узлы!
Я могу посмотреть содержимое тега В - "уронила".
Я могу подняться на родителя, и увижу содержимое параграфа - "Наша Маша громко плачет <b>уронила</b> в реку мячик..."
Но я не получу соседние узлы типа "Наша Маша громко плачет" и "в реку мячик..."

T-sh 01.04.2012 16:17

Цитата:

Сообщение от zebra741258963 (Сообщение 166243)
T-sh,
Это совершенно не правильный подход! В тексте слово "уронила" может встречаться много раз и часть из них может быть также выделена тегами. В том-то и задача, чтобы получить символы до и после именно вокруг того слова, по которому кликнули!

что мешает запомнить позицию, если слово повторяется, и потом также брать по 10 символов от позиции вхождения в родительском .html()???

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

zebra741258963 01.04.2012 18:19

T-sh,
Если я могу получить позицию вхождения моего объекта в родителе - это полностью решает вопрос. А переберать элементы всё равно придётся, ведь мне не надо чтобы в текст (в случае если он вначале/конце) вошол новостной блок или пункты меню из шапки сайта. Правда это уже технические мелочи...
Но как получить эту позицию текста в которой тот объект по которому кликнули?

T-sh 01.04.2012 18:46

Цитата:

Сообщение от zebra741258963 (Сообщение 166323)
T-sh,
Но как получить эту позицию текста в которой тот объект по которому кликнули?


да много способов..

для начала нужно определиться, в каких тегах заключены "кликабельные" слова/фразы.

если по примеру <b> .. </b>, то в итоге примерно так:

по клику на него обернуть в нейтральный тег, который заведомо не встречается на странице, допустим <h6>..</h6>.

всё.

берем родительский .html(). в нём сначала ваши все заморочки с новостными блоками и прочим (удалить лишние теги и т.д.), а потом:

от позиции первого (единственного) вхождения "<h6>" -10 символов,
от позиции первого (опять-таки единственного) вхождения "</h6>" +10 символов :)

готово.

T-sh 01.04.2012 18:48

вместо тега можно просто добавлять какой-нибудь непечатный символ.

(позиция вхождения символа)-3 = начало нашего кликнутого элемента
(позиция вхождения символа)+ длина содержимого + 4 = конец нашего кликнутого элемента.

3 — это тег "<b>"
4 — "</b>"

zebra741258963 01.04.2012 21:04

Вложений: 1
Да, я не подумал что можно заменить на что-то уникальное, и потом вернуть обратно...
Завернуть легко - $(this).wrap('<strong>');
а как потом вывернуть? (избавиться от обёртки)
Я думал типа:
x=$(this);
z=$(this).parent();
z=x;
Но наверно что-то делаю не так. Ошибки не возникает, но встроенный в IE девелоупер тул, показывает:

Кстати ни как не могу понять, как видно на картинке, после оборачивания в strong мой старый B получил параметр jQuery17108889328545285118=1, но если я вывожу $(this).parent().html() я его не вижу, просто добавился стронг и всё:
Наша Маша громко плачет <strong><b>уронила</b></strong> в реку мячик...


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