js-正则-前端搜索日志实现日志中两个特定字符串之前的内容高亮变色

本文介绍如何在前端实现日志搜索功能,当找到两个特定字符串时,高亮显示它们之前的内容。通过加载和解析日志,使用JavaScript、Vue.js和ES6来动态替换字符串并应用样式。示例代码和最终效果展示。
摘要由CSDN通过智能技术生成

需求: 前端搜索日志实现日志中两个特定字符串之前的内容高亮变色
首先我的这个需求是日志加载向上滑动滚动分页,并解析后端返回字符串中含有的特殊字符并替换成标签修改特殊字符包裹文本的样式,

后端数据中特殊字符使用的格式如下:
"前面随便\033[30m 中间要修改的文本黑色字 \033[0m后面随便"
"前面随便\033[31m 中间要修改的文本红色字 \033[0m后面随便"
"前面随便\033[32m 中间要修改的文本绿色字 \033[0m后面随便"

先看效果(测试中的mock数据):
在这里插入图片描述

上关键代码:

常量定义:

/** 日志字体颜色
 * 字颜色:30-----------39
30:黑
31:红
32:绿
33:黄
34:蓝色
35:紫色
36:深绿
37:白色
 */
const colorObject = {
   
  30: 'black',
  31: 'red',
  32: 'green',
  33: 'yellow',
  34: 'blue',
  35: 'purple',
  36: '#006400',
  37: 'white',
};

/**
 * 字背景颜色范围:40----49
40:黑
41:深红
42:绿
43:黄色
44:蓝色
45:紫色
46:深绿
47:白色
 */
const backgroundColor = {
   
  40: 'black'
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值