js模擬瀏覽器Ctrl+F 搜尋高亮
阿新 • • 發佈:2019-01-07
原理:通過獲取使用者輸入(此處用定義變數代表)的內容,然後將搜尋頁面的指定標籤內所有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')