如何突出显示匹配的搜索文本？

Question

我有这个搜索列表的JavaScript搜索功能。我希望匹配的文字是粗体。我已经看过这段代码，但由于我是JavaScript的新手，我不知道如何将它实现到我现有的函数中。

var highlightHTMLStart = '<span class="highlight">';
    var highlightHTMLEnd = '</span>';
    elementHtml = elementHtml.replace(text, highlightHTMLStart + text + highlightHTMLEnd);

我的JS功能：

function search() {
    var input, filter, ul, li, a, i;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    ul = document.getElementById("myUL");
    li = ul.getElementsByTagName("li");
    for (i = 0; i < li.length; i++) {
        if (li[i].innerHTML.toUpperCase().indexOf(filter) > -1) {
            li[i].style.display = "";

        } else {
            li[i].style.display = "none";
        }
    }
}

我的HTML

<div id="SearchInput" class="container">

    <input class="w3-input w3-padding" type = "text" id = "myInput" onkeyup = "search()" onblur = "abortSearch()">

            <ul style="max-height: 350px; overflow: hidden;" class="w3-ul w3-margin-top" id="myUL">
                <?php include 'search_list.php'; ?>
            </ul>
      </div>