怎么在vue项目中实现一个ctrl+f搜索功能

怎么在vue项目中实现一个ctrl+f搜索功能？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。

首先代码结构如下：

<template>
 <div>
  <div class="header"> //页面头部，搜索框部分
   <div class="search-total">
    <div class="search_model_zt">
     <div class="search">
      <div class="search_icon"><img :src="require('img/search.png')" /></div>
      <div class="search_input"><input v-model="searchitem" @keyup.enter="submit" placeholder="搜索条文" /></div>
     </div>
    </div>
   </div>
  </div>
  <div class="law-content"> //页面内容部分，具体内容由后端传入的datelist中的lawContent提供
   <div id="content" v-if="datelist" v-html="changeColor(datelist.lawContent)"></div>
  </div>
 </div>
</template>

搜索内容把对应内容变为红色的函数就是changeColor

changeColor(item) {
  let searchitem = this.searchitem;  //获取动态变化的搜索词
  if (searchitem !== '') { //若搜索词不为空，对搜索词进行替换
   return item.replace(new RegExp(searchitem, 'g'), '<a  >' + searchitem + '</a>');
  } else {
   return item;
  }
 },

到此，动态输入标红搜索词的功能已经做好了，但是搜索框还有一个回车事件我觉得在实际上也应该有点用，比如跳到第一个关键词什么的，这个时候，我又看见了一个神奇的方法

document.getElementsByTagName("a").scrollIntoView();

当页面可以支持滑动时，scrollIntoView可以把对于元素滑倒页面顶部（默认），也可以通过参数赋值给false让对应元素赋值到底部，仅支持原生js，jQuery中没有这个方法，那么问题来了，我上面替换出了那么多a标签，怎么能让他们排好队一个一个被调用了，那当然只能遍历了，但是原生js中没有jQuery中eq那样的选择器，怎么才能让js知道我要找的是第n个a标签呢

submit(){
    let num = document.getElementsByTagName("a").length;  //获取所有a标签的数量，这个页面所有的a标签都是由查询替换获得的，所以a标签的数量可以当场查询到关键词的数量
    if(num != 0){ //如果查询关键词存在，跳到第一个关键词的位置，标头增1，走满一圈归0
     document.getElementsByTagName("a")[this.searchhead].scrollIntoView(); //scrollIntoView方法只在原生document中可以使用，jquery中没有这个方法，参数默认是true，将这个元素置于页面第一行（如果页面可以滑动函数才生效）
     if(this.searchhead < (num - 1)){
      this.searchhead += 1;
     }else if(this.searchhead == (num - 1)){
      this.searchhead = 0;
     }
    }
   },

原来，getElementsByTagName(“a”)返回的是带有指定标签名的对象的集合。通过对数组的序列的调用就可以完成对方法的依次调用。
至此，这个简单页面的功能已基本实现，

源码

<script src="../axios/axios.js"></script>
<template>
 <div>
  <div class="header">
   <div class="search-total">
    <div class="search_model_zt">
     <div class="search">
      <div class="search_icon"><img :src="require('img/search.png')" /></div>
      <div class="search_input"><input v-model="searchitem" @keyup.enter="submit" placeholder="搜索条文" /></div>
     </div>
    </div>
   </div>
  </div>
  <div class="law-content">
   <div id="content" v-if="datelist" v-html="changeColor(datelist.lawContent)"></div>
  </div>
 </div>
</template>
<script>
 require('../utils/js/jquery.min.js');
 export default {
  data() {
   return {
    datelist: null,
    searchitem: '',
    searchnum:null,
    searchhead:0,
   };
  },
  created() {
   this.datelist = JSON.parse(sessionStorage.getItem('lawcontent'))
   console.log(this.datelist.lawTypeName)
  },
  methods: {
  changeColor(item) {
  let searchitem = this.searchitem;
  console.log(this.datelist.lawTypeName);
  if (searchitem !== '') {
   return item.replace(new RegExp(searchitem, 'g'), '<a  id="seach" >' + searchitem + '</a>');
  } else {
   return item;
  }
 },
   submit(){
    let num = document.getElementsByTagName("a").length;  //获取所有a标签的数量，这个页面所有的a标签都是由查询替换获得的，所以a标签的数量可以当场查询到关键词的数量
    if(num != 0){ //如果查询关键词存在，跳到第一个关键词的位置，标头增1，走满一圈归0
     document.getElementsByTagName("a")[this.searchhead].scrollIntoView(); //scrollIntoView方法只在原生document中可以使用，jquery中没有这个方法，参数默认是true，将这个元素置于页面第一行（如果页面可以滑动函数才生效）
     if(this.searchhead < (num - 1)){
      this.searchhead += 1;
     }else if(this.searchhead == (num - 1)){
      this.searchhead = 0;
     }
    }else{
    }
   },
 }
 };
</script>
<style scoped>
 #content {
  white-space: pre-line;
 }
 .header {
  width: 100%;
  top: 0px;
  background: white;
  padding: 8px 8px;
  border-bottom: 2px solid #f5f5f5;
 }
 .search-total {
  width: 100%;
  height: auto;
 }
 .search_model_zt {
  height: 35px;
  background: #fff;
 }
 .search {
  width: 100%;
  /* margin: auto; */
  border-radius: 30px;
  background-color: #f3f3f3;
  height: 32px;
  position: relative;
 }
 .search_icon {
  position: absolute;
  left: 5%;
  top: 7px;
  width: 16px;
  height: 16px;
 }
 .search_icon img {
  width: 100%;
  height: 100%;
 }
 .search_input {
  margin-left: 14%;
 }
 .search_input input {
  background: none;
  border: none;
  height: 34px;
  width: 100%;
 }
 input {
  outline: none;
  border: 0;
  background: none;
  font-size: 0.9rem;
 }
 .law-content {
  width: 100%;
  height: calc(100% - 95px);
  padding: 27px 18px 40px 16px;
  position: fixed;
  overflow: auto;
 }
 .law-content div {
  color: rgba(85, 85, 85, 1);
  font-size: 14px;
 }
</style>

看完上述内容，你们掌握怎么在vue项目中实现一个ctrl+f搜索功能的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注亿速云行业资讯频道，感谢各位的阅读！