есть поиск, если мы вводим одно слово - хорошо, вводим 2 слова, которые находяться в span или за его пределами тоже работает хорошо, но когда мы вводим словосочитание которое находить в span и за его пределами перестает работать, проблема в том что span class="wrapper" удалять нельзя он должен оставаться всегда. Пример не работает если мы введем also used
html:
<input type="text" id="searchField">
<button id="btn">click</button>
<div>
<p>JavaScript is also<span class="wrapper"> used</span> in environments that are not Web-based, such as PDF documents, site-specific browsers, and desktop widgets. Newer and <span class="wrapper">faster</span> JavaScript virtual machines (VMs) and platforms built upon them have also increased the popularity of JavaScript </p>
</div>
рабочий вариант:
$("#btn").click(function() {
var input = $("#searchField").val();
if (input !== "") {
var search = $("#searchField").val().split(" ");
var pattern = new RegExp(input, 'gi');
$("div").each(function() {
$(this).html($(this).html().replace(pattern, "<span class='text'>" + input + "</span>"));
});
}
});
Второй вариант - идея чтобы искать по одному слову, но почему то не срабатывает
$(function() {
$("#btn").click(function() {
var input = $("#searchField").val();
if (input !== "") {
var search = $("#searchField").val().split(" ");
var pattern = new RegExp(search, 'gi');
search.forEach(function (word) {
console.log(search);
$("div").html($("div").html().replace(pattern, "<span class='text'>" + search + "</span>"));
});
}
});
});
css:
.text {
color: red;
}