Диапазон выделения для элемента HTML - PullRequest
Новая
       3

Диапазон выделения для элемента HTML

2 голосов
/ 02 сентября 2011

Как я могу преобразовать выделенный текстовый диапазон в элемент HTML?

Например, строка The quick brown fox jumps over the lazy dog, я выбрал часть brown, которая отражает точки выбора start = 10 и end = 14 (выбор не построен с помощью пользовательского ввода).

Теперь, как мне преобразовать эту часть строки в <span>brown</span>?

P.S. Я рассмотрел Как обернуть с помощью HTML-тегов трансграничный диапазон выбора DOM? . Предоставленный ответ использует execCommand, но меня это не устраивает, потому что мне нужно, чтобы это было как можно более прозрачным.

Я также использую Range API для выбора, но, как и в этом случае, «выбор» - это просто сохраненные указатели start/end местоположений без какого-либо фактического выбора.

У меня была идея, что я мог бы использовать указатели для создания выделения в фоновом режиме, обернуть с помощью </span>, и это было бы невидимо для пользователя, но опять же ... Я понятия не имею, как это выполнить.

Заранее спасибо!

Ответы [ 2 ]

4 голосов
/ 02 сентября 2011

В этом случае вы можете сделать это, используя методы Range.Я предполагаю, что ваш текст все содержится в одном текстовом узле.Например: 

<div id="test">The quick brown fox jumps over the lazy dog</div>

Сначала создайте диапазон: 

var range = document.createRange();
var textNode = document.getElementById("test").firstChild;
range.setStart(textNode, 10);
range.setEnd(textNode, 15);

Чтобы окружить только слово "коричневый" в пределах диапазона, вы можете использовать метод диапазона surroundContents(): 

var span = document.createElement("span");
range.surroundContents(span);

Однако это не будет работать в некоторых более сложных случаях, когда выбор пересекает границы узла.Кроме того, IE <9 не поддерживает <code>Range, поэтому вам потребуется совершенно другое решение для этих браузеров.

Демонстрационная версия: http://jsfiddle.net/m3yJ5/

Раздел саморекламы

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

1 голос
/ 02 сентября 2011

Предположим, что The quick brown fox jumps over the lazy dog обернуто в некоторый элемент, скажем, DIV, например: 

<div id='myText'>The quick brown fox jumps over the lazy dog</div>

Вы могли бы написать что-то вроде этого: 

var ele = document.getElementById('mytext');
var myText = ele.innerHTML;
var start = 10;
var end = 14;
var newText = myText.substring(0, start) + '<span>' + myText.substring(start, end) + '</span>' + myText.substring(end);
ele.innerHTML = newText;

JavaScript предоставляет несколько методов обработки строк. Попробуйте Googling JavaScript String Methods.

...