ctrl + f 搜索功能

代码预览（下方就是核心代码）

替换标签核心代码 参考网上例子 自己修改正则完成
解决vue搜索正则不匹配问题，目前改用匹配><标签中内容来简单实现ctrl + f 搜索功能
(实现方式采用 匹配文案 给文案加上标签 在通过dom节点scrollIntoView过去)

核心代码（功能代码都在sidebar页面）代码太多压缩成包放到资源了需要的咨询我私发

  const brightenKeyword = (val, keyword) => {
    const reg1 = new RegExp('(?<=>).*?(?=<)', 'g');
    if (val) {
      return val.replaceAll(reg1, function (me) {
        return me.replaceAll(keyword, `<em style="color: red;">${keyword}</em>`);
      });
    }
  };

主页面代码（注意content的样式设置）

<template>
  <div :class="prefixCls" ref="content" class="content" id="content">
    <div class="red box" id="red">red</div>
    <div class="green box" id="green">绿色</div>
    <div class="yellow box" id="yellow">绿色yellow</div>
    <div class="black box" id="black">black</div>
    <div class="gold box" id="gold">gold</div>
    <div class="blue box" id="blue">
      blue
      <input type="text" placeholder="wadaw" />
    </div>
  </div>
  <Sidebar />
</template>

<script lang="ts" setup>
  import { ref, onMounted, onUnmounted, nextTick, computed } from 'vue';
  import { useDesign } from '/@/hooks/web/useDesign';
  import Sidebar from './sidebar.vue';
  /**
   * data
   */
  const { prefixCls } = useDesign('anchorForm');
  const stepsList = ref([
    { name: '锚点1', status: 1, dom: 'red' },
    { name: '锚点2', status: 2, dom: 'green' },
    { name: '锚点3', status: 3, dom: 'yellow' },
    { name: '锚点4', status: 1, dom: 'black' },
    { name: '锚点5', status: 2, dom: 'gold' },
  ]);

  /**
   * methods
   */
</script>
<style lang="less" scoped>
  @prefix-cls: ~'@{namespace}-anchorForm';

  #content {
    height: calc(100vh - 78px);
    overflow-y: auto;
    background: #f3f3f3;
  }
  .@{prefix-cls} {
    .box {
      width: 95%;
      min-height: 451px;
      background: #ffffff;
      border-radius: 4px;
      margin: 16px 24px;
      font-size: 40px;
      text-align: center;
    }
  }
</style>