搜索字符串并用元素包装整个单词

Question

我想在特定元素中搜索字符串并用span填充整个文本，我还希望它匹配单词的一部分并包装整个单词....

到目前为止我的尝试：

function filterSearchWords(){
    var query = $("#searchquery").val();

    go(query);
    function go(query) {
        $(".search-result:contains(" + query + ")").html(function (_, html) {
            return html.split(query).join("<span class='search-enlight'>" + query + "</span>");
        });

        console.log(query);
    }
}

但是，现在我想要它包装整个单词，就像我说我在字符串上排序：Enlight，它应该包装Enlighten。这可能吗？此外，使它不关心大写，所以它匹配enlight和Enlight

更新：

function filterSearchWords() {
    var query = $("#searchquery").val();

    go(query);
    function go(query) {
        $(".search-result p:contains(" + query + ")").html(function (_, html) {
            return html.replace(query, "<span class='search-enlight'>$&</span>", 'gi');
        });
        $(".search-result h2 a:contains(" + query + ")").html(function (_, html) {
            return html.replace(query, "<span class='search-enlight'>$&</span>", 'gi');
        });
        console.log(query);
    }
}

这仍然不起作用，它不匹配具有大写的单词，并且它不包装整个单词。任何帮助：/