JavaScript - Как окружить теги блока тегом span?

Question

Я хочу окружить кучу блочных тегов (p, div) собственным тегом span, основанным на выборе пользователя, и мне интересно, как это сделать?Я рассмотрел функции range.insertNode () и range.surroundNode (), но нет способа передать его нескольким узлам для окружения.

Моя текущая реализация выглядит следующим образом:

var selection = window.getSelection();

var range = selection.getRangeAt(0);
var $startSpan = $("<span class=\"SelectSpan\"/>");

range.insertNode($startSpan[0]);
range.surroundContents($startSpan[0]);

Это работает, если выделение содержит только один узел (т. Е. Пользователь выбирает только часть абзаца), но прерывается, если выделение пользователя проходит через несколько P или Div (среди других тегов, я уверен).

В качестве примера рассмотрим следующую структуру DOM:

<div>
  <p>Hello there Mary</p>
  <p>Hello there Jake</p>
</div>

Я бы хотел закончить чем-то вроде следующего, если пользователь выбирает части из обоих абзацев (Предположим, пользователь выбирает "там Мэри Привет там"):

<div>
  <p>Hello <span>there Mary</span></p>
  <p><span>Hello there</span> Jake</p>
</div>

Answer 1

Вам нужно найти все текстовые узлы в пределах диапазона выделения и окружить каждый в отдельности. Я написал библиотеку, которая делает это: Rangy , в частности модуль применения класса CSS .

Answer 2

Это может быть трудной проблемой, потому что диапазон может охватывать много разных узлов на разных уровнях в DOM.(Например, что если пользователь выберет последнее слово одного абзаца и первое слово следующего абзаца?) Таким образом, вы не можете думать о вставке только одного span.Возможно, вам придется вставить несколько из них.

Один из способов, который я решил в прошлом, - это ввести команду для применения поддельного шрифта к выделению.Затем я просматриваю DOM контейнера в поисках <font face="fakefont"> и заменяю каждый тегом span.Это имеет тенденцию работать хорошо.