原理:通过获取用户输入(此处用定义变量代表)的内容,然后将搜索页面的指定标签内所有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')