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

18

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

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

myJavascript.js:

<code>$(document).ready(function(){

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

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

page.html:

<code><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>
</code>

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

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

Вам нужно подчеркнутьonly слово или весь абзац (p)? mshsayem
идея: получить текст абзаца ($("p:contains('"+searchedText+"')").html()); Теперь используйте регулярное выражение и замените (оберните) эти слова<span style="text-decoration:underline"></span>и установите их как.html() абзаца mshsayem
Если вы хотите подчеркнуть только искомое слово, вам нужно заключить слово в HTML-тег, такой какspan (установите стиль диапазона, чтобы подчеркнуть) и заменить содержимоеp элемент scibuff
Только слово, и я изменил название на то, что я действительно хотел, выделив найденное слово. Radu Gheorghiu
Извините за последующие изменения, я хочу выделить найденное слово. Вот что пытается сделать мой код. Первое, что я попробовал, - это подчеркнуть, потом я передумал и попытался выделить слово, но забыл изменить название. Radu Gheorghiu

Ваш Ответ

6   ответов
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>

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

С помощьюinnerHTML (VanillaJS) или.html (JQuery) это зло !!! Он уничтожает все события внутри элемента и запускает генерацию DOM снова и снова. Посмотрите на мой ответ!
Я пробовал ваш код, но Firebug выдает ошибку: в строке 6, столбце 66, но там ничего нет. Я вижу, что должен быть другой параметр вeach() функции, но я не могу понять, что это такое. Radu Gheorghiu
есть дополнительный) послеelement удалить один из них, т.е.function( i, element ){ но, честно говоря, вы должны сделать эту небольшую отладку самостоятельно - я обновил код выше
do $(element).text() вместо этого - это основы
О, Боже .. ты так прав, я полностью ... Спасибо. Radu Gheorghiu
3

$(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;    
}

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

это возможно; просто получитьspan элемент и вызов.scrollIntoView()
Спасибо, но если я ищу заглавные буквы и нахожу те же буквы, что и строчные, то он преобразует строчные в прописные. Radu Gheorghiu
Я исправил это ...
@mshsayemAwesome code, Спасибо. Можно ли переместить документ туда, где присутствует слово в Jquery? Потому что у меня большая веб-страница, и мне нужно переместить указатель туда, где присутствует фактическое слово, например, функция Google Chrome (Ctrl + F5).
С помощьюinnerHTML (VanillaJS) или.html (JQuery) это зло !!! Он уничтожает все события внутри элемента и запускает генерацию DOM снова и снова. Посмотрите на мой ответ!
-1

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

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

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

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

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

Похожие вопросы