需求：
需求是日志加载向上滑动滚动分页，并解析后端返回字符串中含有的特殊字符并替换成标签修改特殊字符包裹文本的样式
后端使用echo格式：
使用的命令如下：
echo -e "\033[30m 要修改样式的文本 \033[0m"
echo -e "\033[31m 要修改样式的文本 \033[0m"
echo -e "\033[32m 要修改样式的文本 \033[0m"
方法：正则匹配、替换
关键代码及注释:
- 常量定义：func.js
/**
* 处理日志字体高亮
*/
import {
isExist } from '@/utils/func';
/** 日志字体颜色
* 字颜色: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',
41: '#8B0000',
42: 'green',
43: 'yellow',
44: 'blue',
45: 'purple',
46: '#006400',
47: 'white',
};
// const startExpG = /\\033\[[4][0-9];[3][0-9]m/g;
// const startExp = /\\033\[[4][0-9];[3][0-9]m/;
// const endExpG = /\\033\[[0-9]m/g;
const startExpG = /\[[4][0-9];[3][0-9]m/g;
const startExp = /\[[4][0-9];[3][0-9]m/;
const endExpG = /\[[0-9]m/g;
export const testLogList = [
'2020-05-08 10:49:25.184 \u001b[47;34mDEBUG \u001b[0m --- [\n\n\n\n\n]',
'苹果含有丰富的糖类ERROR、\\033[45;36m维生素、微量元素ERROR\\033[0m以及水\n溶性食物纤维ERROR和有error机\\033[42;35m酸warning\\033[0m',
'苹果含有丰富\n的糖类、\n维生素ERROR、\\033[47;31m微量\\033[0m元素以及水溶性食物纤维和\\033[42;33m有机酸\\033[0m',
'苹果含有丰富的糖类、维生素success、微量元素以及水溶性食物纤维和\t有\t机\t酸',
'苹果含有丰富的糖类、维生素error、微量元素以及水溶性食物纤维和有机酸info',
];
export const handleLogData = (data = []) => {
const resultList = data.map((x) => {
let resultStr = x;
const matchList = resultStr.match(startExpG); // 拿到匹配到的数据字段(主要做颜色显示) \033[45;36m
if (isExist(matchList)) {
// 匹配到内容
matchList.forEach((matchItem) => {
const colorStr = matchItem.substring(4, 6); // 字体颜色
// const bgColorStr = matchItem.substring(1, 3); // 背景颜色
const bgColorStr = 42; // 背景颜色
// console.log('bgColorStr', bgColorStr);
// 开头-支持背景色
// const spanStr = `<span style="color:${colorObject[colorStr]};
// background-color:${backgroundColor[bgColorStr]};">`;
const spanStr = `<span style="color:${
colorObject[colorStr]}; background-color:${
backgroundColor[bgColorStr]}">`; // 开头-不支持背景色
resultStr = resultStr.replace(startExp, spanStr); // \033[0m
});
}
resultStr = resultStr.replace(endExpG, '</span>'); // 结尾
resultStr = resultStr.replace(/\\n/g, '</br>'); // 换行符
resultStr = resultStr.replace(/\\t/g, ' '); // tab健
return resultStr;
});
return resultList;
};
- 替换标签主要函数：_.js
handleData(data) {
const resultList = data.map((x) => {
let resultStr = x;
const matchList = resultStr.match(startExpG); // 拿到匹配到的数据字段(主要做颜色显示) \033[45;36m
if (isExist(matchList)) {
// 匹配到内容
matchList.forEach((matchItem) => {
const colorStr = matchItem.substring(8, 10); // 字体颜色
const bgColorStr = matchItem.substring(5, 7); // 背景颜色
// const spanStr = `<span style="color:${colorObject[colorStr]}; background-color:${backgroundColor[bgColorStr]};">`; // 开头-支持背景色
const spanStr = `<span style="color:${
colorObject[colorStr]};">`; // 开头-不支持背景色
resultStr = resultStr.replace(startExp, spanStr); // \033[0m
});
}
resultStr = resultStr.replace(endExpG, '</span>'); // 结尾
resultStr = resultStr.replace(/\n/g, '</br>'); // 换行符
resultStr = resultStr.replace(/\t/g, ' '); // tab健
console.log('resultStr', resultStr);
return resultStr;
});
console.log('resultStr', resultList);
/**
* ["苹果含有丰富的糖类ERROR、<span style="color:#006400;">维生素、微量…error机<span style="color:purple;">酸warning</span>", "苹果含有丰富</br>的糖类、</br>维生素ERROR、<span style="color:red;">微量</span>元素以及水溶性食物纤维和有机酸", "苹果含有丰富的糖类、维生素success、微量元素以及水溶性食物纤维和 &nb…nbsp; 机 酸", "苹果含有丰富的糖类、维生素error、微量元素以及水溶性食物纤维和有机酸info"]
*/
return resultList;
},
- 接着在获得数据或使用mock数据的地方调用handleData方法：
import {
handleLogData, testLogList } from './func';
const list = handleLogData(testLogList);
this.dataList = list;
- html（pug格式）
ul.listWrapper(
style='overflow:auto'
v-infinite-scroll='getLogDataList'
infinite-scroll-disabled='disabled'
infinite-scroll-distance=0
infinite-scroll-immediate=false
infinite-scroll-delay='500'
)
//- li.item(v-for='(item, index) in dataList' key={index}) {
{ item }}
li.item(v-for='(item, index) in dataList' key={
index})
div(v-html='item')
p(v-if='loading') 加载中...
p(v-if='!noMore && !loading && !loadError && dataList.length > 0' @click='getLogDataList').pointer 点击或下拉加载更多...
p(v-if='noMore') 没有更多了
p(v-if='loadError' @click='getLogDataList').pointer 加载失败,点击重新加载
- 效果：
