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版TAB选项卡效果实例
Aug 16 Javascript
淘宝网提供的国内NPM镜像简介和使用方法
Apr 17 Javascript
jQuery扁平化风格下拉框美化插件FancySelect使用指南
Feb 10 Javascript
基于JavaScript如何实现私有成员的语法特征及私有成员的实现方式
Oct 28 Javascript
JavaScript实现QQ聊天消息展示和评论提交功能
May 22 Javascript
Vue进度条progressbar组件功能
Apr 17 Javascript
讲解vue-router之命名路由和命名视图
May 28 Javascript
JS基于开关思想实现的数组去重功能【案例】
Feb 18 Javascript
浅谈js中的bind
Mar 18 Javascript
浅谈vue权限管理实现及流程
Apr 23 Javascript
Openlayers学习之地图比例尺控件
Sep 28 Javascript
聊聊JS ES6中的解构
Apr 29 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
Ajax PHP简单入门教程代码
2008/04/25 PHP
php json与xml序列化/反序列化
2013/10/28 PHP
php结合ajax实现手机发红包的案例
2016/10/13 PHP
Laravel Validator 实现两个或多个字段联合索引唯一
2019/05/08 PHP
解决php extension 加载顺序问题
2019/08/16 PHP
js实现右下角可关闭最小化div(可用于展示推荐内容)
2013/06/24 Javascript
jquery bind(click)传参让列表中每行绑定一个事件
2014/08/06 Javascript
JS不能跨域借助jquery获取IP地址的方法
2014/08/20 Javascript
iScroll中事件点击触发两次解决方案
2015/03/11 Javascript
node.js中格式化数字增加千位符的几种方法
2015/07/03 Javascript
用JS动态设置CSS样式常见方法小结(推荐)
2016/11/10 Javascript
Vue.js组件间的循环引用方法示例
2017/12/27 Javascript
前后端如何实现登录token拦截校验详解
2018/09/03 Javascript
微信小程序数据统计和错误统计的实现方法
2019/06/26 Javascript
详解vue路由
2020/08/05 Javascript
vue+element实现动态加载表单
2020/12/13 Vue.js
[02:27]2014DOTA2国际邀请赛 VG赛后采访:更大的挑战在等着我们
2014/07/13 DOTA
python远程连接服务器MySQL数据库
2018/07/02 Python
Python 删除整个文本中的空格,并实现按行显示
2018/07/24 Python
django 做 migrate 时 表已存在的处理方法
2019/08/31 Python
python+mysql实现个人论文管理系统
2019/10/25 Python
详解Python修复遥感影像条带的两种方式
2020/02/23 Python
Python pandas如何向excel添加数据
2020/05/22 Python
使用Keras中的ImageDataGenerator进行批次读图方式
2020/06/17 Python
HTML5 device access 设备访问详解
2018/05/24 HTML / CSS
HTML5单页面手势滑屏切换原理
2016/03/21 HTML / CSS
亚马逊印度站:Amazon.in
2017/10/15 全球购物
Kipling澳洲官网:购买凯浦林包包
2020/12/17 全球购物
新闻专业推荐信范文
2013/11/20 职场文书
大学生职业生涯规划范文
2014/01/22 职场文书
《雷鸣电闪波尔卡》教学反思
2014/02/23 职场文书
学习十八大的心得体会
2014/09/01 职场文书
公司授权委托书格式范文
2014/10/02 职场文书
2015年秋季新学期寄语
2015/03/25 职场文书
幼儿园庆元旦主持词
2015/07/06 职场文书
微信小程序用户授权最佳实践指南
2021/05/08 Javascript