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

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

后端数据中特殊字符使用的格式如下：
"前面随便\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',
  41: '#8B0000',
  42: 'green',
  43: 'yellow',
  44: 'blue',
  45: 'purple',
  46: '#006400',
  47: 'white',
};

const testList = [
  '苹果含有丰富的糖类ERROR、\\033[45;36m维生素、微量元素ERROR\\033[0m以及水\n溶性食物纤维ERROR和有error机\\033[42;35m酸warning\\033[0m',
  '苹果含有丰富\n的糖类、\n维生素ERROR、\\033[47;31m微量\\033[0m元素以及水溶性食物纤维和有机酸',
  '苹果含有丰富的糖类、维生素success、微量元素以及水溶性食物纤维和\t有\t机\t酸',
  '苹果含有丰富的糖类、维生素error、微量元素以及水溶性食物纤维和有机酸info',
];

/**
 * echo格式： \033[45;36m这里是要改变样式的文本\033[0m
 * \033表示特定字符开始
 * '[47;',47表示背景某种颜色
 * 31m,31代表字体的某种颜色
 * \033[0m 代表特殊字符结束
 */

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; // 全局找到特殊字符结束的位置

替换标签主要函数

    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, '&nbsp;&nbsp;&nbsp;&nbsp;'); // 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、微量元素以及水溶性食物纤维和&nbsp;&nbsp;&nb…nbsp;&nbsp;&nbsp;&nbsp;机&nbsp;&nbsp;&nbsp;&nbsp;酸", "苹果含有丰富的糖类、维生素error、微量元素以及水溶性食物纤维和有机酸info"]
       */
      return resultList;
    },

接着在获得数据或使用mock数据的地方调用handleData方法：

      const list = this.handleData(testList);
      this.dataList = list;

html使用的pug格式，如果可自行修改为h5标签格式

      li.item(v-for='(item, index) in dataList' key={index})
        div(v-html='item')

如此便实现了在粗略的特殊字符替换标签并根据要求修改样式的功能了，效果如下：

后续再跟进优化