1. 程式人生 > >替換標籤內容,並高亮顯示

替換標籤內容,並高亮顯示

難點,正則表示式的書寫

/**
 * 搜尋功能 查閱文書---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);
    });
}