需求: 前端搜索日志实现日志中两个特定字符串之前的内容高亮变色
首先我的这个需求是日志加载向上滑动滚动分页,并解析后端返回字符串中含有的特殊字符并替换成标签修改特殊字符包裹文本的样式,
后端数据中特殊字符使用的格式如下:
"前面随便\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'