VPF::Поиск фрагмента текста и его выделение

Roxanne

Дата 12.9.2009, 10:29 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 18
Регистрация: 5.2.2009

Репутация: нет
Всего: нет

Здравствуйте! Подскажите, пожалуйста, пример скрипта, который осуществляет поиск определенного фрагмента текста по странице и выделяет его, перекрашивая в другой цвет, к примеру. Спасибо!

Amphiluke

Дата 12.9.2009, 15:24 (ссылка)

(нет голосов)

Загрузка ...

☽

Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 39
Всего: 112

Большая проблема заключается в том, что IE работает с фрагментами текста совсем по-другому, нежели браузеры, «скурпулезно» следующие стандартам. Вот вам пример:

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
   <meta http-equiv="content-type" content="text/html;charset=utf-8" />
   <title>Template</title>
   
   <style type="text/css">
      .foundTxt {
         background: #316AC5;
         color: #FFFFFF;
      }
   </style>
   
   <script type="text/javascript">
      function findTxt(txtToSearch) {
         var _par = document.getElementById("paragraph").firstChild;
         var parRange = null;
         if (document.createRange) {
            parRange = document.createRange();
            parRange.selectNodeContents(_par.parentNode);
            var startPos = parRange.toString().indexOf(txtToSearch);
            if (startPos == -1) return false;
            parRange.setStart(_par, startPos);
            parRange.setEnd(_par, startPos + txtToSearch.length);
            var txtFound = document.createElement("span");
            txtFound.className = "foundTxt";
            parRange.surroundContents(txtFound);
         } else {
            parRange = document.body.createTextRange();
            if (parRange.findText(txtToSearch)) parRange.select();
            parRange.pasteHTML("<span class=\"foundTxt\">" + txtToSearch + "</span>");
         }
         return false;
      }
   </script>
   
</head>

<body>
   <form action="#" onsubmit="return findTxt(this.txt.value);">
      <span>Type a text to search</span><br />
      <input type="text" name="txt" id="txt" /><input type="submit" value="search" />
   </form>
   
   <p id="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin accumsan adipiscing magna. Sed et nulla. Curabitur massa diam, fermentum eget, vehicula sagittis, volutpat sed, lectus. Cras elementum convallis metus. Morbi pulvinar. Integer nibh erat, fermentum vel, rhoncus quis, consectetur vel, dolor. Nulla hendrerit odio id arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec libero nulla, luctus eu, ornare quis, dignissim in, ipsum. Donec tincidunt faucibus diam. Donec accumsan pulvinar lacus. Cras blandit urna. Sed quis tortor. Donec elit erat, luctus nec, vulputate eu, pretium ac, leo. Aliquam egestas dignissim ipsum. Mauris sed orci quis mauris tincidunt tempus. Suspendisse dictum mattis elit.</p>
</body>

</html>

... и направление дальнейшего поиска:
http://msdn.microsoft.com/en-us/library/ms535872(VS.85).aspx
https://developer.mozilla.org/en/DOM/range

Roxanne

Дата 12.9.2009, 16:05 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 18
Регистрация: 5.2.2009

Репутация: нет
Всего: нет

Amphiluke, большое спасибо за пример и ссылки! smile

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: для новичков \| Следующая тема »