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')

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值