18

Вопрос по highlight, search, html, css, jquery – JQuery поиск в статической HTML-странице с подсветкой найденного слова

Я пытался сделать простой поиск внутри статической HTML-страницы, используя JQuery. Я должен отметить, что я впервые работаю с JQuery.

Я пытаюсь изменить фон найденного слова на странице, и это то, что я пробовал до сих пор:

myJavascript.js:

$(document).ready(function(){

     $('#searchfor').keyup(function(){
         page = $('#all_text').text();
         searchedText = $('#searchfor').val();
         $("p:contains('"+searchedText+"')").css("color", "white");
    });
});

Вот также и HTML-код:

page.html:

<html>
<head>
    <title>Test page</title>
</head>
<body bgcolor="#55c066">
<input type="text" id="searchfor"></input>
    <p id="all_text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euism modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
    <font color="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tinci futurum.</font>
    </p>
</body>
    <script src="jquery-1.7.2.min.js"></script>
    <script src="myJavascript.js"></script>
</html>

После просмотра страницы с помощью Firebug я вижу, что переменные в JQuery получают значение из поля ввода, но, думаю, я испортил подсвечивающую часть.

Заранее спасибо за помощь!

  • Хорошо, я понимаю вашу идею. Я попытаюсь сделать что-то подобное, я просто надеюсь, что я не испортил код.

    от Radu Gheorghiu
  • Я согласен с тем, что вы сказали, но так как этот вопрос восходит к waay waay 2012, когда было доступно не так много библиотек JS, это был единственный способ, которым я мог добиться цели. Итак, двигаясь вперед, вы обязательно должны искать существующие плагины. В противном случае, начните делать свой собственный и делитесь им!

    от Radu Gheorghiu
  • Это на самом деле довольно круто, проблема в том, если вы ищете страницу с каким-либо стилем вообще, она разрывает всю страницу, удаляя все теги p, span, links, ect ...

    от
  • Работает, но только на одно слово ..

    от Radu Gheorghiu
  • С помощьюinnerHTML (VanillaJS) или.html (JQuery) это зло !!! Он уничтожает все события внутри элемента и запускает генерацию DOM снова и снова. Посмотрите на мой ответ!

    от
  • Я пробовал ваш код, но Firebug выдает ошибку: в строке 6, столбце 66, но там ничего нет. Я вижу, что должен быть другой параметр вeach() функции, но я не могу понять, что это такое.

    от Radu Gheorghiu
  • есть дополнительный) послеelement удалить один из них, т.е.function( i, element ){ но, честно говоря, вы должны сделать эту небольшую отладку самостоятельно - я обновил код выше

    от
  • О, Боже .. ты так прав, я полностью ... Спасибо.

    от Radu Gheorghiu
  • do $(element).text() вместо этого - это основы

    от
  • С помощьюinnerHTML (VanillaJS) или.html (JQuery) это зло !!! Он уничтожает все события внутри элемента и запускает генерацию DOM снова и снова. Посмотрите на мой ответ!

    от
  • Спасибо, но если я ищу заглавные буквы и нахожу те же буквы, что и строчные, то он преобразует строчные в прописные.

    от Radu Gheorghiu
  • @mshsayemAwesome code, Спасибо. Можно ли переместить документ туда, где присутствует слово в Jquery? Потому что у меня большая веб-страница, и мне нужно переместить указатель туда, где присутствует фактическое слово, например, функция Google Chrome (Ctrl + F5).

    от
  • Я исправил это ...

    от
  • это возможно; просто получитьspan элемент и вызов.scrollIntoView()

    от
  • Вам нужно подчеркнутьonly слово или весь абзац (p)?

    от mshsayem
  • Только слово, и я изменил название на то, что я действительно хотел, выделив найденное слово.

    от Radu Gheorghiu
  • Извините за последующие изменения, я хочу выделить найденное слово. Вот что пытается сделать мой код. Первое, что я попробовал, - это подчеркнуть, потом я передумал и попытался выделить слово, но забыл изменить название.

    от Radu Gheorghiu
  • Если вы хотите подчеркнуть только искомое слово, вам нужно заключить слово в HTML-тег, такой какspan (установите стиль диапазона, чтобы подчеркнуть) и заменить содержимоеp элемент

    от scibuff
  • идея: получить текст абзаца ($("p:contains('"+searchedText+"')").html()); Теперь используйте регулярное выражение и замените (оберните) эти слова<span style="text-decoration:underline"></span>и установите их как.html() абзаца

    от mshsayem
6 ответов
  • 3

    on("input

    $(function() {
      $("input")..highlight", function() {
        // Determine specified search term
        var searchTerm = $(this).val();
        // Highlight search term inside a specific context
        $("#context").unmark().mark(searchTerm);
      }).trigger("input.highlight").focus();
    });
    mark {
      background: orange;
      color: black;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/mark.js/7.0.0/jquery.mark.min.js"></script>
    <input type="text" value="test">
    <div id="context">
      Lorem ipsum dolor test sit amet
    </div>

  • 9

    Вот мой:

    http://jsfiddle.net/x8rpY/1/

    JS:

    $('#searchfor').keyup(function(){
             var page = $('#all_text');
             var pageText = page.text().replace("<span>","").replace("</span>");
             var searchedText = $('#searchfor').val();
             var theRegEx = new RegExp("("+searchedText+")", "igm");    
             var newHtml = pageText.replace(theRegEx ,"<span>$1</span>");
             page.html(newHtml);
        });
    

    CSS:

    #all_text span
    {
        text-decoration:underline;
        background-color:yellow;    
    }
    

    Работает и для повторного поиска.

  • -1

    Вот еще один пример, который я быстро взломал:

    http://jsfiddle.net/VCJUX/

  • 11

    Сделать что-то подобное

     $("p:contains('"+searchedText+"')").each( function( i, element ) {
          var content = $(element).text();
          content = content.replace( searchedText, '<span class="search-found">' + searchedText + '</span>' );
          element.html( content );
     });
    
     .search-found {
         text-decoration: underline;
     }
    

    постскриптум это будет работать, только если каждый из «элементов» имеет только текстовый контент, иначе он удалит дочерние узлы

    РЕДАКТИРОВАТЬ: удалены лишние ")" вeach Перезвоните

  • 21

    Причина

    Why using a selfmade highlighting function is a bad idea

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

    You would need to remove text nodes with HTML elements to highlight your matches without destroying DOM events and triggering DOM regeneration over and over again (which would be the case with e.g. innerHTML) If you want to remove highlighted elements you would have to remove HTML elements with their content and also have to combine the splitted text-nodes for further searches. This is necessary because every highlighter plugin searches inside text nodes for matches and if your keywords will be splitted into several text nodes they will not being found. You would also need to build tests to make sure your plugin works in situations which you have not thought about. And I'm talking about cross-browser tests!

    Звучит сложно? Если вам нужны такие функции, как игнорирование некоторых элементов при выделении, отображение диакритических знаков, отображение синонимов, поиск внутри фреймов, поиск по отдельным словам и т. Д., Это становится все более и более сложным.

    Use an existing plugin

    При использовании существующего, хорошо реализованного плагина вам не нужно беспокоиться о вышеперечисленных вещах. Статья10 плагинов для подсветки текста jQuery на Sitepoint сравнивает популярные плагины подсветки. Это включает плагины ответов на этот вопрос.

    Have a look at mark.js

    mark.js такой плагин, который написан на чистом JavaScript, но также доступен как плагин jQuery. Он был разработан, чтобы предложить больше возможностей, чем другие плагины, с возможностью:

    search for keywords separately instead of the complete term map diacritics (For example if "justo" should also match "justò") ignore matches inside custom elements use custom highlighting element use custom highlighting class map custom synonyms search also inside iframes receive not found terms

    DEMO

    В качестве альтернативы вы можете увидетьэта скрипка.

    Usage example:

    // Highlight "keyword" in the specified context
    $(".context").mark("keyword");
    
    // Highlight the custom regular expression in the specified context
    $(".context").markRegExp(/Lorem/gmi);
    

    Это бесплатный и разработанный с открытым исходным кодом на GitHub (ссылка на проект).

    Example of mark.js keyword highlighting with your code

    $(function() {
      $("input").on("input.highlight", function() {
        // Determine specified search term
        var searchTerm = $(this).val();
        // Highlight search term inside a specific context
        $("#context").unmark().mark(searchTerm);
      }).trigger("input.highlight").focus();
    });
    mark {
      background: orange;
      color: black;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/mark.js/7.0.0/jquery.mark.min.js"></script>
    <input type="text" value="test">
    <div id="context">
      Lorem ipsum dolor test sit amet
    </div>

  • -1

    (во-первых

    вы хотите использовать Background-Color, а не Color, для фона)

    Я бы создал класс css для обычного и отдельный (наследуемый) класс css для выделенного текста, а затем использовал JQuery для изменения класса css, когда вы найдете то, что ищете.

    Просто мои первые мысли, хотя, не уверен, есть ли лучший способ сделать это.

    РЕДАКТИРОВАТЬ: если вы хотите изменить только определенное слово, вам нужно изменить innerHTML, чтобы поместить его в отдельный тег в этой точке.