Веб-инструмент
Веб-мастерская
Веб-инструмент
Веб-мастерская
Тексты большого объема, расположенные на веб-странице, обычно располагают поисковой системой. Она может содержать поле ввода поискового образа(набора символов, который требуется найти в тексте) и кнопку, щелчок на которой запускает процедуру поиска. в простом варианте эта процедура прокручивает текст в окне так, чтобы найденный поисковый образ видемым и выделенным. Если поиск оказался удачным, то положение текста в окне остается неизменным и может появиться соответствующее сообщение.
Для решения задачи поиска в тексте используется объект TextRange. Это объект браузера IE+4. Он обеспечивает доступ к текстовой информации, находящихся в объектах, которые соответствуют тегам <BODY>, <TEXTAREA>, <BUTTON>, <INPUT TYPE=text>.
Рассмотрим пример поиска текста, находящегося в теле HTML-документа, т.е. в контейнерном теге <BODY>. В этот же контейнер поместим поле ввода поискового образа и кнопку для инициации поиска. Сценарий содержит функцию myfind(), вызываемую при щелчке на кнопке. Функция myfind() с помощью метода createTextRange(), создает текстовую область. Это не копия текста, содержащегося в теле документа, а ссылка на него. Далее, с помощью метода findText() производится поиск в текстовой области строки символов, которую ввел пользователь в поле с именем word. С помощью метода scrollIntoView() содержимое окна прокручивается так, чтобы найденная строка символов оказалась видимой. С помощью метода select() найденная строка в тексте выделяется цветом(подсвечивается).
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Поиск в тексте</title>
</head>
<body>
<input type="text" name="word" value="" size="20" >
<button onClick="myfind()">Поиск</button>
<!--Здесь расположен текст, в котором производится поиск -->
В веб-браузере это будет выглядеть ТАК.
Если поиск требуется произвести в текстовой области, заданной тегом <TEXTAREA ID=mytextarea>, то для создания объекта TextRange() следует пользоваться выражением:
obj=document.mytextarea.createTextRange()
Рассмотренный нами код обеспечивает одноразовый поиск, который останавливается, как только будет найдено первое вхождение поискового образа или достигнут конец текстовой области.
Теперь рассмотрим итераактивный поиск, т.е. поиск всех вхождений поискового образа. Дла этого воспользуемся методом collapse() объекта TextRange. Значением false параметр для этого метода перемещает точку начала поиска в конец найденного фрагмента текста, а последующее применение метода findText() инициирует поиск с этой, а не начальной точки. Поэтому , метод findText() необходимо применять в цикле. Чтобы выделить все найденные фрагменты, достаточно воспользоваться методом execCommand("BackColor", false, цвет). Определение функции для итерактивного поиска текстовой строки, введенной в поле с именем word представлено в этом примере.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Поиск в тексте</title>
</head>
<body>
<input type="text" name="word" value="" size="20" >
<button onClick="myfind()">Поиск</button>
<!--Здесь расположен текст, в котором производится поиск -->
</body>
<script type="text/javascript">
function myfind() {
obj=document.body.createTextRange()
for(i=0;obj.findText(word.value);i++){
obj.select()
obj.execCommand("backcolor", "false", "yellow")
obj.execCommand("Unselect")
/*подготовка к следующему поиску*/
obj.collapse(false)
}
}
</script>
В веб-браузере это будет выглядеть ТАК.
