原生js高仿浏览器ctrf+f

高仿要点：

关键词高亮
命中数
scroll到第一块命中的内容

#1.获取页面body内容

oldBody=document.body.innerHTML

#2.js正则前瞻后顾（参考）body中的keyword,为关键词加上样式，正则部分表示：keyword前面是>开头，然后匹配多个非<，>其它字符，然后匹配关键词，关键词后匹配多个非<，>其它字符，再匹配一个<

keword='成都'
newBody=oldBody.replace(new RegExp(eval('/(?<=(>[^<>]*))'+keyword+'(?=([^<>]*<))/ig')),'<span style="color:red;background-color:yellow" class="myhighlight">'+keyword+'</span>')

#3.将替换后newbody替换页面的body,效果OK

document.body.innerHTML=newBody

#4.通过自定义的class获取命中数

document.getElementsByClassName('myhighlight').length

#5.屏幕滚动到第一个高亮处。定义一个计算元素距离顶部距离的函数，最后通过window.scrollTo跳到滚动到位置

function calcHeight2Top(ele){let h=0while(ele!=document.body){h+=ele.offsetTopele=ele.offsetParent}return h;
}
first=document.getElementsByClassName('myhighlight')[0]
window.scrollTo(calcHeight2Top(first),first.offsetLeft)

原生js高仿浏览器ctrf+f相关推荐

【笔记-vue】《imooc-vue.js高仿饿了么》、《imooc-vue 音乐app》、《imooc-vue.js源码全方位解析》
20170709 - 20171128:<imooc-vue.js高仿饿了么> 一.第一章课程简介 1-1课程简介 1.需求分析-脚手架工具-数据mock-架构设计-代码编写-自测-编译 ...
Vue.js高仿饿了么外卖App学习记录
(给达达前端加星标,提升前端技能) 开发一款vue.js开发一款app,使用vue.js是一款高效的mvvm框架,它轻量,高效,组件化,数据驱动等功能便于开发.使用vue.js开发移动端app,学会使 ...
使用原生开发高仿瑞幸小程序（一）：使用 Vant 组件库和配置多页面
本文由图雀社区认证作者曾伟@喵先森写作而成,图雀社区将连载其使用原生开发高仿瑞幸小程序系列,点击阅读原文查看作者的 infoQ 链接,感谢作者的优质输出,让我们的技术世界变得更加美好???? 源 ...
js html颜色代码,原生js编写的浏览器安全色网页拾色器色盘生成颜色代码
原生js编写的浏览器安全色网页拾色器 by js.alixixi.com #abc-colorPicker .colorPick-close,#filter-colorPicker .colorPic ...
原生Java高仿抖音短视频APP双端源码
简介: 从别的网站199购买的原生Java高仿抖音短视频APP双端源码,免费给大家~ 源码未测试,java开发,上手有难度,小白童鞋请勿瞎捣鼓. 安卓语言是:android stdio 苹果语言是:O ...
【原生JS】仿新浪微博名片弹框
[原生JS]仿新浪微博名片弹框博客已经搬家地址:http://cm2009.sinaapp.com/ 第一次用原生JS写小功能,有很多不足的地方,例如事件绑定没有使用事件委托功能,而是直接用零级D ...
vue结合饿了么_Vue.js 高仿饿了么外卖app 全套_IT教程网
资源名称:Vue.js 高仿饿了么外卖app 全套资源目录: vue仿饿了么视频全套全套资源 │ files.txt │ project.zip │ resource.zip │ ├─第01 ...
项目：Vue.js高仿饿了吗外卖APP（一）
Vue.js高仿饿了吗外卖APP核心知识使用Vue.js作为项目的技术栈!这是目前最火的MVVM框架(之一),轻量.简洁.高效.数据驱动.组件化的优点,被大家称为"简单却不失优雅,小巧而不 ...
vue.js高仿饿了吗实现tips
@[TOC]vue.js高仿饿了吗实现tips 高仿饿了吗–tip1 动态评星目标:根据商家的星级生成指定的五行样式注意点无论星级多少,星星的个数都是五颗,所以利用v-for循环生成利用内联标 ...
纯html+css+js高仿苹果手机时钟小组件
话不多数说,这是一款用html+css+js开发的高仿苹果手机时钟组件, 作者将苹果的小组件移植到浏览器插件中,可以在BdTab插件安装该组件 HTML <div style="wid ...

原生js高仿浏览器ctrf+f

原生js高仿浏览器ctrf+f相关推荐

最新文章

热门文章