поместить диапазон в выделенный текст

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

один пример:

Первоначальный текст:

<p> a foo </p>
<p> another bar </p>

выбрано:

бар foo
another

Я не хочу нарушать структуру вложенности html:

 <p> a fo<span>o </p>
<p> anoth</span>er bar </p>

Мне нужно что-то вроде этого:

 <p> a fo<span>o </span></p>
 <p> <span>anoth</span>er bar </p>

javascript dom selection textrange
person Martin    schedule 11.10.2012    source источник
comment
Есть ли веская причина, по которой ‹b›привет ‹span›как дела‹/span›?‹/b› нельзя использовать? Это действительный HTML.   -  person ThatSteveGuy    schedule 11.10.2012
comment
да, это действительно html, чего я не хочу, так это: ‹b› привет ‹span› как дела ‹/b› ‹/span› , например   -  person Martin    schedule 11.10.2012
comment
Взгляните на rangy, он использует комбинацию элементов-оболочек и классов для достижения чего-то подобного. (пример)   -  person bfavaretto    schedule 11.10.2012
comment
да, если я видел rangy, но я не буду его использовать, потому что он не делает того, что мне нужно, мне нужно сохранить этот html на сервере для просмотра позже.   -  person Martin    schedule 11.10.2012
comment
Захват HTML - это просто вопрос получения innerHTML элемента контейнера, я все еще верю, что rangy сэкономит вам некоторое время...   -  person bfavaretto    schedule 12.10.2012

Ответы (3)


arrow_upward
2
arrow_downward

Это невозможно. Представьте себе это:

<p> a foo </p>
<p> another bar </p>

в результате чего:

a foo
еще один бар

Теперь, если пользователь выбирает только часть, скажем:

бар foo
another

вы нарушаете структуру вложенности html:

 <p> a fo<span>o </p>
<p> anoth</span>er bar </p>

Этого невозможно добиться с помощью только одного тега.

person Christoph    schedule 11.10.2012

arrow_upward
1
arrow_downward

Вам нужно будет перебрать каждый символ в выделенном тексте, сгруппировав символы по узлу DOM, в котором они находятся. После того, как вы создали группы, вы захотите заключить каждую группу в теги <span>.

Вы можете сделать это, просмотрев свойства anchorNode и focusNode объекта выбора, а также проверив другие вероятные узлы (т. е. все дочерние элементы общего родителя/предка узлов привязки и фокуса) с помощью метода containsNode().

person JasonWyatt    schedule 11.10.2012

arrow_upward
1
arrow_downward

Используя эту превосходную реализацию treeWalker, вот jsFiddle. Пожалуйста, дайте мне знать, если это работает для вас. Примечание: используйте rangy, это круто.

РЕДАКТИРОВАТЬ: Нет, подождите, исправлено.

person Asad Saeeduddin    schedule 11.10.2012
comment
это хорошо!! но не очень хорошо работает, если вы выберете er в другом баре - person Martin; 12.10.2012
comment
Какие у вас проблемы? Примечание: это было сделано только для firefox, я не знаю, насколько хорошо это будет работать в других браузерах. - person Asad Saeeduddin; 12.10.2012
comment
Правильно, мне нужно добавить условие для одного элемента. Я изменю и вернусь к вам через секунду. - person Asad Saeeduddin; 12.10.2012
comment
если вы измените его, вы можете изменить внутренние промежутки в выборе - person Martin; 12.10.2012
comment
подчеркивание регистра и старый выделенный текст изменяют атрибуты элемента с новым сапаном. Буду признателен, спасибо! - person Martin; 12.10.2012
comment
я пытаюсь, но, вероятно, мне придется вернуться к вам завтра, потому что там, где я нахожусь, уже очень поздно. если вам нужно немедленное решение, попробуйте одно из вышеперечисленных или rangy. не волнуйся, я попробую. - person Asad Saeeduddin; 12.10.2012
comment
не волнуйся :), я увижу Рэнджи - person Martin; 12.10.2012
comment
Что ж, в конечном итоге это лучшее решение, но я только что исправил ошибку. Я только что видел ваши другие запросы. Возможно, открыть еще один вопрос? Я не совсем понимаю, что вам там нужно. - person Asad Saeeduddin; 12.10.2012