Функция выделения javascript с jquery не работает

Я пытаюсь создать «простую» функцию выделения с помощью jQuery. По какой-то причине мой HTML дублируется, и я не знаю почему. Все, что я хотел бы сделать, это ввести текст для поиска в строку поиска и выделять текст в тегах по мере ввода.

Есть предположения? Отчаянный...

Вот HTML и JS

function hiLite(searchWords) {
  if (searchWords) {
    var content = $("p").text();
    var regExp = new RegExp(searchWords, "ig");
    var matches = content.match(regExp);
    if (matches) {
      $("p").html(content.replace(regExp, function(match) {
        return "<span class='highlight'>" + match + "</span>";
      }));
    } else {
      $(".highlight").removeClass("highlight");
    }
  } else {
    $(".highlight").removeClass("highlight");
  }
};
$("#searchBar").keyup(function() {
  var userInput = $(this).val().toLowerCase();
  hiLite(userInput);
});

<!doctype html>
<html>

<head>
  <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <link rel = "stylesheet" href = "photo_filter.css" type = "text/css">
</head>

<body>
  <div class = "search">Search:
    <input type = "text" id = "searchBar">
  </div>
  <div id = "results">
    <p>some text is here</p>
    <p>other kinds</p>
    <p>even more</p>
  </div>
</body>

</html>

javascript jquery

12.10.2018 17:07

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

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

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

224

Ответы 2

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

Если у меня есть 3 тега <p>, и я делаю так: $('p').html('I am a p tag!!'); - тогда будет затронут каждый тег <p>.

Точно так же, если я сделаю это: var content = $('p').text(); - Тогда content соответствует этому "some text is hereother kindseven more", который является текстом из тега каждый<p>. Это не хорошо!

Попробуй это:

function hiLite(searchWords) {
    if (searchWords) {
        $('p').each(function(index, single_p) {
            var text = $(single_p).text(); // .text() does not include html, does not include any former <spans>
            $(single_p).html(text); // reset <p> html to be only the text from previous line
            var regExp = new RegExp(searchWords, "ig");

            var new_text = text.replace(regExp, '<span class = "highlight">' + searchWords + '</span>'); // create new text with HTML highlight
            $(single_p).html(new_text); // update DOM with our new HTML
        });
    }
};


$("#searchBar").keyup(function() {
    var userInput = $(this).val().toLowerCase();
    hiLite(userInput);
});

12.10.2018 17:34

Решение 2:

Добавлено условие для выделения текста на основе поискового текста

Код JS:

 function hiLite(searchWords){

        if (searchWords){
        var content = $("p").text();
        var regExp = new RegExp(searchWords, "ig");
        var matches = content.match(regExp);

       if (matches){
                        $('#results p').each(function() {
                        var test = '<span class = "highlight">'+searchWords+'</span>';
                        var text = $(this).text();
                        $(this).html(text.replace(regExp, test)); 
                    });
            }

        } 
    };


$("#searchBar").keyup(function(){
 var userInput = $(this).val().toLowerCase();
 hiLite(userInput); 
});

HTML-код:

<div class = "search">Search:     
<input type = "text" id = "searchBar">    
</div>

<div id = "results">

    <p>some text is here</p>
    <p>other kinds</p>
    <p>even more</p>

</div>

CSS: