js-regular-front-end search log implementation The content before two specific strings in the log is highlighted and discolored

Requirements: The front-end search log realizes the highlighting and discoloration of the content before two specific strings in the log.
First of all, my requirement is to load the log and slide it upward to scroll the page, and parse the special characters contained in the string returned by the back-end and replace them with tags to modify the special characters. The style of character wrapped text,

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

Let’s look at the effect first (mock data in test):

Key code:

Constant definition:

/** 日志字体颜色
 * 字颜色: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; // 全局找到特殊字符结束的位置

Replace tag main function

    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;
    },

Then call the handleData method where data is obtained or mock data is used:

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

The pug format used by html, if you can modify it to h5 tag format yourself

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

In this way, the function of replacing labels with rough special characters and modifying the style according to requirements is realized. The effect is as follows:

Follow up and optimize later.