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

Question

Я получил этот код: Ссылка

Я могу выделить символы статического текста с помощью этого js:

$("li:contains('Content1')").each(function(){
    var content = "Content1";
    this.innerHTML = this.innerHTML.replace(content,"<span>"+content+"</span>")
})

Content1 по динамическому значению: $("#main").val()

ВОПРОС : Как выделить слова, найденные с :contains и значением из поля ввода

Answer 1

Это будет немного рискованно, но проверьте это .

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

 $("li").each(function() {
   $(this).attr( 'data-original', $(this).text() );
   $(this).attr( 'data-original-l', $(this).text().toLowerCase() );
 });

Затем нам нужно настроить селектор, чтобы проверить этоатрибут (в противоположность текстовому значению):

 $("li[data-original *= \"" + $("#main").val().toLowerCase() + "\"]")

, который, например, будет искать li [data-original * = "Harry Potter"], то есть "любой LI с атрибутом" data-original "который содержит «Гарри Поттер» ( см. здесь ).

Оттуда нам просто нужно настроить ваше заявление о замене следующим образом:

 $(this).html($(this).data('original').replace(new RegExp(content, "i"), "<span class='highlight'>$&</span>"));

Мы делаемТо же самое, что было у вас изначально, но теперь мы используем значение $ (this) .data ('original') вместо $ (this) .val (). Мы также используем регулярное выражение, чтобы мы могли выполнять замену без учета регистраКроме того, мы заменим на $&, который содержит совпадение из теста RegExp в исходной строке.

Легко, как пирог! Надеюсь, это сработает для вас, и дайте мне знать, если у вас возникнут какие-либо препятствия.