vue实用demo根据关键词查询文本，查询后显示关键词匹配总数与当前数，并在文本中高亮显示当前匹配的关键词，支持上一个下一个切换

最新推荐文章于 2024-07-16 12:08:26 发布
最新推荐文章于 2024-07-16 12:08:26 发布
阅读量944 收藏 7
点赞数 1
分类专栏： vue 文章标签： vue js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qw8704149/article/details/107650682
版权

查询文本demo说明

在这里插入图片描述

如上图，这个demo主要支持以下功能

  1. 在输入框中输入关键字，页面会根据关键字自动检索文本
  2. 完成检索后默认黄色高亮第一个匹配到的关键字，其余匹配到关键字灰色高亮，并展示出当前高亮关键词的序号和匹配到关键字的总数
  3. 通过上一个，下一个按钮或者up、down键盘，切换时黄色高亮新的关键字，更新当前关键词序号
  4. 下一个或上一个关键字没有在页面中，切换时自动调整滚动条，展示出下一个或上一个关键词
  5. 当前黄色高亮最后一个关键字，再点击下一个自动跳到文本第一个匹配的关键字；当前黄色高亮为第一个关键字，再点击上一个自动跳到文本最后一个匹配的关键字

关键实现步骤

  1. 利用正则表达式根据输入框输入的关键字将所有匹配到的关键字替换为灰色背景的span标签
    brightenKeyword () {
      this.allLightKeyWords = []
      const Reg = new RegExp(this.keyWordInput, 'ig')
      //将原文本匹配到的关键字全量替换为灰色背景的span标签
      /*
      .lightStyle{
		  color: #000;
		  background-color: #ccc;
	  }*/
      this.lightStr = this.oriTexts.replace(Reg, '<span class="lightStyle">' + this.keyWordInput + '</span>')
      this.allLightKeyWords = document.getElementsByClassName('lightStyle')
      //获取替换后所有的元素并返回
      return this.allLightKeyWords
    },
  1. 默认将匹配到第一个关键字黄色高亮，并定位匹配关键字在文本窗口中的位置
	async locationLightKeyWord () {
      await this.brightenKeyword()
      if (this.allLightKeyWords.length > 0) {
        this.$nextTick(function () {
          this.totalNum = this.allLightKeyWords.length
          // 输入框输入关键字时处理高亮和滚动
          this.allLightKeyWords['0'].className = 'lightStyle currentLightStyle'
          document.getElementById('textArea').scrollTop = this.allLightKeyWords['0'].offsetTop - 75
        })
      }
    },
  1. 处理上一个和下一个点击事件
  preKeyWord () {
      if (this.totalNum >= 1) {
        this.preBtnDisable = false
        if (this.currentNodeIndex === 0) {
          this.currentNodeIndex = this.totalNum - 1
          this.nowNum = this.currentNodeIndex + 1
        } else {
          this.currentNodeIndex = this.currentNodeIndex - 1
          this.nowNum = this.currentNodeIndex + 1
        }
        this.changeCurrentKeyword()
      } else {
        this.preBtnDisable = true
      }
    },

    nextKeyWord () {
      if (this.totalNum >= 1) {
        this.nextBtnDisable = false
        if (this.currentNodeIndex === this.totalNum - 1) {
          this.currentNodeIndex = 0
          this.nowNum = this.currentNodeIndex + 1
        } else {
          this.currentNodeIndex = this.currentNodeIndex + 1
          this.nowNum = this.currentNodeIndex + 1
        }
        this.changeCurrentKeyword()
      } else {
        this.nextBtnDisable = true
      }
    },
    //黄色高亮当前关键字
    changeCurrentKeyword () {
      // 给当前关键字添加黄色高亮的类
      this.allLightKeyWords[this.currentNodeIndex].className = 'lightStyle currentLightStyle'
      //点击下一个时将原来黄色高亮的关键字回复为灰色高亮
      if (this.allLightKeyWords[this.currentNodeIndex - 1]) {
        this.allLightKeyWords[this.currentNodeIndex - 1].className = 'lightStyle'
      }
      //点击上一个时将原来黄色高亮的关键字回复为灰色高亮
      if (this.allLightKeyWords[this.currentNodeIndex + 1]) {
        this.allLightKeyWords[this.currentNodeIndex + 1].className = 'lightStyle'
      }
	  // 调整窗口，使当前黄色高亮关键字在窗口的可视范围内
      document.getElementById('textArea').scrollTop = this.allLightKeyWords[this.currentNodeIndex].offsetTop - 75
    }

demo全量代码

以下为demo的全量代码，希望能帮助到你，如有不足随时欢迎大家交流沟通

<template>
  <div class="main-box">
    <el-col>
      <el-col :span="16">
        <el-input
          label-width="240px"
          placeholder="请输入关键字"
          prefix-icon="el-icon-search"
          v-model="keyWordInput"
          @input="keyWordChange"
          @keyup.down.native="nextKeyWord"
          @keyup.up.native="preKeyWord"
          @keyup.enter.native="nextKeyWord"
          clearable/>
      </el-col>
      <el-col :span="4" class="right-button">
        <span style="display:inline-block;width:20px">{{nowNum}}/{{totalNum}}</span>
        <el-tooltip effect="dark" content="上一个" placement="top">
          <el-button @click="preKeyWord" :disabled="preBtnDisable" icon="el-icon-arrow-up" circle type="text"></el-button>
        </el-tooltip>
        <el-tooltip effect="dark" content="下一个" placement="top">
          <el-button @click="nextKeyWord" :disabled="nextBtnDisable" icon="el-icon-arrow-down" circle type="text"></el-button>
        </el-tooltip>
      </el-col>
    </el-col>
    <el-col id="textArea"  class="scroller text-box" v-html="lightStr"></el-col>
  </div>
</template>
<script>
export default {
  name: 'test',
  data () {
    return {
      keyWordInput: '',
      lightStr: '',
      oriTexts: '',
      totalNum: 0,
      nowNum: 0,
      preBtnDisable: true,
      nextBtnDisable: true,
      currentNodeIndex: 0,
      allLightKeyWords: []
    }
  },
  watch: {

  },
  methods: {
    preKeyWord () {
      if (this.totalNum >= 1) {
        this.preBtnDisable = false
        if (this.currentNodeIndex === 0) {
          this.currentNodeIndex = this.totalNum - 1
          this.nowNum = this.currentNodeIndex + 1
        } else {
          this.currentNodeIndex = this.currentNodeIndex - 1
          this.nowNum = this.currentNodeIndex + 1
        }
        this.changeCurrentKeyword()
      } else {
        this.preBtnDisable = true
      }
    },

    nextKeyWord () {
      if (this.totalNum >= 1) {
        this.nextBtnDisable = false
        if (this.currentNodeIndex === this.totalNum - 1) {
          this.currentNodeIndex = 0
          this.nowNum = this.currentNodeIndex + 1
        } else {
          this.currentNodeIndex = this.currentNodeIndex + 1
          this.nowNum = this.currentNodeIndex + 1
        }
        this.changeCurrentKeyword()
      } else {
        this.nextBtnDisable = true
      }
    },

    keyWordChange (value) {
      this.keyWordInput = value
      this.currentNodeIndex = 0
      if (this.keyWordInput) {
        this.locationLightKeyWord()
        this.nowNum = 1
        this.preBtnDisable = false
        this.nextBtnDisable = false
      } else {
        this.nowNum = 0
        this.totalNum = 0
        this.preBtnDisable = true
        this.nextBtnDisable = true
        this.lightStr = this.oriTexts
      }
    },

    brightenKeyword () {
      this.allLightKeyWords = []
      const Reg = new RegExp(this.keyWordInput, 'ig')
      this.lightStr = this.oriTexts.replace(Reg, '<span class="lightStyle">' + this.keyWordInput + '</span>')
      this.allLightKeyWords = document.getElementsByClassName('lightStyle')
      return this.allLightKeyWords
    },

    async locationLightKeyWord () {
      await this.brightenKeyword()
      if (this.allLightKeyWords.length > 0) {
        this.$nextTick(function () {
          this.totalNum = this.allLightKeyWords.length
          // 输入框输入关键字时处理高亮和滚动
          this.allLightKeyWords['0'].className = 'lightStyle currentLightStyle'
          document.getElementById('textArea').scrollTop = this.allLightKeyWords['0'].offsetTop - 75
        })
      }
    },

    changeCurrentKeyword () {
      this.allLightKeyWords[this.currentNodeIndex].className = 'lightStyle currentLightStyle'
      if (this.allLightKeyWords[this.currentNodeIndex - 1]) {
        this.allLightKeyWords[this.currentNodeIndex - 1].className = 'lightStyle'
      }
      if (this.allLightKeyWords[this.currentNodeIndex + 1]) {
        this.allLightKeyWords[this.currentNodeIndex + 1].className = 'lightStyle'
      }

      document.getElementById('textArea').scrollTop = this.allLightKeyWords[this.currentNodeIndex].offsetTop - 75
    }
  },
  mounted () {
    this.lightStr = this.oriTexts = `测试文本99测试文本测试文本测试文本测试文
    本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本
    测试文本测试文本测试文本测试文本测试文本测试文本1测试文本测试文本999测试文本测试文本测试文本测试文本测试文本
    测试文本测试文本测试文本测试文本测试文本2测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本
    测试文本测试文本测试文本测试文本3测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本
    测试文本测试文本测试文本4测试文本测试9999文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本
    测试文本测试文本5测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本
    测试文本6测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本
    测试文本测试文本测试文本测试文本测试文
    本测试文本测试文本测试99文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本
    测试文本测试文本测试文本测试文本测试文本测试文本1测试文本测试文本测试文本测试文本测试文本测试文本测试文本
    测试文本测试文本测试文本测试文本测试文本2测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本
    测试文本测试文本测试文本测试文本3测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本
    测试文本测试文本测试文本4测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本
    测试文本测试文本5测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本
    测试文本6测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本
    测试文本测试文本测试文本测试文本测试文
    本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本
    测试文本测试文本测试文本测试文本测试文本测试文本1测试文本测试文本测试文本测试文本测试文本测试文本测试文本
    测试文本测试文本测试文本测试文本测试文本2测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本
    测试文本测试文本测试文本测试文本3测试文本测试文本测试文本测试99文本测试文本测试文本测试文本测试文本测试文本
    测试文本测试文本测试文本4测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本
    测试文本测试文本5测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本
    测试文本6测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本`
  }
}
</script>
<style>
.lightStyle{
  color: #000;
  background-color: #ccc;
}
.currentLightStyle{
  color: #000;
  background-color: #e6a23c;
}
.main-box{
  margin-top:20px;
  margin-left:50px;
  width:800px;
}
.right-button{
  float:right;
  margin-right:10px;
}
.text-box{
  margin-top:10px;
  height: 800px;
  width:760px;
  border:1px solid #c8c8c8;
  overflow-y:auto;
  padding:0px 6px;
  font-size:20px
}
.scroller::-webkit-scrollbar {
 width: 8px;
}
.scroller::-webkit-scrollbar-track {
 background-color:#F5F5F5;
 -webkit-border-radius: 2em;
 -moz-border-radius: 2em;
 border-radius:2em;
}
 .scroller::-webkit-scrollbar-thumb {
 background-color:#c8c8c8;
 -webkit-border-radius: 2em;
 -moz-border-radius: 2em;
 border-radius:2em;
}
</style>

补充

如果有朋友需要处理动态加载文本内容;请结合上一篇文章"vue实用demo通过滚动条滚动事件动态加载内容动态请求后台数据"

点燃火柴
关注
专栏目录
Vue - 搜索关键字标红高亮（用户输入关键词搜索后，在搜索结果的列表标题上匹配并标红加粗）怎么使内容文本标红高亮的最详细教程，Nuxt.js uni-app 也适用，搜索功能及搜索结果关键字高亮源码
王佳斌
04-06 5116
Vue如何实现搜索结果高亮显示关键字，Vue.js Nuxt.js uni-app 关键字搜索高亮标红，vue实现搜索关键词高亮的详细教程，如何实现列表按照关键字改变颜色高亮红色，vue中搜索关键词,使文本标红，vue element ui搜索关键字高亮，基于vue实现搜索高亮关键字，Vue 搜索功能及搜索结果关键字高亮，js 点击搜索,内容关键字标红，通过query传参实现搜索和关键字高亮，Vue - 搜索关键字标红高亮（用户输入关键词搜索后，在搜索结果的列表标题上匹配并标红加粗）怎么使内容文本标红高亮
vue2/3 - 实现搜索列表关键字高亮效果功能，vue2/vue3搜索框输入关键字后下方列表根据关键字高亮突出显示字体文字，让一段文字中指定关键文字高亮显示（详细完整示例代码，一键复制开箱即用！）
高级前端工程师
01-20 2077
vue2，vue3，uniapp，搜索关键字高亮显示，Vue3字符串“关键字“高亮，vue3搜索框实现关键字高亮功能，vue2搜索关键字结果文字高亮，搜索结果高亮显示关键字，Vue3中实现关键字高亮的一种思路，js如何让一段文字中指定文字高亮显示，正则表达式，关键词搜索高亮，输入框搜索匹配关键字显示高亮,字母大小写不改变，vue点击搜索后内容关键字标红，在结果中高亮显示关键词，搜索词高亮，关键字筛选高亮，高亮搜索的关键字，过滤后高亮关键字，实现搜索关键词高亮显示，uniapp怎么让搜索列表根据输入的关键字标
vue实现点击高亮效果_Vue关键词搜索高亮
weixin_39846289的博客
12-04 1198
来源 |https://wintc.top/article/18有时候给页面内容添加一个关键词搜索功能，如果搜索结果能够像浏览器搜索一样高亮显示，那找起来就会很明显体验会好很多。本文就介绍一下关键词搜索高亮的实现方案。实现效果大概如下：可在线预览：http://wintc.top/laboratory/#/search-highlight。一、实现原理实现原理很简单：使用正则匹配出文本...
vuejs搜索关键字高亮显示并且实现切换显示下一个选项多种方法
南北极之间
12-21 1369
参考资料： https://segmentfault.com/q/1010000038543596?_ea=87295903 第一种方法： 手写： <template> <div> <el-button v-for="item in list" :key="item.id" @click="clickBtn(item.value)">{{ item.value }}&
Vue 显示关键词附近内容并高亮显示关键词
最新发布
qq_634380940的博客
07-16 474
Vue 显示关键词附近内容并高亮显示关键词
vue实现搜索中点击键盘上键、下键时按下搜索对应出来的相关关键字内容的切换???百度搜索
lqlq54321的博客
06-15 930
实现思路： 1.在按下键盘上键，下键时候，把li标签的下标与class样式进行一个绑定 2.再点击上键的时候，就要考虑起始的下标值，不能是0，因为开始的时候还没有到下表为0的li上， 特殊情况：当按到最小的下标时怎么处理下标 3.在点击下键的时候， 特殊情况：当按到最大的下标的时候应该怎么做？ 子组件中=》 <div class="search"> <div> <i class="fa fa-search" aria-hidden="true">&l
Vue中 实现上一篇下一篇的功能
m0_64547949的博客
02-21 912
Vue中 实现上一篇下一篇的功能
vue实现搜索文字高亮
m0_68716504的博客
01-24 996
在日常项目中我们往往会有搜索高亮的需求，下面方法可帮助我们实现，可能不是最优但是可以解决。
vue实现多组关键词对应高亮显示功能
10-16
在 Vue 中实现多组关键词对应高亮显示功能是一项常见的需求，尤其在搜索结果展示、文本分析或评论处理等场景中。这个功能允许用户快速识别和理解关键词在文本中的位置，提高用户体验。 在给定的例子中，我们首先...
JS实现关键词高亮：在HTML字符串中匹配“跨标签关键词”
携手天下
11-25 2439
本文发布于个人网站：https://wintc.top/article/59，转载请注明 很久之前（好像刚好是一年前）写过一个Vue组件，匹配文本内容中的关键词高亮，类似浏览器ctrl+f搜索结果。实现方案是，将文本字符串中的关键字搜索出来，然后使用特殊的标签（比如font标签）包裹关键词替换匹配内容，最后得到一个HTML字符串，渲染该字符串并在font标签上使用CSS样式即可实现高亮的效果。 当时的实现过于简单，没有支持接收HTML字符串作为内容进行关键词匹配。这两天有同学问到，就又思考了这个问题.
vue列表进入详情页实现上一篇下一篇功能
miem_yang的博客
04-25 2957
vue列表进入详情页实现上一篇下一篇功能
vue页面实现文本关键字检索，关键字高亮显示及定位功能
韦大人orz
02-11 3195
<template> <div class="search-highlight" v-html="contentShow"> </div> </template> <script> const PLUGIN_FLAG = 'search-hightlight_by_mumaa' export default { props: { content: { type: String, default: '.
vue 高亮搜索
m0_67022380的博客
07-06 246
vue 实现搜索高亮
vue+element-ui实现搜索文字并高亮定位显示
幼儿园园长
06-05 4528
首先看一下效果，定位到画布上的节点 先上代码 代码模块1 // 搜索框html代码 <el-input placeholder="请输入节点名称" prefix-icon="el-icon-search" v-model="searchNodeInput" @input="changeSearchNodeInput" @keyup.down.native="inputDown" @keyup.up.native="inputUp" @keyup.enter.native="inputD
vue 仿浏览器关键词高亮定位搜索
xiaohuli_hyr的博客
10-24 1526
一个防浏览器进行关键搜词搜索高亮定位功能；
vue 实现Ctrl+F搜索功能（定位+滚动的效果）（解决掉能搜查标签属性）
weixin_44863580的博客
04-26 4363
vue 实现Ctrl+F搜索功能（解决掉能搜查标签属性）不兼容IE 1、先看效果 2、搜索栏代码 <el-input v-model="searchText" placeholder="请输入关键字" prefix-icon="el-icon-search" clearable size="small" @keyup.enter.native="searc
【Jquery】-------JS实现关键字检索html内容，符合关键字的匹配项，进行标注背景色，可进行上一个，下一个切换定位
皮皮冰要做大神
06-23 969
这个代码主要功能： 通过关键字检索出html内容匹配项 可进行上一个，下一个切换定位查看；
vue搜索关键字高亮
weixin_60487574的博客
08-29 174
【代码】vue搜索关键字高亮。
vue实现仿浏览器搜索功能 高亮显示关键词
06-09
首先，在你的组件中定义一个计算属性，用于根据输入框中的值过滤列表数据并且高亮显示匹配的关键词，例如： ``` (item.text)"> export default { data() { return { list: [ { id: 1, text: '...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值