前端实现ctrl+F搜索效果

原理

• 根据搜索关键字keyword将原有文本替换成高亮highlight样式的标签。
• 找出全部带有高亮highlight样式的标签作为keywordNodes高亮关键字dom节点数组。
• currentActiveNodeIndex记录当前激活的关键字节点，点击上一条或下一条对激活的索引currentActiveNodeIndex进行操作。同时记得为激活的节点添加选中的样式。web利用scrollIntoView()滚动至可视窗口，小程序利用wx.pageScrollTo()

web案例

小程序案例

源码

 <a-modal
      ref="modal"
      v-model:visible="visible"
      width="1000px"
      title="讲好冬奥故事 共赴冰雪之约 | 北京冬奥会倒计时10天！"
      @ok="handleOk"
    >
      <a-input-search
        style="margin-bottom: 16px;"
        v-model:value="searchValue"
        placeholder="input search text"
        enter-button="Search"
        size="large"
        @search="onSearch"
      />
      <p>
        <span>第{{ currentActiveNode }}条 共{{keywordNodes.length}}条</span>
        <a class="a-btn" href="javascript: ;" @click="handleScroll('pre')">上一条</a>
        <a class="a-btn" href="javascript: ;" @click="handleScroll('next')">下一条</a>
      </p>
      <span v-for="(item, index) in newsContent" :key="index">
        <span v-if="searchValue && item === searchValue" ref="keyword" class="highLight">{{item}}</span>
        <span v-else>{{item}}</span>
      </span>
    </a-modal>

import { defineComponent, ref } from 'vue';
export default defineComponent({
  setup () {
    return {
      visible: ref(false),
      searchValue: ref(''),
      activeNodeIndex: ref(0),
      keywordNodes: ref([]), // 关键字节点数组
      newsContent: ref(['冬奥会与春节邂逅，中国“年味”赋予了这场冰雪盛会更多内涵。在传统小年的喜庆中，北京冬奥会进入最后十日的倒计时。当2015年北京赢得冬奥会主办权，当2018年冬奥会进入北京时间，这座存在于未来的“双奥之城”，曾给世界留下无限遐想的空间。如今，将至已至，未来已来。从平昌到北京，1440个日夜的漫长旅程，终至终点。这是全球冬季运动的最高殿堂，是所有冰雪健儿梦寐以求的舞台。 　　他们聚焦世界目光。对于东道主选手而言，更是如此。 　　扩面、固点、精兵、冲刺，中国军团按照既定方略，走过了北京冬奥周期。一次突破紧接着一次更大的突破，一步跨越紧跟着一步更大的跨越…… 　　四年累积、聚沙成塔，不断鞭策自我的中国冰雪健儿，终于来到了梦想的舞台前。 　　冲在队伍最前方的，依旧是短道速滑。按照赛程，北京冬奥会首个金牌日，中国短道速滑队将在混合团体接力项目上冲击中国代表团本届冬奥会首金。 　　作为中国冬季运动的“拓荒者”，短道速滑队是聚光灯下的焦点。迄今为止，中国代表团自参加冬奥会以来共获得13枚金牌，短道速滑项目贡献其中10枚。这支队伍的表现，就是中国代表团成绩的晴雨表。 　　本赛季短道速滑世界杯4站赛事，中国队共收获7冠，任子威、武大靖等名将均有摘金表现。在他们的率领下，入选冬奥名单的十位选手正在首钢园潜心备战，力争捍卫“王者之师”的荣誉。 　　隋文静/韩聪、彭程/金杨，这两对花样滑冰双人滑的黄金搭档，也在首钢园内进行着最后备战。特别是隋文静/韩聪，平昌0.43分的遗憾已成为过去，北京是他们实现大满贯梦想最完美的地方。 　　4金3银2铜总计9枚奖牌，这是中国速度滑冰队在本赛季4站世界杯中交出的成绩单。比赛中，共有4人次打破全国纪录，包括同一人多次刷新个人最佳的情况在内，共36人次创造个人最好成绩。 　　这支队伍恰似一辆正在朝着目的地加速行驶的列车，而宁忠岩、高亭宇扮演了车头的角色。宁忠岩在本赛季世界杯中独揽3金2银，高亭宇也登上过冠军领奖台。二七国家冰雪运动科训基地内，他们正与队友一道挥汗如雨，向着心中的目标冲刺。 　　拥有徐梦桃、孔凡钰、齐广璞、贾宗洋等多位世界名将的自由式滑雪空中技巧国家队，是中国代表团争金夺银的排头兵。他们每一个人胸前，都挂着本赛季世界杯的金牌。在角逐个人项目之前，具备集团优势的他们拥有相同的目标——绝对不让混合团体那枚奥运金牌旁落。 　　除空中技巧这一优势领域外，中国滑雪项目冲金点增多，谷爱凌功不可没。去年12月伤愈复出后，短短37天之内，她在所参加的各项国际比赛中拿到6金2银1铜。如果谷爱凌在北京冬奥会上继续创造历史，恐怕没有人会对此感到意外。 　　蔡雪桐、刘佳宇，这对实力出众的姐妹花，将携手应对克洛伊-金带来的挑战。还有苏翊鸣，18岁的他不仅在单板滑雪大跳台世界杯上拿下了一枚价值连城的金牌，还因内转1980度抓板的超高难度动作获得了吉尼斯世界纪录认证。 　　与谷爱凌、蔡雪桐、刘佳宇等名将一样，苏翊鸣也在崇礼，为梦想做最后一搏。 　　在中国代表团中，还有无数个“苏翊鸣”，在不断创造着自己新的上限。正因他们，此时回望这段备战之路，中国冰雪运动成绩已取得飞跃。 　　2015年北京获得主办权时，本届冬奥会所设这109个小项中，约三分之一在国内属于白纸一张，从未开展。 　　2018年平昌冬奥会时，中国冰雪健儿共参加了53个小项的角逐，约占项目设置总数的一半，那已是中国代表团在历届冬奥会上参加项目最多的一次。 　　而本届冬奥会，中国军团会再次刷新自身参赛项目数量纪录，这已毋庸置疑。 　　北京这座从夏季走向冬季的“双奥之城”，孕育了中国冰雪健儿新的梦想。属于他们的故事，正要从此刻开始娓娓道来。冬奥会与春节邂逅，中国“年味”赋予了这场冰雪盛会更多内涵。在传统小年的喜庆中，北京冬奥会进入最后十日的倒计时。当2015年北京赢得冬奥会主办权，当2018年冬奥会进入北京时间，这座存在于未来的“双奥之城”，曾给世界留下无限遐想的空间。如今，将至已至，未来已来。从平昌到北京，1440个日夜的漫长旅程，终至终点。这是全球冬季运动的最高殿堂，是所有冰雪健儿梦寐以求的舞台。 　　他们聚焦世界目光。对于东道主选手而言，更是如此。 　　扩面、固点、精兵、冲刺，中国军团按照既定方略，走过了北京冬奥周期。一次突破紧接着一次更大的突破，一步跨越紧跟着一步更大的跨越…… 　　四年累积、聚沙成塔，不断鞭策自我的中国冰雪健儿，终于来到了梦想的舞台前。 　　冲在队伍最前方的，依旧是短道速滑。按照赛程，北京冬奥会首个金牌日，中国短道速滑队将在混合团体接力项目上冲击中国代表团本届冬奥会首金。 　　作为中国冬季运动的“拓荒者”，短道速滑队是聚光灯下的焦点。迄今为止，中国代表团自参加冬奥会以来共获得13枚金牌，短道速滑项目贡献其中10枚。这支队伍的表现，就是中国代表团成绩的晴雨表。 　　本赛季短道速滑世界杯4站赛事，中国队共收获7冠，任子威、武大靖等名将均有摘金表现。在他们的率领下，入选冬奥名单的十位选手正在首钢园潜心备战，力争捍卫“王者之师”的荣誉。 　　隋文静/韩聪、彭程/金杨，这两对花样滑冰双人滑的黄金搭档，也在首钢园内进行着最后备战。特别是隋文静/韩聪，平昌0.43分的遗憾已成为过去，北京是他们实现大满贯梦想最完美的地方。 　　4金3银2铜总计9枚奖牌，这是中国速度滑冰队在本赛季4站世界杯中交出的成绩单。比赛中，共有4人次打破全国纪录，包括同一人多次刷新个人最佳的情况在内，共36人次创造个人最好成绩。 　　这支队伍恰似一辆正在朝着目的地加速行驶的列车，而宁忠岩、高亭宇扮演了车头的角色。宁忠岩在本赛季世界杯中独揽3金2银，高亭宇也登上过冠军领奖台。二七国家冰雪运动科训基地内，他们正与队友一道挥汗如雨，向着心中的目标冲刺。 　　拥有徐梦桃、孔凡钰、齐广璞、贾宗洋等多位世界名将的自由式滑雪空中技巧国家队，是中国代表团争金夺银的排头兵。他们每一个人胸前，都挂着本赛季世界杯的金牌。在角逐个人项目之前，具备集团优势的他们拥有相同的目标——绝对不让混合团体那枚奥运金牌旁落。 　　除空中技巧这一优势领域外，中国滑雪项目冲金点增多，谷爱凌功不可没。去年12月伤愈复出后，短短37天之内，她在所参加的各项国际比赛中拿到6金2银1铜。如果谷爱凌在北京冬奥会上继续创造历史，恐怕没有人会对此感到意外。 　　蔡雪桐、刘佳宇，这对实力出众的姐妹花，将携手应对克洛伊-金带来的挑战。还有苏翊鸣，18岁的他不仅在单板滑雪大跳台世界杯上拿下了一枚价值连城的金牌，还因内转1980度抓板的超高难度动作获得了吉尼斯世界纪录认证。 　　与谷爱凌、蔡雪桐、刘佳宇等名将一样，苏翊鸣也在崇礼，为梦想做最后一搏。 　　在中国代表团中，还有无数个“苏翊鸣”，在不断创造着自己新的上限。正因他们，此时回望这段备战之路，中国冰雪运动成绩已取得飞跃。 　　2015年北京获得主办权时，本届冬奥会所设这109个小项中，约三分之一在国内属于白纸一张，从未开展。 　　2018年平昌冬奥会时，中国冰雪健儿共参加了53个小项的角逐，约占项目设置总数的一半，那已是中国代表团在历届冬奥会上参加项目最多的一次。 　　而本届冬奥会，中国军团会再次刷新自身参赛项目数量纪录，这已毋庸置疑。 　　北京这座从夏季走向冬季的“双奥之城”，孕育了中国冰雪健儿新的梦想。属于他们的故事，正要从此刻开始娓娓道来。'])
    };
  },
  computed: {
    currentActiveNode () {
      if (this.keywordNodes.length === 0) {
        return 0
      } else {
        return this.activeNodeIndex + 1
      }
    }
  },
  watch: {
    searchValue () {
      this.activeNodeIndex = 0
      this.keywordNodes = []
    }
  },
  methods: {
    handleOk () {
      this.visible = false
    },
    getInf (str, key) {
      return str
        .replace(new RegExp(`${key}`, 'g'), `%%${key}%%`)
        .split('%%')
        .filter(item => {
          if (item) {
            return true
          }
          return false
        })
    },
    onSearch (e) {
      // console.log('搜索值', e);
      this.activeNodeIndex = 0
      this.keywordNodes = []
      let str = this.newsContent.join('')
      const temp = this.getInf(str, e)
      this.newsContent = temp
      this.$nextTick(() => {
        // console.log(this.$refs.keyword)
        this.keywordNodes = this.$refs.keyword !== undefined ? this.$refs.keyword : []
        // const modal = document.querySelector('.ant-modal-wrap')
        if (this.keywordNodes.length > 0) {
          this.keywordNodes[this.activeNodeIndex].classList.add('active-bg')
        }
      })
    },
    handleScroll (type) {
      if (this.keywordNodes.length === 0) return
      this.keywordNodes[this.activeNodeIndex].classList.remove('active-bg')
      switch (type) {
        case 'pre':
          if (this.activeNodeIndex === 0) {
            this.activeNodeIndex = this.keywordNodes.length - 1
          } else {
            this.activeNodeIndex--
          }

          break;
        default:
          if (this.activeNodeIndex === this.keywordNodes.length - 1) {
            this.activeNodeIndex = 0
          } else {
            this.activeNodeIndex++
          }
          break;
      }
      this.keywordNodes[this.activeNodeIndex].classList.add('active-bg')
      this.keywordNodes[this.activeNodeIndex].scrollIntoView()
    }
  }
});

.highLight {
  font-size: 20px;
  color: #1d84f6;
  font-weight: bold;
}

.active-bg {
  background: #584d43;
  color: #c1ba7d;
}

.a-btn {
  margin-left: 6px;
}