ресурс для начинающих веб-разработчиков
комплексные веб-услуги по созданию сайтов

Справочный материал по основным языкам программирования и верстки сайтов.

Готовая методика создания простых и сложных динамичных сайтов, с использованием PHP и MySQL.

Использование веб-редактора Adobe Dreamweaver в разработке сайтов.

Использование графических редакторов Adobe Flash, Adobe Photoshop, Adobe Fireworks в подготовке веб-графики.

Разработка веб-сайтов под "ключ".

Разработка отдельных фрагментов сайтов, консультации по вопросам верстки веб-страниц и веб-программирования.

Поиск в тексте

Поиск в тексте

Тексты большого объема, расположенные на веб-странице, обычно располагают поисковой системой. Она может содержать поле ввода поискового образа(набора символов, который требуется найти в тексте) и кнопку, щелчок на которой запускает процедуру поиска. в простом варианте эта процедура прокручивает текст в окне так, чтобы найденный поисковый образ видемым и выделенным. Если поиск оказался удачным, то положение текста в окне остается неизменным и может появиться соответствующее сообщение.

Для решения задачи поиска в тексте используется объект TextRange. Это объект браузера IE+4. Он обеспечивает доступ к текстовой информации, находящихся в объектах, которые соответствуют тегам <BODY>, <TEXTAREA>, <BUTTON>, <INPUT TYPE=text>.

Рассмотрим пример поиска текста, находящегося в теле HTML-документа, т.е. в контейнерном теге <BODY>. В этот же контейнер поместим поле ввода поискового образа и кнопку для инициации поиска. Сценарий содержит функцию myfind(), вызываемую при щелчке на кнопке. Функция myfind() с помощью метода createTextRange(), создает текстовую область. Это не копия текста, содержащегося в теле документа, а ссылка на него. Далее, с помощью метода findText() производится поиск в текстовой области строки символов, которую ввел пользователь в поле с именем word. С помощью метода scrollIntoView() содержимое окна прокручивается так, чтобы найденная строка символов оказалась видимой. С помощью метода select() найденная строка в тексте выделяется цветом(подсвечивается).

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Поиск в тексте</title>
</head>

<body>
<input type="text" name="word" value="" size="20" >
<button onClick="myfind()">Поиск</button>

<!--Здесь расположен текст, в котором производится поиск -->

<p>>>> ВОПРОСЫ <<<<br>
>Вопросы от общего незнания<br>
1.1. Что такое HTML?<br>
1.2. Где взять документацию по HTML?<br>
1.3. Какие редакторы HTML бывают?<br>
1.4. А какой редактор лучше?<br>
1.5. Что такое валидатор?<br>
>1.6. Что такое XML и XHTML?<br>
>1.7. Что такое WML?<br>
1.8. Что такое CSS?<br>
1.9. Что такое CGI?<br>
1.10. Что такое SSI?<br>
>1.11. Что такое ASP?<br>
>1.12. Что такое PHP?<br>
>1.13. Что такое Flash?<br>
1.14. Что такое VRML?<br>
1.15. Какие книги по HTML посоветуете?<br>
>1.16 Что такое по-настоящему крутая HTML-страничка?<br>
1.17. А как сделать, чтобы посетители моей странички не могли ни код<br>
подсмотреть, ни картинки скопировать?<br>
1.18. Люди, протестируйте мою страничку на правильность!<br>
1.19. Какие браузеры стоят для тестирования страниц у честного человека?<br>
>1.20 Каким уродам нужно что-то еще, кроме замечательного Микрософт<br>
>Эксплорера? Да все ваши убогие браузеры не поддерживают даже ActiveX<br>
>компонент!<br>
>1.21 Как мне протестировать страничку, если я собираюсь размещать ее на<br>
>сервере, прописываю в href и img src пути от корня сервера, использую<br>
>CGI, SSI и т.п., и вообще, чтобы все было "как у взрослых"?<br>
>1.22. Как сделать, чтобы по ссылке исполняемый файл не скачивался на диск,<br>
>а сразу запускался на компьютере пользователя?<br>
>Вопросы от незнания HTML<br>
все эти ответы можно узнать, прочитав стандарты HTML<br>
2.1. Чтобы при нажатии на ссылку появлялся бланк отправления сообщения по<br>
e-mail?<br>
2.2. Чтобы при нажатии на ссылку она открывалась в другом окне или кадре?<br>
2.3. Чтобы при нажатии на ссылку менялось содержимое двух кадров?<br>
2.4. Чтобы нельзя было изменять размер кадра?<br>
2.5. Чтобы не было видно границ кадров?<br>
>2.6.Чтобы изменить размер, оформление и расположение полосы<br>
>прокрутки (скроллбара) или вообще убрать ее?<br>
2.7. Чтобы после открытия моей странички через промежуток времени загружалась<br>
другая страничка, или грузился не index.html, а main.html?<br>
>2.8. Чтобы страничка не кэшировалась у клиента?<br>
>2.9. Чтобы выровнять табличку по центру документа?<br>
>И почему в NN и Opera не работает <table align="center">?<br>
2.10. Чтобы разместить текст, картинку или табличку в центре экрана?<br>
2.11. Чтобы междy каpтинками не было пpомежyтков?<br>
>2.12. Чтобы убрать промежутки между ячейками в таблице, которая<br>
>получилась в результате разрезки целой картинки на куски?<br>
2.13. Чтобы форматировать текст по ширине ?<br>
>2.14. Как встроить свои шрифты в страничку?<br>
2.15. Чтобы убрать синюю рамку вокруг картинки-ссылки?<br>
>2.16. Чтобы убрать или задать отступы содержимого странички от краев<br>
>окна браузера?<br>
2.17. Чтобы при смене страниц сам URL не изменялся?<br>
2.18. Чтобы при нажатии на определенную область картинки происходил переход на<br>
один адрес, а при нажатии в другой области - на другой?<br>
2.19. Обязательно ли использовать кавычки в значениях атpибyтов?<br>
2.20. Как вставлять комментарии в HTML?<br>
2.21. Говорят, для поисковиков надо прописать ключевые слова. Что это?<br>
2.22. В чем отличия <b> и <strong>, <i> и <em> ?<br>
2.23. Как сделать таблицу с большим количеством произвольно объединенных по<br>
вертикали и горизонтали ячеек?<br>
>2.24. Как сделать буквицу в начале абзаца без применения картинок?<br>
>2.25. Как окружить табличку рамкой нужного цвета?<br>
>2.26. Как "разлиновать" табличку тонкими линиями нужного цвета?<br>
2.27. Я, к сожалению, употребил тег, который поддерживается только в браузере<br>
NNN. Что же увидят пользователи других браузеров?<br>
>Вопросы от незнания CSS<br>
все эти ответы можно узнать, прочитав стандарты CSS<br>
3.1. Чтобы был абзацный отступ?<br>
3.2. Как подавить подчеркивание ссылок в некоторых местах?<br>
3.3. Как сделать неподчеркнутые ссылки везде?<br>
>3.4. Чтобы при наведении мышки на текст с ссылкой<br>
>он поменял цвет или стал подчеркнутым?<br>
>3.5. Чтобы фоновая картинка не размножалась по горизонтали<br>
>(по вертикали) при увеличении разрешения экрана?<br>
>3.6. Чтобы задать фоновую картинку для ячейки таблицы?<br>
</p>
<script type="text/javascript">
function myfind() {
if(!word.value) return
obj=document.body.createTextRange()
obj.findText(word.value)
obj.scrollIntoView()
obj.select()
}
</script>
</body>
</html>

В окне веб-браузера это будет выглядеть ТАК.

Если поиск требуется произвести в текстовой области, заданной тегом TEXTAREA ID=mytextarea, то для создания объекта TextRange() следует пользоваться выражением:

obj=document.mytextarea.createTextRange()

Рассмотренный нами код обеспечивает одноразовый поиск, который останавливается, как только будет найдено первое вхождение поискового образа или достигнут конец текстовой области.

Теперь рассмотрим итераактивный поиск, т.е. поиск всех вхождений поискового образа. Дла этого воспользуемся методом collapse() объекта TextRange. Значением false параметр для этого метода перемещает точку начала поиска в конец найденного фрагмента текста, а последующее применение метода findText() инициирует поиск с этой, а не начальной точки. Поэтому , метод findText() необходимо применять в цикле. Чтобы выделить все найденные фрагменты, достаточно воспользоваться методом execCommand("BackColor", false, цвет). Определение функции для итерактивного поиска текстовой строки, введенной в поле с именем word представлено в этом примере.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Поиск в тексте</title>
</head>

<body>
<input type="text" name="word" value="" size="20" >
<button onClick="myfind()">Поиск</button>

<!--Здесь расположен текст, в котором производится поиск -->

<p>>>> ВОПРОСЫ <<<<br>
>Вопросы от общего незнания<br>
1.1. Что такое HTML?<br>
1.2. Где взять документацию по HTML?<br>
1.3. Какие редакторы HTML бывают?<br>
1.4. А какой редактор лучше?<br>
1.5. Что такое валидатор?<br>
>1.6. Что такое XML и XHTML?<br>
>1.7. Что такое WML?<br>
1.8. Что такое CSS?<br>
1.9. Что такое CGI?<br>
1.10. Что такое SSI?<br>
>1.11. Что такое ASP?<br>
>1.12. Что такое PHP?<br>
>1.13. Что такое Flash?<br>
1.14. Что такое VRML?<br>
1.15. Какие книги по HTML посоветуете?<br>
>1.16 Что такое по-настоящему крутая HTML-страничка?<br>
1.17. А как сделать, чтобы посетители моей странички не могли ни код<br>
подсмотреть, ни картинки скопировать?<br>
1.18. Люди, протестируйте мою страничку на правильность!<br>
1.19. Какие браузеры стоят для тестирования страниц у честного человека?<br>
>1.20 Каким уродам нужно что-то еще, кроме замечательного Микрософт<br>
>Эксплорера? Да все ваши убогие браузеры не поддерживают даже ActiveX<br>
>компонент!<br>
>1.21 Как мне протестировать страничку, если я собираюсь размещать ее на<br>
>сервере, прописываю в href и img src пути от корня сервера, использую<br>
>CGI, SSI и т.п., и вообще, чтобы все было "как у взрослых"?<br>
>1.22. Как сделать, чтобы по ссылке исполняемый файл не скачивался на диск,<br>
>а сразу запускался на компьютере пользователя?<br>
>Вопросы от незнания HTML<br>
все эти ответы можно узнать, прочитав стандарты HTML<br>
2.1. Чтобы при нажатии на ссылку появлялся бланк отправления сообщения по<br>
e-mail?<br>
2.2. Чтобы при нажатии на ссылку она открывалась в другом окне или кадре?<br>
2.3. Чтобы при нажатии на ссылку менялось содержимое двух кадров?<br>
2.4. Чтобы нельзя было изменять размер кадра?<br>
2.5. Чтобы не было видно границ кадров?<br>
>2.6.Чтобы изменить размер, оформление и расположение полосы<br>
>прокрутки (скроллбара) или вообще убрать ее?<br>
2.7. Чтобы после открытия моей странички через промежуток времени загружалась<br>
другая страничка, или грузился не index.html, а main.html?<br>
>2.8. Чтобы страничка не кэшировалась у клиента?<br>
>2.9. Чтобы выровнять табличку по центру документа?<br>
>И почему в NN и Opera не работает <table align="center">?<br>
2.10. Чтобы разместить текст, картинку или табличку в центре экрана?<br>
2.11. Чтобы междy каpтинками не было пpомежyтков?<br>
>2.12. Чтобы убрать промежутки между ячейками в таблице, которая<br>
>получилась в результате разрезки целой картинки на куски?<br>
2.13. Чтобы форматировать текст по ширине ?<br>
>2.14. Как встроить свои шрифты в страничку?<br>
2.15. Чтобы убрать синюю рамку вокруг картинки-ссылки?<br>
>2.16. Чтобы убрать или задать отступы содержимого странички от краев<br>
>окна браузера?<br>
2.17. Чтобы при смене страниц сам URL не изменялся?<br>
2.18. Чтобы при нажатии на определенную область картинки происходил переход на<br>
один адрес, а при нажатии в другой области - на другой?<br>
2.19. Обязательно ли использовать кавычки в значениях атpибyтов?<br>
2.20. Как вставлять комментарии в HTML?<br>
2.21. Говорят, для поисковиков надо прописать ключевые слова. Что это?<br>
2.22. В чем отличия <b> и <strong>, <i> и <em> ?<br>
2.23. Как сделать таблицу с большим количеством произвольно объединенных по<br>
вертикали и горизонтали ячеек?<br>
</p>
</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>
</body>
</html>

В окне веб-браузера это будет выглядеть ТАК.