Объект TextRange. Поиск фрагмента в текстовом поле или документе.

Опубликовал: admin Четверг, Апрель 19, 2012 в категории HTML | Пока нет комментариев

Расширение или сжатие выделенного фрагмента текста

Объект TextRange предоставляет доступ к фрагменту текста Web-страницы. Для работы с фрагментом необходимо создать объект с помощью метода createTextRange():

var Text1 = document.body.createTextRange();

Свойства объекта TextRange:

? text возвращает текстовый фрагмент;

? htmlText возвращает HTML-код содержимого объекта;

? boundingHeight и boundingWidth служат для определения высоты и ши-

рины прямоугольника, содержащего текстовую область;

? boundingLeft и boundingTop позволяют определить горизонтальную и вертикальую координаты левого верхнего угла прямоугольника, содержа- щего текстовую область, относительно элемента, содержащего объект TextRange;

? offsetLeft и offsetTop возвращают горизонтальную и вертикальную координаты левого верхнего угла прямоугольника, содержащего тексто- вую область, относительно окна.

Методы объекта TextRange:

? select() выделяет содержимое объекта TextRange;

? pasteHTML(<Текст>) заменяет текущее содержимое объекта TextRange на

HTML-фрагмент, указанный в качестве параметра;

? findText(<Текст>) проверяет наличие заданного текста внутри объекта

TextRange. Возвращает true, если текст был найден;

? scrollIntoView() прокручивает содержимое окна так, чтобы объект был виден в окне;

? expand(<Элемент>) расширяет объект TextRange на один <Элемент>. Воз-

вращает true, если объект был расширен, и false — в противном случае;

? move(<Элемент>, <Количество>) сжимает объект в точку и перемещает его на заданное <Количество> <Элементов>. <Количество> может прини- мать положительные или отрицательные значения. Если оно не задано, то объект сдвигается на один <Элемент>;

? moveStart(<Элемент>, <Количество>) перемещает начальную границу объекта на заданное <Количество> <Элементов>;

? moveEnd(<Элемент>, <Количество>) перемещает конечную границу объ-

екта на заданное <Количество> <Элементов>.

В качестве <Элемента> могут быть заданы следующие строковые значения:

• character — символ;

• word — слово;

• sentence — предложение;

• textedit — область объекта;

? collapse(true | false) сворачивает объект TextRange, то есть помеща- ет открывающие и закрывающие маркеры объекта TextRange вместе в начало или конец текущего объекта. Если параметр равен true, то марке- ры помещаются в начало, если false — то в конец. Используется для установки маркера ввода в нужную позицию;

? moveToPoint(<x>, <y>) передвигает границы объекта и сжимает его во-

круг выбранной точки. Координаты отсчитываются относительно окна;

? moveToElementText(<Элемент страницы>) перемещает объект так, чтобы он охватил текст в заданном элементе;

? duplicate() возвращает новый объект TextRange, являющийся копией текущего;

? parentElement() возвращает ссылку на родительский элемент, содержа-

щий текущий объект TextRange;

? inRange(<Объект>) равен true, если указанный объект содержится внут-

ри текущего;

? isEqual(<Объект>) равен true, если указанный объект равен текущему;

? getBookmark() создает закладку;

? moveToBookmark(<Закладка>) переходит к закладке. Возвращает true,

если переход прошел успешно;

? compareEndPoints(<Диапазон>, <Объект>) сравнивает два объекта по указанному <Диапазону>. Возвращает следующие значения:

• -1 — если граница текущего находится левее или выше границы ука-

занного объекта;

• 0 — если они равны;

• 1 — если граница текущего находится правее или ниже границы ука-

занного объекта.

В качестве <Диапазона> могут быть указаны следующие строковые зна-

чения:

• StartToEnd — сравнение начальной границы текущего объекта с ко-

нечной границей указанного объекта;

• StartToStart — сравнение начальной границы текущего объекта с начальной границей указанного объекта;

• EndToStart — сравнение конечной границы текущего объекта с на-

чальной границей указанного объекта;

• EndToEnd — сравнение конечной границы текущего объекта с конеч-

ной границей указанного объекта;

? setEndPoint(<Диапазон>, <Объект>) переносит начальную или конеч-

ную границу текущего объекта в начало или конец заданного объекта.

В качестве <Диапазона> могут быть указаны следующие значения:

• StartToEnd совмещает начальную границу текущего объекта с конеч-

ной границей указанного объекта;

• StartToStart совмещает начальную границу текущего объекта с на-

чальной границей указанного объекта;

• EndToStart совмещает конечную границу текущего объекта с началь-

ной границей указанного объекта;

• EndToEnd совмещает конечную границу текущего объекта с конечной границей указанного объекта.

В качестве примера в листинге 3.62 реализована возможность поиска фраг-

мента в текстовой области.

Листинг 3.62. Поиск фрагмента в текстовой области

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Поиск фрагмента</title>

1251">

<!-

function f_click() {

if (!document.getElementById("txt2").createTextRange) { window.alert("Объект не поддерживается Web-браузером"); return;

}

var Range1, Text1, Select1;

Text1 = document.getElementById("txt1").value; Select1 = document.getElementById("sel1")

if (Text1 != "") {

Range1 = document.getElementById("txt2").createTextRange();

if (Range1.findText(Text1)) { Range1.scrollIntoView(); switch (Select1.value) { case "1":

Range1.expand("character"); break;

case "2":

Range1.expand("word"); break;

case "3":

Range1.collapse(true); break;

case "4":

Range1.collapse(false); break;

case "5": Range1.expand("word"); Range1.collapse(true); break;

case "6": Range1.expand("word"); Range1.collapse(false);

break;

}

Range1.select(); // Выделяем найденный фрагмент

var msg = "bounding X: " + Range1.boundingLeft;

msg += " bounding Y: " + Range1.boundingTop + "<br>";

msg += "offset X: " + Range1.offsetLeft;

msg += " offset Y: " + Range1.offsetTop + "<br>";

msg += "Тег: " + Range1.parentElement().tagName;

msg += " id: " + Range1.parentElement().id + "<br>";

document.getElementById("div1").innerHTML = msg;

}

else window.alert("Ничего не найдено");

}

else window.alert("Поле не заполнено");

}

//->

</script>

</head>

<body>

<div>

<option value="0">Выделить текст</option>

<option value="1">Выделить текст + 1 символ</option>

<option value="2">Выделить все слово</option>

<option value="3">Поместить курсор в начало найденного фрагмента</option>

<option value="4">Поместить курсор в конец найденного фрагмента</option>

<option value="5">Поместить курсор в начало слова с фрагментом</option>

<option value="6">Поместить курсор в конец слова с фрагментом</option>

</select><br>

<!-

document.write("<textarea id=’txt2′ cols=’50′ rows=’10′>");

for (var i=1; i<51; i++) {

document.write("Содержимое строки" + i + "\n");

}

document.write("<" + "/textarea>");

//->

</script>

</div>

</body>

</html>

А следующий пример демонстрирует применение методов moveStart() и moveEnd(). С помощью кнопок можно перемещать начальную или конечную границу объекта TextRange, таким образом расширяя или сжимая выделен- ный фрагмент (листинг 3.63).

Листинг 3.63. Расширение выделенного фрагмента

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Расширение выделенного фрагмента</title>

1251">

<!-

function f_click(Val1) {

if (!document.selection) {

window.alert("Объект не поддерживается Web-браузером");

return;

}

if (document.selection.type=="Text") {

var Range1 = document.selection.createRange();

switch (Val1) {

case 1:

Range1.moveStart("character", -1); Range1.select();

break;

case 2: Range1.moveStart("character"); Range1.select();

break;

case 3:

Range1.moveEnd("character", -1); Range1.select();

break;

case 4: Range1.moveEnd("character"); Range1.select();

break;

}

else {

window.alert("Необходимо выделить фрагмент");

}

//->

</script>

</head>

<body>

<p>Расширение выделенного фрагмента</p>

<div>

Начальная граница

<input type="button" value=" > " onclick="f_click(2);"><br>

Конечная граница

<input type="button" value=" > " onclick="f_click(4);">

</div>

</body>

</html>

В Web-браузерах Firefox и Opera поддерживается абсолютно другой объект, называемый Range. Для работы с таким объектом необходимо создать об- ласть с помощью метода createRange() объекта document:

var rng = document.createRange();

Свойства объекта Range:

? startContainer возвращает ссылку на узел, в котором содержится на-

чальная точка области;

? startOffset возвращает смещение от начала узла (возвращаемого свой-

ством startContainer) до начальной точки области;

? endContainer возвращает ссылку на узел, в котором содержится конечная точка области;

? endOffset возвращает смещение от начала узла (возвращаемого свойст-

вом endContainer) до конечной точки области;

? collapsed возвращает true, если объект свернут в точку, и false —

в противном случае:

var rng = document.createRange();

if (rng.collapsed) window.alert("Свернут");

else window.alert("Нет");

? commonAncestorContainer возвращает ссылку на узел, в котором содер-

жатся как начальная, так и конечная точки области.

Методы объекта Range:

? toString() возвращает текстовое содержимое области;

? cloneRange() создает копию объекта Range;

? cloneContents() создает копию внутреннего содержимого области.

В качестве значения возвращает объект DocumentFragment;

? detach() удаляет объект Range;

? deleteContents() удаляет все внутреннее содержимое области из доку-

мента;

? extractContents() удаляет все внутреннее содержимое области из доку- мента и возвращает объект DocumentFragment, в котором будет находить- ся удаленное содержимое области;

? collapse(<true | false>) сворачивает область в указанную точку. Если в качестве параметра указано значение true, то область сворачивается в начальную точку, а если false — то в конечную точку;

? selectNode(<Узел>) ограничивает область указанным в качестве пара-

метра узлом;

? selectNodeContents(<Узел>) ограничивает область внутренним содер-

жимым указанного узла;

? insertNode(<Узел>) вставляет новый узел в начало области;

? setStart(<Узел>, <Смещение>) устанавливает положение начальной точки области;

? setStartBefore(<Узел>) устанавливает начальную точку области перед указанным узлом;

? setStartAfter(<Узел>) устанавливает начальную точку области после указанного узла;

? setEnd(<Узел>, <Смещение) устанавливает положение конечной точки области;

? setEndBefore(<Узел>) устанавливает конечную точку области перед ука-

занным узлом;

? setEndAfter(<Узел>) устанавливает конечную точку области после ука-

занного узла;

? surroundContents(<Узел>) вкладывает содержимое области в указанный узел;

? compareBoundaryPoints(<Точки сравнения>, <Область, с которой сравниваем>) сравнивает позиции двух областей. В качестве первого па- раметра могут быть указаны следующие значения:

• 0 — START_TO_START — сравнение начальных точек;

• 1 — START_TO_END — сравнение начальной точки области, указанной в качестве второго параметра, с конечной точкой данной области;

• 2 — END_TO_END — сравнение конечных точек;

• 3 — END_TO_START — сравнение конечной точки области, указанной в качестве второго параметра, с начальной точкой данной области.

В качестве примера использования объекта Range найдем внутри абзаца текст

"фрагмент" и вложим его в тег <strong>:

<p id="txt">Текст для выделения фрагмента</p>

function f_click() {

if (document.createRange) {

var p = document.getElementById("txt").firstChild; var text = p.nodeValue; // Получаем текст абзаца var ind = text.indexOf("фрагмент");

if (ind != -1) { // Если текст найден

// Создаем объект Range

var rng = document.createRange();

rng.setStart(p, ind); // Начальная точка

// Конечная точка

rng.setEnd(p, ind + 8);

// Элемент, в который будем вкладывать текст

var s = document.createElement("strong");

// Вкладываем область в тег strong rng.surroundContents(s);

}

else {

window.alert("Web-браузер не поддерживает метод createRange");

}

</script>

Теперь изменим цвет фона текстового фрагмента, выделенного пользовате-

лем:

<p id="txt">Текст для выделения фрагмента</p>

function f_click() {

if (document.createRange && window.getSelection) {

var sel = window.getSelection();

if (!sel.isCollapsed) {

var rng = sel.getRangeAt(0);

sel.collapseToStart(); // Убираем выделение

// Элемент, в который будем вкладывать выделенный текст var s = document.createElement("span"); s.style.backgroundColor = "#FFE9B3";

// Вкладываем область в тег span rng.surroundContents(s);

}

else window.alert("Нет выделенного фрагмента");

}

else {

window.alert("Web-браузер не поддерживает методы");

}

</script>

Источник: Прохоренок Н. А. HTML, JavaScript, PHP и MySQL. Джентльменский набор Web-мастера. — 3-е изд., перераб. и доп. — СПб.: БХВ-Петербург, 2010. — 912 с.: ил. + Видеокурс (на CD-ROM) — (Профессиональное программирование)

Популярное

Категории

Объект TextRange. Поиск фрагмента в текстовом поле или документе.

Похожие посты:

Комментировать Cancel reply