Можно ли захватить дополнительный текст вокруг выделенного?
 

Есть какой-то врагмент текста. Например:

<p>Наша Маша громко плачет <b>уронила</b> в реку мячик...</p>

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

Может выше написал не ясно, по этому решил приложить код:

<p>Наша Маша громко плачет <b>уронила</b> в реку мячик...</p> 

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

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

 });
</script>

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

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

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

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

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

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

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

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

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

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

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

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

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

всё.

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

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

готово.

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

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

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

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

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

ok, с удалением тяжеловато.. вернее, много лишних движений будет.

предлагаю такой вариант:

по клику на нужный элемент (слово) присваиваем ему id = "clicked".

дальше всё тоже самое, с поиском вхождения :) после нужных действий — атрибут удалить)

Я пока просто свой текст в <b> менял на временный уникальный код, потом искал позицию этого текста, и брал символы до и после него, после чего менял текст обратно (единственный минус - может дёрнуться экран от временного изменения текста).

А всё же - что я не правильно делал убирая обёртку?
И почему я не вижу параметра jQuery######### внутри <B> при коде:

$('b').click(function() 
  {
  $(this).wrap('<strong>');
  alert($(this).parent().html());
  });

ну, если обертка убирается — всё делаете так :)

а jQuery######### — это, имхо, что-то вроде временной транзакции или типа того, которая используется только самой библиотекой, поэтому её не видно нигде, кроме как в отладчиках. я бы не стал заморачиваться по этому поводу.

Так нет же... я наоборот пишу что обёртка не убирается...
Ставлю через wrap, а убрать не могу... Делают так:

<p>Наша Маша громко плачет <b>уронила</b> в реку мячик...</p> 

<script src=jQuery.js></script>
<script>
$(document).ready(function()
 {
 $('b').click(function() 
  {
  $(this).wrap('<strong>');
  x=$(this);
  z=$(this).parent();
  z=x;
  alert($('p').html());
  });
 });
</script>

Но <strong> всё равно остаётся :(

блин, вот что значит воскресенье..

не надо ничего заменять и присваивать..

$(this).unwrap('<strong>');

Это Вы так думаете.

<div>Hello, <strong id="e">%username%</strong>! I need your bike and clothes.</div>

<script>
document.getElementById('e').onclick = function () {
  alert([
    'Current node content: ' + this.innerHTML,
    'Preceding text: ' + this.previousSibling.nodeValue,
    'Succeeding text: ' + this.nextSibling.nodeValue
  ].join('\n'))
}
</script>

T-sh,
Хорошо, а в чём была моя ошибка? Почему не получалось перекинуть текущий объект в родителя?

ну, я никогда не встречал такого подхода, поэтому точно сказать не могу, могу лишь предположить, что jquery не может или не хочет сразу воспринимать добавленный wrap'ом элемент, как родителя.

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