Как выделить все текстовые вхождения на HTML-странице с помощью JavaScript?

Ответ 1

Замена содержимого с помощью <span> также является опцией. Есть еще один вариант, который вы можете попробовать, который является JQuery-плагинами. Здесь является одним из них.

Вы можете использовать его так:

$('body').text().highlight('my text to highlight');

Ответ 2

Я изо всех сил пытался найти надежный текстовый маркер, который дублирует функции браузера ctrl + f в течение нескольких месяцев. Я использовал множество плагинов jQuery. Некоторые из них лучше других, но ни один из них не способен охватывать HTML. Скажем, вы хотите найти текст, который включает ссылку - браузер может это сделать, но никакие плагины jQuery, которые я нашел, могут.

Оказывается, голый голый javascript имеет ответ. Просто window.find().

find(string, matchcase, searchBackward)

string: текстовая строка для поиска.

matchcase: логическое значение. Если true, задается поиск с учетом регистра. Если вы укажете этот параметр, вы также должны поставить назад.

searchBackward: Boolean. Если true, задается обратный поиск. Если вы укажете этот параметр, вы также должны указать чувствительность к регистру.

Он выделяет html загруженные строки и совместим с каждым браузером, о котором вы заботитесь. Узнайте больше об этом на http://www.w3resource.com/javascript/client-object-property-method/window-find.php

К сожалению, вы не можете ничего с этим поделать. Я не могу обернуть его в стиле тегов span, получить позицию, прокрутить к ней или изменить цвет подсветки. Я все еще ищу идеальную функцию JS ctrl + f.

Ответ 3

Если вы пытаетесь выделить условия поиска из google, вы можете использовать этот плагин jquery, доступный по адресу https://github.com/hail2u/jquery.highlight-search-terms

Если вам нужна функциональность, например, хром. вы можете использовать этот код.

$(document).ready(function(){
  var search = ['p', 'div', 'span'];

  $("#highlighter").bind('keyup', function(e){
    var pattern = $(this).val();

    $.each(search, function(i){
        var str = search[i];        
        var orgText = $(str).text();

        orgText = orgText.replace(pattern, function($1){
          return "<span style='background-color: red;'>" + $1 + "</span>"
        });

        $(str).html(orgText);
    });    
  });
});

Ответ 4

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

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

Ответ 5

Window.find() должен выполнить задание.

Хотя он еще не стандартизирован, почти все основные браузеры с более новой версией поддерживают его, такие как Google Chrome, Firefox, IE, Safari, Opera и браузеры на планшетах и ​​телефонах iPhone/Android/Amazon Fire и т.д.

Ниже приведен пример реализации:

/*
 * Search for text in the window ignoring tags
 * 
 * Parameters:
 *     text: a string to search for
 *     backgroundColor: 
 *         "yellow" for example, when you would like to highlight the words
 *         "transparent", when you would like to clear the highlights
 * */
function doSearch(text, backgroundColor) {
    if (window.find && window.getSelection) {
        document.designMode = "on";
        var sel = window.getSelection();
        sel.collapse(document.body, 0);

        while (window.find(text)) {
            document.execCommand("HiliteColor", false, backgroundColor);
            sel.collapseToEnd();
        }
        document.designMode = "off";
    }
}

Код из программы Tim Down 'с использованием Window.find()

Перед поиском текст HTML выглядит так:

<p>Here is some searchable text with some lápices in it, and some
    <b>for<i>mat</i>t</b>ing bits, and a URL
    <a href="#" onclick="location.href='https://www.google.com'; return false;">Google Search Engine</a> as a link.
</p>

После поиска текста, например, some lápices in it, and some formatting bits, and a URL Google, текст HTML изменится на:

<p>Here is some searchable text with <span style="background-color: yellow;">some lápices in it, and some
    <b>for<i>mat</i>t</b>ing bits, and a URL
    </span><a href="#" onclick="location.href='https://www.google.com'; return false;"><span style="background-color: yellow;">Google </span>Search Engine</a> as a link.
</p>

Смотрите код jsfiddle.