替換標籤內容,並高亮顯示
阿新 • • 發佈:2018-12-09
難點,正則表示式的書寫
/** * 搜尋功能 查閱文書---begin * @param e:元素時間 * @param obj:當前搜尋的輸入框 * @param elementHtml:顯示內容元素 */ function doc_search_kwd(e,obj,elementHtml) { if (e && e.keyCode == 13) { // enter 鍵 doc_searchKwd($(obj),$(elementHtml)); } } /** * 調用搜索方法 * @param obj * @param elementHtml */ function doc_searchKwd(obj,elementHtml) { doc_clearSelection();//先清空一下上次高亮顯示的內容; var searchText = $(obj).val();//獲取你輸入的關鍵字; doc_highlight(searchText,$(elementHtml)); doc_scrollToFirstFind($(elementHtml)); } /** * 高亮顯示 */ function doc_highlight(searchText,elementHtml) { var searchText2 = searchText; searchText = searchText.replace(/\\/g, "\\\\"); searchText = searchText.replace(/\(/g, "\\("); searchText = searchText.replace(/\)/g, "\\)"); searchText = searchText.replace(/\$/g, "\\$"); searchText = searchText.replace(/\{/g, "\\{"); searchText = searchText.replace(/\}/g, "\\}"); searchText = searchText.replace(/\[/g, "\\["); searchText = searchText.replace(/\]/g, "\\]"); searchText = searchText.replace(/\+/g, "\\+"); searchText = searchText.replace(/\./g, "\\."); searchText = searchText.replace(/\?/g, "\\?"); searchText = searchText.replace(/\*/g, "\\*"); searchText = searchText.replace(/\^/g, "\\^"); searchText = searchText.replace(/|/g, "\|"); if (searchText != "") { var html =$(elementHtml).html(); var regx = "(>[^<>]*)("+searchText+")([^<>]*<)" var regExp = new RegExp(regx,'g');//建立正則表示式,g表示全域性的,如果不用g,則查詢到第一個就不會繼續向下查找了; var content; var content = html.match(regExp); if (content != null && content != undefined){ for(var i=0; i<content.length; i++) { var content1 = content[i]; var regExps = new RegExp(searchText2, 'g'); var contentAg = content1; content1 = content1.replace(regExps, '<a class="highlight" style="background-color: yellow;" >'+searchText2+'</a>'); html = html.replace(contentAg,content1); } } $(elementHtml).html(html);//更新文章; $(elementHtml).scrollTop(0); } } /** * 定位到第一個查詢到的 */ function doc_scrollToFirstFind(elementHtml) { var high = $(elementHtml).find(".highlight"); if (high.length > 0) { $("#docDetialContain").scrollTop($(high[0]).offset().top - 230); } } /** * 先清空一下上次高亮顯示的內容 */ function doc_clearSelection() { // alert("#"); $(".highlight").each(function () { var xx = $(this).html(); $(this).replaceWith(xx); }); }