new RegExp() + scrollIntoView() 实现关键词查询，添加高亮样式

最新推荐文章于 2022-04-15 10:32:32 发布

yumihe

最新推荐文章于 2022-04-15 10:32:32 发布

阅读量402

点赞数

分类专栏： js vue

本文链接：https://blog.csdn.net/qq_32678401/article/details/99728468

版权

通过一个小demo实现以下功能点：

       （1）对内容做关键词查询，将内容中的关键词添加高亮样式，默认第一个关键词样式区别其它关键词样式
       （2）点击上一个下一个按钮查找关键词，使当前关键词样式区别于其它关键词样式
       （3）当前关键词通过scrollIntoView()，使其始终出现在可见区域内
       （4）点击清空，清空所有关键词高亮样式，滚动条滚动到最顶端

效果如下：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>关键词查询，添加高亮样式</title>
  <link rel="stylesheet" type="text/css" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script type="text/javascript" src="https://unpkg.com/element-ui/lib/index.js"></script>
<style>
  html,body{height: 100%;overflow-y: hidden;}
  .container{width: 650px;margin: 0 auto;height: 100%;}
  .el-icon-search{color: #5f9dd2;}
  .selectColor{background: #690;}
  .hightlight{background: #f90;}
  .search-wrap{font-size: 0;height: 40px;padding-top: 50px;padding-bottom: 20px}
  .search{width: 400px;display: inline-block;vertical-align: middle;}
  .calc{font-size: 14px;display: inline-block;vertical-align: middle;margin-left: 20px;}
  .operate{color: #2d8cf0;margin-left: 10px;cursor: pointer;}
  .mock-data{height: calc(100% - 120px);overflow-y: auto

最低0.47元/天解锁文章

yumihe

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
new RegExp() + scrollIntoView() 实现关键词查询，添加高亮样式

通过一个小demo实现以下功能点：（1）对内容做关键词查询，将内容中的关键词添加高亮样式，默认第一个关键词样式区别其它关键词样式（2）点击上一个下一个按钮查找关键词，使当前关键词样式区别于其它关键词样式（3）当前关键词通过scrollIntoView()，使其始终出现在可见区域内（4）点击清空，清空所有关键词高亮样式，滚动条...
复制链接

扫一扫