поиск текста, подсветка и переход к первому найденному

rdfhnbhf · July 5, 2012

Новичок. Ищу скрипты приспосабливаю под свои нужды. Помогите с простой задачей в оформлении html одной вебстранички и адаптировании скрипта, использующего jquery. Не пугайтесь что написал текста много, задача для профи - простая, для меня огромная помощь. Спасибо!

Задача: создать мгновенный поиск и подсветку найденного для больших веб-страниц, расположенных на локальном компьютере, замена CTRL+F:

1. Скрипты только JavaScript, текст скриптов вынести в отдельный файл js, работать скрипты должны в любом браузере (желательно включая браузеры на/для Android)

2. Страница должна иметь 2 блока: блок один, узкий с 2мя контролами (см. ниже), висящий все время вверху в топ страницы, поверх, не изменяющий позиции при скроллинге, блок два - с основным текстом страницы, где будет производится поиск

3. Дано: Основной текст страницы сверстан одинаковыми divами <div class="search_item">текст</div>

4. Блок 1 содержит 2 контрола: текстовое поле #q и checkbox #q1, используемый для переключения режимов поиска True = режим 1, False = режим 2

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

6. Режим 1 - если текст найден - перейти (scroll страницы) к первому вхождению, если текст не найден/ничего не введено - перейти (скролл) в начало страницы

7. Режим 2 - если текст найден в элементе search_item - показать этот div-элемент, не найден - скрыть этот div-элемент, если ничего не введено - показать всю страницу

8. Скрипт(ы) мгновенного поиска запускаются вводом символов в текстовом поле 1 (н-р отслеживаем нажатия, keyup), а также снятием|установкой checkbox 1, т.е. последнее также должно подсвечивать/переходить/скрывать-показывать текущий текст в текстовое поле #q

Все запчасти для будущей веб-страницы нашел в инете, помогите это подчистить, собрать в кучу


<html>
  <head>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="search_and_highlight.js" type="text/javascript"></script>
<script type="text/javascript">$().ready(function(){$('#q').focus()})</script>
<style type="text/css">
.highlight {background-color:yellow;}
</style>
  </head>
  <body>
<div id="top">
        <form action="javascript:void(0);">
          <h3> <input id="q" name="q" autocomplete="off" type="text"> </h3>
<input name="q1" type="checkbox" />
        </form><p>
</div>
<div class="search_item">текст</div>
<div class="search_item">текст</div>
<div class="search_item">текст</div>
<div class="search_item">текст</div>
</body>
</html>

Собственно скрипт

//эта часть работает как надо, находится в search_and_highlight.js
$().ready(function(){
  $('#q').keyup(function(){
    $('.search_item').each(function(){
      var re = new RegExp($('#q').val(), 'i')
      if($(this).text().match(re)){
        $(this).show();
      }else{
        $(this).hide();
      };
    });
  });
});

//эта тоже работает, только надо корректно вынести из вебстраницы в search_and_highlight.js чтобы это тоже срабатывало на события keyup-keyup change в #q
<script type="text/javascript">
$(function() {
$('#q').bind('keyup change', function(ev) {
var searchTerm = $(this).val();
$('body').removeHighlight();
if ( searchTerm ) {
$('body').highlight( searchTerm );
        }
    });
});
</script>

//эта почему то не работает в браузерах на android
function scrollToFirstFoundTerm()
{
 var firstFoundTerm = $('.highlight:first');
    if (firstFoundTerm.length > 0)
         $('html').scrollTop(firstFoundTerm.offset().top);
}

//ниже - части скрипта по подсветке текста, найдено в инете работает как надо
jQuery.fn.highlight = function(pat) {
 function innerHighlight(node, pat) {
  var skip = 0;
  if (node.nodeType == 3) {
   var pos = node.data.toUpperCase().indexOf(pat);
   if (pos >= 0) {
    var spannode = document.createElement('span');
    spannode.className = 'highlight';
    var middlebit = node.splitText(pos);
    var endbit = middlebit.splitText(pat.length);
    var middleclone = middlebit.cloneNode(true);
    spannode.appendChild(middleclone);
    middlebit.parentNode.replaceChild(spannode, middlebit);
    skip = 1;
   }
  }
  else if (node.nodeType == 1 && node.childNodes && !/(script|style)/i.test(node.tagName)) {
   for (var i = 0; i < node.childNodes.length; ++i) {
    i += innerHighlight(node.childNodes[i], pat);
   }
  }
  return skip;
 }
 return this.each(function() {
  innerHighlight(this, pat.toUpperCase());
 });
};

jQuery.fn.removeHighlight = function() {
 function newNormalize(node) {
    for (var i = 0, children = node.childNodes, nodeCount = children.length; i < nodeCount; i++) {
        var child = children[i];
        if (child.nodeType == 1) {
            newNormalize(child);
            continue;
        }
        if (child.nodeType != 3) { continue; }
        var next = child.nextSibling;
        if (next == null || next.nodeType != 3) { continue; }
        var combined_text = child.nodeValue + next.nodeValue;
        new_node = node.ownerDocument.createTextNode(combined_text);
        node.insertBefore(new_node, child);
        node.removeChild(child);
        node.removeChild(next);
        i--;
        nodeCount--;
    }
 }

 return this.find("span.highlight").each(function() {
    var thisParent = this.parentNode;
    thisParent.replaceChild(this.firstChild, this);
    newNormalize(thisParent);
 }).end();
};

Edited July 5, 2012 by alexriz
Код в тег CODE

Sign In

поиск текста, подсветка и переход к первому найденному

Question

rdfhnbhf

Link to comment

Share on other sites

0 answers to this question

Recommended Posts

Join the conversation

Обсуждения

Forums

Important Information