正则的模式匹配法exec，必须了解，帮助你精准地去修改/拼接字符串，并且可以大大帮助你减少出错的概率。

一个需求，效果如下，即先在大输入框里写文案，然后在下面的小输入框里写上你要匹配的文案，把匹配到的文案标红。

我的影片.gif

这里的关键就在于，如何匹配到，并且成功拼接。

此处省略100字，上关键代码：（FYI，在vue框架中处理的）

    data () {
        return {
            processIdx: 0, // 记录一开始的位置
            reg: "", // 输入的正则
            r: "", // 最后显示带颜色的字符串
            res: [], // 每次匹配的结果
            sample: "", // 存放与原始文本相同的文本，避免改变原始字符串
        }
    }

  methods: {
        initProcess() { // 每次点击验证，都需要重置
            this.processIdx = 0;
            this.reg = "";
            this.r = "";
            this.res = [];
            this.sample = "";
        },
        processText() { 
            // 「关键方法」「关键方法」「关键方法」：处理文本颜色，
            //  就是利用正则的exec方法，每次都会改变index和lastIndex值。
            this.res = this.reg.exec(this.form.sample);
            if (!this.res) {
                this.r += this.sample.slice(this.processIdx);
                this.vHtml4Model = this.r;
            } else {
                this.r += this.sample.slice(this.processIdx, this.res.index);
                let p = this.sample.slice(this.res.index, this.reg.lastIndex);
                p = `<span style="color:red">${p}</span>`;
                this.r += p;
                this.processIdx = this.reg.lastIndex;
                this.processText(); // 递归调用
            }
        },
        matchReg() { // 点击“验证”按钮的时候调用的方法
            this.initProcess();
            if (!this.form.sample) return this.$message("请输入日志样例");
            if (this.regExpression) {
                this.showSampleInput = false; // 无关代码，可忽略
                this.showSampleText = true; // 无关代码，可忽略
                this.reg = new RegExp(this.regExpression, "g");
                this.sample = this.form.sample.toString();
                this.processText();
            } else {
                this.$message("请输入正则表达式");
            }
        },
    }