1. 程式人生 > >js模擬瀏覽器Ctrl+F 搜尋高亮

js模擬瀏覽器Ctrl+F 搜尋高亮

原理:通過獲取使用者輸入(此處用定義變數代表)的內容,然後將搜尋頁面的指定標籤內所有HTML儲存於content變數,再通過js正則replace替換content中包含使用者輸入的
關鍵字的地方,替換的值為自定義標籤(如<mark>)加關鍵字的形式代替。最後再將指定標籤的HTML內容替換為已經replace過的content即可。
具體程式碼如下:
    /**
             * 多關鍵字查詢
             * @param  {[type]} content [description]
             * @param  {[type]} keyword [description]
             * @return {[type]}         [description]
             */
            function mutilMarkSearchWord(keywords,dom){ 
                var content = $(dom).html(); 
                if (keywords.length == 0) {
                    return false;
                } 
                for (var i = 0; i < keywords.length; i++) { 
                      var regExp = new RegExp(keywords[i], 'g');
                      console.log(regExp);
                      content = content.replace(regExp, '<mark class="marked_'+i+'">' + keywords[i] + '</mark>');
                }

               console.log(content);
                $(dom).html(content);
//預設將頁面定位到第一個匹配的關鍵字處
                var X = $('.marked_0').offset().top;
                var Y = $('.marked_0').offset().left;
                console.log('x:',X,',y:',Y);
                window.scrollTo(X, Y);
            }
            var keywords = ['瀏覽器','段落'];
            mutilMarkSearchWord(keywords,'#content')