Vue3实现Ctrl+F模拟效果

先上图

首先感谢CSDN博主@在《html页面调用ctrl f,javascript实现浏览器Ctrl+F页面搜索功能》文章中提供的解决思路

script代码如下

<input v-model="input" />
<button @click="searchKeyword"></button>


import { ref, onMounted } from "vue";
let input = ref("");
let content = ref(null);

onMounted(() => {
    //不加计时器反而还无法挂载成功，
    //求大佬解释
    setTimeout(() => {
        //这一步将要实现ctrl+f搜索的文本赋值给content
        content.value = document.getElementsByTagName("code")[0].innerHTML;
    }, 1000);
}); 
//定义的searchKeyword点击事件
const searchKeyword = () => {
    //输出以下输入的值，看看自己输入正确没
    console.log(input.value);
    if (input.value == "") {
        return;
    }
    //开始启用正则
    //var 变量 = new RegExp("正则表达式", "匹配模式");
    //g 全局匹配模式。这里的 g 指的是 global
    let reg = new RegExp(input.value, "g");
    //重点在这
    //将匹配出的地方替换成加了个class的span标签的${input.value}
    //然后再将这replace过的innerHTML赋值给newContent
    let newContent = content.value.replace(reg, `<span class="sir_ThisWay" style="color: red;font-size: 20px;animation: sir_ThisWay_ComeHere 2s;">${input.value}</span>`);
    //然后再将原文替换成newContent的innerHTML，，emmm好像这一步有点多余
    document.getElementsByTagName("code")[0].innerHTML = newContent;
    //定位替换元素span的class
    let X = document.getElementsByClassName("sir_ThisWay")[0].offsetLeft;
    let Y = document.getElementsByClassName("sir_ThisWay")[0].offsetTop-200;
    //然后滚动到那个地方
    //这个document.getElementsByClassName("right-content")[0]
    //替换成自己要滚动的元素
    document.getElementsByClassName("right-content")[0].scrollTo(X, Y);
};

 在vue3中写原生，哈哈哈