highlight.js 实现搜索关键词高亮效果 ,显示匹配数量及切换显示功能

news/2025/2/16 5:58:58/

先看效果：
在这里插入图片描述
更新：增加切换显示
在这里插入图片描述

折腾了老半天，记录一下
注意事项都写注释了
代码：

<template><div class="absolute-lt wh-full overflow-hidden p-10"><div style="width: 200px"><el-input v-model="keyword" @input="search"></el-input></div><code><pre v-html="html"></pre></code></div>
</template>
<script setup>
import { onMounted, computed, reactive, ref } from "vue";
import hljs from "highlight.js";
// 这不引入样式防止干扰高亮显示
// import "highlight.js/styles/arta.css";
const str = `
Server: cloudflare
Date: Tue, 02 Jan 2024 15:40:15 GMT
Content-Type: text/html
Content-Length:  553
Connection: keep
CF-RAY: 83f419748811fa1a-SJC<html>
<head><title>403 Forbidden</title></head>
<body>
<center><h1>403 Forbidden</h1></center>
<hr><center>cloudflare</center>
</body>
</html>
<!-- a padding to disable MSIE and Chrome friendly error page -->
<!-- a padding to disable MSIE and Chrome friendly error page -->
<!-- a padding to disable MSIE and Chrome friendly error page -->
<!-- a padding to disable MSIE and Chrome friendly error page -->
<!-- a padding to disable MSIE and Chrome friendly error page -->
<!-- a padding to disable MSIE and Chrome friendly error page -->`;
const html = ref("");
const keyword = ref("");
let saveValue = ref("");// 注册自定义语言，防止生成多余标签匹配
hljs.registerLanguage("custom", function () {return {};
});
html.value = saveValue.value = hljs.highlight(str, { language: "custom" }).value;function search() {if (!keyword.value) return (html.value = saveValue.value);let reg = new RegExp(keyword.value, "g", "i");html.value = saveValue.value.replace(reg,"<span class='abc'> " + keyword.value + " </span>");
}
</script><style lang="less">
span.abc {color: red;
}
</style>

更新后代码：

<template><div class="absolute-lt wh-full overflow-hidden p-10"><!-- <code><pre>{{ str }}</pre></code> --><!-- <pre><code>{{ str }}</code></pre> --><div class="flex"><div style="width: 200px"><el-input v-model="keyword" @input="search"></el-input></div><div>{{ cur }}/{{ total }}</div><div><el-button @click="pre">上一个</el-button><el-button @click="next">下一个</el-button></div></div><div class="box"><code><pre v-html="html"></pre></code></div></div>
</template>
<script setup>
import { onMounted, computed, reactive, ref } from "vue";
import hljs from "highlight.js";
// import "highlight.js/styles/arta.css";
const str = `
Server: cloudflare
Date: Tue, 02 Jan 2024 15:40:15 GMT
Content-Type: text/html
Content-Length:  553
Connection: keep
CF-RAY: 83f419748811fa1a-SJC<html>
<head><title>403 Forbidden</title></head>
<body>
<center><h1>403 Forbidden</h1></center>
<hr><center>cloudflare</center>
</body>
</html>
<!-- a padding to disable MSIE and Chrome friendly error page -->
<!-- a padding to disable MSIE and Chrome friendly error page -->
<!-- a padding to disable MSIE and Chrome friendly error page -->
<!-- a padding to disable MSIE and Chrome friendly error page -->
<!-- a padding to disable MSIE and Chrome friendly error page -->
<!-- a padding to disable MSIE and Chrome friendly error page -->
Server: cloudflare
Date: Tue, 02 Jan 2024 15:40:15 GMT
Content-Type: text/html
Content-Length:  553
Connection: keep
CF-RAY: 83f419748811fa1a-SJC<html>
<head><title>403 Forbidden</title></head>
<body>
<center><h1>403 Forbidden</h1></center>
<hr><center>cloudflare</center>
</body>
</html>
<!-- a padding to disable MSIE and Chrome friendly error page -->
<!-- a padding to disable MSIE and Chrome friendly error page -->
<!-- a padding to disable MSIE and Chrome friendly error page -->
<!-- a padding to disable MSIE and Chrome friendly error page -->
<!-- a padding to disable MSIE and Chrome friendly error page -->
<!-- a padding to disable MSIE and Chrome friendly error page -->Server: cloudflare
Date: Tue, 02 Jan 2024 15:40:15 GMT
Content-Type: text/html
Content-Length:  553
Connection: keep
CF-RAY: 83f419748811fa1a-SJC<html>
<head><title>403 Forbidden</title></head>
<body>
<center><h1>403 Forbidden</h1></center>
<hr><center>cloudflare</center>
</body>
</html>
<!-- a padding to disable MSIE and Chrome friendly error page -->
<!-- a padding to disable MSIE and Chrome friendly error page -->
<!-- a padding to disable MSIE and Chrome friendly error page -->
<!-- a padding to disable MSIE and Chrome friendly error page -->
<!-- a padding to disable MSIE and Chrome friendly error page -->
<!-- a padding to disable MSIE and Chrome friendly error page -->
`;
const html = ref("");
const keyword = ref("");
let saveValue = ref("");
let total = ref(0);
let cur = ref(0);
let nodeList = ref([]);hljs.registerLanguage("custom", function () {return {};
});
html.value = saveValue.value = hljs.highlight(str, { language: "custom" }).value;
// html.value = saveValue.value = hljs.highlightAuto(str).value;
window.hljs = hljs;
function search() {if (!keyword.value) return (html.value = saveValue.value);let reg = new RegExp(keyword.value, "g", "i");html.value = saveValue.value.replace(reg,"<span class='abc'>" + keyword.value + "</span>");count();
}
function pre() {if (cur.value <= 0) {cur.value = 0;} else {cur.value--;}scorll();
}
function scorll() {for (let index = 0; index < nodeList.value.length; index++) {const element = nodeList.value[index];element.style = index == cur.value ? "color:blue" : "color:red";}let box = document.querySelector(".box");let top = nodeList.value[cur.value].offsetTop;let offset = nodeList.value[0].offsetTop;box.scrollTop = top - offset;
}
function next() {if (cur.value >= nodeList.value.length) {cur.value = nodeList.value.length;} else {cur.value++;}scorll();
}function count() {setTimeout(() => {nodeList.value = document.querySelectorAll("span.abc");total.value = nodeList.value.length;nodeList.value[cur.value].style = "color:blue";}, 300);
}
</script><style lang="less">
span.abc {color: red;
}
.box {height: 300px;overflow-y: auto;
}
</style>

http://www.ppmy.cn/news/1300940.html

相关文章

【网络安全】Nessus部署自动更新和端口权限开放

【网络安全】Nessus部署自动更新和端口权限开放

文章目录 Nessus 自动更新配置Nessus服务端口开放Nessus profession 版本需要开放端口Sensor ProxyTenable Security Center (TSC)Tenable OT Security (TOT)Tenable OT Security Enterprise Manager (IEM)Tenable OT Security Industrial Core Platform (ICP)Tenable OT Secur…
阅读更多...
ES6（一部分）未完...

ES6（一部分）未完...

文章目录 ES61.ES6 let声明变量2.ES6 const声明常量3.变量解构赋值3-1解构对象3-2解构数组3-3字符串解构 4.模板字符串5.字符串扩展5-1 include函数5-2 repeat函数&#xff08;重复&#xff09; 6.数值扩展6-1二进制和八进制表示法6-2isFinite 与 isNaN方法6-3islnteger方法6-4…
阅读更多...
算法篇：动态规划I

算法篇：动态规划I

声明&#xff1a;若未特殊标出&#xff0c;则默认是leedcode原题。 1、1137.第N个泰波那契数列&#xff1a; ①状态表示&#xff1a;dp[i]表示&#xff1a;第i个泰波那契数的值。 ②状态转移方程&#xff1a;以i位置的状态&#xff0c;最近的一步&#xff0c;来划分问题&#…
阅读更多...
k8s源码阅读环境配置

k8s源码阅读环境配置

源码阅读环境配置 k8s代码的阅读可以让我们更加深刻的理解k8s各组件的工作原理&#xff0c;同时提升我们Go编程能力。 IDE使用Goland&#xff0c;代码阅读环境需要进行如下配置&#xff1a; 从github上下载代码&#xff1a;https://github.com/kubernetes/kubernetes在GOPATH目…
阅读更多...
以太坊开发者会议回顾：坎昆升级、硬分叉与布拉格

以太坊开发者会议回顾：坎昆升级、硬分叉与布拉格

作者&#xff1a;Christine Kim Galaxy研究副总裁 编译&#xff1a;秦晋 碳链价值 2024年1月4日&#xff0c;以太坊开发人员齐聚Zoom for All Core Developers Execution (ACDE) Call #178 上。ACDE电话会议通常由以太坊基金会协议负责人Tim Beiko主持&#xff0c;是一个开发人…
阅读更多...
postgresql 流复制相关参数及影响

postgresql 流复制相关参数及影响

修改流复制相关的参数&#xff0c;测试影响 wal_level wal日志级别&#xff0c;这个参数决定了有多少信息写入wal日志&#xff0c;默认是replica。&#xff08;TDSQL-PG 默认是 logical minimal&#xff1a;除了实例crash恢复需要的记录&#xff0c;其他不记录&#xff0c;比…
阅读更多...
Js使用ffmpeg在视频中合成音频背景音乐

Js使用ffmpeg在视频中合成音频背景音乐

Js使用ffmpeg在视频中合成音频背景音乐 ffmpeg 使用场景是需要在web端对视频的背景音乐进行混音合成。 注意: 以下所有的使用案例均基于vue3 setup。 同时由于ffmpeg版本不同会导致使用的api不同&#xff0c;使用案例前需要注意ffmpeg版本问题。 如果使用的是0.12需要使用…
阅读更多...
内容分发功能升级！一站式搞定文案生成/违规检测/一键分发全流程

内容分发功能升级！一站式搞定文案生成/违规检测/一键分发全流程

随着社交媒体的不断发展&#xff0c;越来越多的企业开始布局新媒体矩阵&#xff0c;从集团总部到区域门店、个人销售&#xff0c;从全品类到细分垂直类目、从单一平台到多平台&#xff0c;试图让品牌影响力覆盖更广泛群体&#xff0c; 当然&#xff0c;随之而来的&#xff0c;如…
阅读更多...
最新文章

Copyright @ 2022~2023