Поиск текста, но игнорировать теги

есть поиск, если мы вводим одно слово - хорошо, вводим 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;
            }