Oбъект TextRange
Большинство разработчиков динамических web страниц привыкли
использовать свойства innerText/innerHTML и
outerText/outerHTML, однако для работы с текстом в
Internet Explorer существует более сильный инструмент - объект TextRange,
что в переводе на русский язык означает "Текстовая Область". Данный объект
содержит множество методов для работы с текстом, важно что он не содержит
в себе текст и элементы, а просто позволяет работать и обращаться к
ним.
В начале своего знакомства с объектом, я был удивлен теми
возможностями которые он представляет разработчику, с их помощью я легко
смог реализовать некотрые идеи которые раньше я даже не представлял как
сделать.
Забегая вперед, давайте посмотрим, что мы можем делать с
помощью этого объекта, а далее подробно разберем эти примеры и не
только...
Пример
1.
Данный абзац
содержит несколько предложений. Выберите вариант форматирования абзаца.
Элементы управления находятся снизу!
Здесь были задействованы методы: moveToElementText, move,
expand, execCommand.
Пример
2.
Данный текст подлежит цензуре, так как он содержит не
нормативную лексику. Кликнув на слово подлежащее цензуре вы измените
содержание и смысл текста. Кликните в любое слово этого абзаца!
Здесь были задействованы методы: moveToPoint, expand,
pasteHTML.
Объект TextRange создается несколькими способами:
1. С
помощью метода createTextRange в теле документа BODY:
MyTextRange = document.body.createTextRange();
2. С помощью метода createTextRange только в элементах
TEXTAREA, BUTTON, и INPUT TYPE=text
MyTextRange = document.all[MyTextAreaId] .createTextRange();
MyTextRange = document.all[MyButtonId] .createTextRange(); MyTextRange =
document.all[MyInputId] .createTextRange();
3. С помощью метода createRange для текстового выделения
document.selection, в своих примерах для наглядности я буду использовать
этот способ наиболее часто.
MyTextRange = document.selection.createRange();
Объект TextRange обладает следующими свойствами и
методами:
Методы |
Свойства |
collapse |
boundingHeight |
compareEndPoints |
boundingLeft |
duplicate |
boundingTop |
execCommand |
boundingWidth |
expand |
htmlText |
findText |
offsetLeft |
getBookmark |
offsetTop |
getBoundingClientRect |
text |
getClientRects |
|
inRange |
|
isEqual |
|
move |
|
moveEnd |
|
moveStart |
|
moveToBookmark |
|
moveToElementText |
|
moveToPoint |
|
parentElement |
|
pasteHTML |
|
queryCommandEnabled |
|
queryCommandIndeterm |
|
queryCommandState |
|
queryCommandSupported |
|
queryCommandValue |
|
scrollIntoView |
|
select |
|
setEndPoint |
|
|