JS模拟浏览器实现全局搜索功能


Posted in Javascript onSeptember 11, 2019

需要像浏览器的全局搜索一样,搜索指定模块的对应值,然后将匹配到的内容添加背景颜色等。

思路

  • 需要取到当前指定区域的所有内容
  • 然后在取到的内容中找到搜索的内容加上对应的背景颜色
  • 最后在将修改后的内容渲染到页面上

实现

  • 利用innerHTML取到对应模块的内容
  • 编写对应的正则表达式来匹配搜索的内容
  • 利用String.prototype.replace替换匹配到的内容
  • 最后在渲染到页面上

代码实现:

let wrap = document.querySelector('.wrap');
let innerHTML = wrap.innerHTML;
let reg = new RegExp(query, 'g');
innerHTML = innerHTML.replace(reg, '<span style="color: #000; background-color: #e3e4e5">' + query + '</span>');
wrap.innerHTML = innerHTML;

具体的实现搜索实现就完成了,但是上面代码还有个缺陷,就是更换搜索内容时,之前搜索的内容还是具有选中的样式,那么接下来完善功能:

let preQuery = ''; // 上一次搜索的内容
let wrapDom = ''; // 搜索区域的dom元素
function searchFn(dom, query) {
  let wrap = wrapDom || document.querySelector(dom);
  let innerHTML = wrap.innerHTML;
  if (!preQuery) {
    let preReg = new RegExp('<span style="color: #000; background-color: #e3e4e5">' + preQuery + '</span>', 'g');
    innerHTML = innerHTML.replace(preReg, preQuery);
  }
  if (query) {
    let reg = new RegExp(query, 'g');
    innerHTML = innerHTML.replace(reg, '<span style="color: #000; background-color: #e3e4e5">' + query + '</span>');
  }
  wrap.innerHTML = innerHTML;
  preQuery = query;
}

至此搜索高亮的功能就已经实现了。

注意事项

搜索区域的dom元素中不能使用title属性,因为当使用title属性时也会把对应的title属性内容替换,页面渲染时就会产生问题,其实可以将匹配规则的正则表达式重写,但是能力有限,不知道如何编写排除title属性的正则表达式

如果使用Vue等框架编写时,搜索完之后vue相关的事件和属性全都失效了,因为我们这样是直接把dom给换了,这种情况下有两种解决方法:

搜索完成之后,再实例化一次vue

function resetVm() {
  vm.destroy()
  vm = new Vue({...})
}

但是这样会有个问题,重新实例化vue实例之后,搜索内容就没了

不使用vue,可以用jQuery去实现页面,这样就不会有事件失效的问题

总结

以上所述是小编给大家介绍的JS模拟浏览器实现全局搜索功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
理解Javascript_13_执行模型详解
Oct 20 Javascript
js里的prototype使用示例
Nov 19 Javascript
让AJAX不依赖后端接口实现方案
Dec 03 Javascript
Jquery实现图片放大镜效果的思路及代码(自写)
Oct 18 Javascript
JavaScript使用function定义对象并调用的方法
Mar 23 Javascript
微信小程序 Tab页切换更新数据
Jan 05 Javascript
iview table高度动态设置方法
Mar 14 Javascript
React如何实现浏览器打印部分内容详析
May 19 Javascript
Vue之beforeEach非登录不能访问的实现(代码亲测)
Jul 18 Javascript
浅谈layui 数据表格前后台传值的问题
Sep 12 Javascript
JQuery 实现文件下载的常用方法分析
Oct 29 jQuery
小程序跳转H5页面的方法步骤
Mar 06 Javascript
Vue项目中使用better-scroll实现菜单映射功能方法
Sep 11 #Javascript
使用layui+ajax实现简单的菜单权限管理及排序的方法
Sep 10 #Javascript
修改layui的后台模板的左侧导航栏可以伸缩的方法
Sep 10 #Javascript
layui固定下拉框的显示条数(有滚动条)的方法
Sep 10 #Javascript
使用layui实现的左侧菜单栏以及动态操作tab项方法
Sep 10 #Javascript
浅谈监听单选框radio改变事件(和layui中单选按钮改变事件)
Sep 10 #Javascript
layui给下拉框、按钮状态、时间赋初始值的方法
Sep 10 #Javascript
You might like
异世界新番又来了,同样是从零开始,男主的年龄降到5岁
2020/04/09 日漫
php下的权限算法的实现
2007/04/28 PHP
PHP编译configure时常见错误的总结
2017/08/17 PHP
JQuery 插件模板 制作jquery插件的朋友可以参考下
2010/03/17 Javascript
js以对象为索引的关联数组
2010/07/04 Javascript
js实现拉伸拖动iframe的具体代码
2013/08/03 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
2013/08/12 Javascript
JavaScript让Textarea支持tab按键的方法
2015/06/26 Javascript
理解javascript定时器中的setTimeout与setInterval
2016/02/23 Javascript
jQuery简单创建节点的方法
2016/09/09 Javascript
js实现点击图片自动提交action的简单方法
2016/10/16 Javascript
canvas 弹幕效果(实例分享)
2017/01/11 Javascript
AngularJS之页面跳转Route实例代码
2017/03/10 Javascript
jQuery实现鼠标滑过预览图片大图效果的方法
2017/04/26 jQuery
Node.js v8.0.0正式发布!看看带来了哪些主要新特性
2017/06/02 Javascript
详解webpack分离css单独打包
2017/06/21 Javascript
利用Node.js了解与测量HTTP所花费的时间详解
2017/09/22 Javascript
JS处理数据四舍五入(tofixed与round的区别详解)
2017/10/26 Javascript
结合mint-ui移动端下拉加载实践方法总结
2017/11/08 Javascript
jquery中有哪些api jQuery主要API
2017/11/20 jQuery
vue中使用vue-print.js实现多页打印
2020/03/05 Javascript
JavaScript 防抖和节流遇见的奇怪问题及解决
2020/11/20 Javascript
12步教你理解Python装饰器
2016/02/25 Python
Python实现的多进程和多线程功能示例
2018/05/29 Python
java判断三位数的实例讲解
2019/06/10 Python
Python整数对象实现原理详解
2019/07/01 Python
Python3 虚拟开发环境搭建过程(图文详解)
2020/01/06 Python
python使用Geany编辑器配置方法
2020/02/21 Python
JD Sports比利时官网:英国领先的运动鞋和运动服饰零售商
2018/10/10 全球购物
品酒会策划方案
2014/05/26 职场文书
锦旗标语大全
2014/06/23 职场文书
学校教研活动总结
2014/07/02 职场文书
党的群众路线教育实践活动剖析材料
2014/09/30 职场文书
党员自我评价2015
2015/03/03 职场文书
2015年银行信贷员工作总结
2015/05/19 职场文书
python pygame入门教程
2021/06/01 Python