js模拟浏览器Ctrl+F 搜索高亮

来源：互联网发布：文字转语音软件编辑：程序博客网时间：2024/05/22 00:29

原理：通过获取用户输入（此处用定义变量代表）的内容，然后将搜索页面的指定标签内所有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 0