先上图
首先感谢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(() => {
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);
};