정규 exec 신기!

정규 패턴 매 칭 법 exec 는 문자열 을 정확하게 수정 / 맞 추 는 데 도움 을 주 고 오류 의 확률 을 크게 줄 일 수 있 음 을 알 아야 합 니 다.
하나의 요 구 는 다음 과 같다. 즉, 큰 입력 상자 에 문안 을 쓴 다음 에 아래 의 작은 입력 상자 에 일치 하 는 문안 을 쓰 고 일치 하 는 문안 을 빨간색 으로 표시 하 는 것 이다.
여기 서 관건 은 어떻게 일치 하고 성공 적 으로 연결 하 느 냐 하 는 것 이다.
여기 서 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 = `${p}`;
                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("        ");
            }
        },
    }