JS實現查詢關鍵詞高亮效果

在頁面上查詢關鍵，使其高亮顯示，實現代碼如下：

CSS樣式：

 <style type="text/css">
        .highlight        {
            background-color: yellow;
        }
 </style>

javascript:

function highlight() {
            clearSelection(); //先清空一下上次高亮顯示的內容；
            var searchText = $.trim($('#txtKeyWord').val()); //獲取你輸入的關鍵字；
            if (searchText.length > 0) {
                var regExp = new RegExp(searchText, 'g'); //創建正則表達式，g表示全局的，如果不用g，則查找到第一個就不會繼續向下查找了；

                $('#dialogue .dhc').each(function ()//遍歷要查詢的區域；
                {
                    var html = $(this).html();
                    var newHtml = html.replace(regExp, "<span class='highlight'>" + searchText + '</span>'); //將找到的關鍵字替換，加上highlight屬性；

                    $(this).html(newHtml); //更新文章；
                });
            }
            //prekeyword = searchText;
        }
        function clearSelection() {
            $('#dialogue .dhc').each(function ()//遍歷
            {
                $(this).find('.highlight').each(function ()//找到所有highlight屬性的元素；
                {
                    var thishtml = $(this).html();
                    $(this)[0].outerHTML = thishtml;
                   // $(this).replaceWith(thishtml); //將他們的屬性去掉；
                });
            });
        }