正規表現がマッチしない。ほかのjavascriptのサイトでは問題なく動くのに。

実現したいこと

正規表現がnull値になってしまう。jsfiddleやpaiza.ioでは動くのに....
３４行目に入りません
(成功例では30行目です。)

前提

ここに質問の内容を詳しく書いてください。

発生している問題・エラーメッセージ

エラーメッセージ null値

該当のソースコード

JavaScript
1ソースコード
2            const regexpID = /\{\$id:(.+)\}/;
3            const regexpCLS = /\{\$cls:(.+)\[?(\d*)\]?\}\{/;
4            const regexpTAG = /\{\$tag:([A-Z]+)\[?(\d*)\]?\}/;
5            var u = 0;
6            var oneCanvas = {};
7            if(window.parent.document.getElementById("_customize-input-my_control"))
8            oneCanvas.value = window.parent.document.getElementById("_customize-input-my_control").value;// 修正必要
9            console.log("initCanvasField Onecanvas" + oneCanvas.value);
10            // 上記に対してCANVASタグを追加する
11            //まず対象を取得する
12            //if(oneCanvas !== null || oneCanvas !== undefined || oneCanvas !== ""){
13                if(oneCanvas.value !== null && oneCanvas.value !== ""){
14                    if(oneCanvas.value.includes("=>"))
15                    arrPathCanvas = oneCanvas.value.split("=>");// 一つ一つの親子要素について配列順に入れなおす
16                    else
17                    arrPathCanvas = [oneCanvas.value];
18                    var candyElements;
19                    if(arrPathCanvas !== []){
20                        for(var q = 0; q < arrPathCanvas.length; q++){
21                            var idMatch = regexpID.exec(arrPathCanvas[q]);
22                            console.log("arrPathCanvas: " + arrPathCanvas);
23                            var matchStr = arrPathCanvas[q];
24                            console.log(typeof arrPathCanvas[q]);
25                            console.log("matchStr" + matchStr);
26                            var clsMatch = regexpCLS.exec(matchStr);
27                            console.log("clsMatch : " + clsMatch);
28                            var tagMatch = regexpTAG.exec(arrPathCanvas[q]);
29                            if(idMatch)
30                            {
31                                let idWord = regexpID.exec(arrPathCanvas[q]);
32                                targetElem = document.getElementById(idWord[1]);// 正規表現の二つ目の要素が()に入っている値を取得
33                            }
34                            if(clsMatch){ // ココに入らない
35                                console.log("classにはいったよ!");
36                                clsMatch = clsMatch[1].split(' ');
37
38                                for(var i = 0; i < clsMatch.length; i++){
39                                    console.log(" clsMatch "+clsMatch[i]);
40                                    if(clsMatch !== ""){
41                               
42                                    }
43                                }
44                            }
45                            //if(q !== arrPathCanvas.length){
46                                if(tagMatch){
47
48                                    var arrTagName = [];
49                                    var remaingIndex = 0;
50
51                                    //if(tagMatch.indexOf("IMG")){
52                                    //    break;
53                                    //}else{
54                                    /*for(var v = q; v < arrPathCanvas.length; v++)
55                                    { // タグの配列に直す
56                                        // 正規表現でタグ名取得する
57                                        arrTagName[remaingIndex] = arrPathCanvas[v];
58                                        remaingIndex++;
59                                    }*/
60                                    targetElem = targetTAGChildParser(targetElem, arrTagName, "IMG");
61                                    //targetElem = targetTAGParentParser(targetElem, arrTagName, "IMG");
62                                
63                                    //}
64
65                                targetROOT = arrPathCanvas[q+1];// 次の子の要素をセット　この時にtargetElemには目的の子要素までの実際の要素が入っている
66                                }   
67                            //}
68                        }
69                    }
70                }else{
71                    console.log("active_pre_process Match Error");
72
73                }
74コード

試したこと

下記のソースコードで実行しましたがマッチします。

javascript
1            const regexpID = /\{\$id:(.+)\}/;
2            const regexpCLS = /\{\$cls:(.+)\[?(\d*)\]?\}\{/;
3            const regexpTAG = /\{\$tag:([A-Z]+)\[?(\d*)\]?\}/;
4            var u = 0;
5            var oneCanvas = {};
6            
7            oneCanvas.value = "{$cls:wp-block-image size-large}{$tag:FIGURE}=>{$tag:IMG}"// 修正必要
8            console.log("initCanvasField Onecanvas" + oneCanvas);
9            // 上記に対してCANVASタグを追加する
10            //まず対象を取得する
11            //if(oneCanvas !== null || oneCanvas !== undefined || oneCanvas !== ""){
12                if(oneCanvas.value !== null && oneCanvas.value !== "" && oneCanvas.value.includes("=>")){
13                    arrPathCanvas = oneCanvas.value.split("=>");// 一つ一つの親子要素について配列順に入れなおす
14                    var candyElements;
15                    if(arrPathCanvas !== []){
16                        for(var q = 0; q < arrPathCanvas.length; q++){
17                            var idMatch = regexpID.exec(arrPathCanvas[q]);
18                            console.log("arrPathCanvas: " + arrPathCanvas);
19                            var matchStr = arrPathCanvas[q];
20                            console.log(typeof arrPathCanvas[q]);
21                            console.log("matchStr" + matchStr);
22                            var clsMatch = regexpCLS.exec(matchStr);
23                            console.log("clsMatch : " + clsMatch);
24                            var tagMatch = regexpTAG.exec(arrPathCanvas[q]);
25                            if(idMatch)
26                            {
27                                let idWord = regexpID.exec(arrPathCanvas[q]);
28                                targetElem = document.getElementById(idWord[1]);// 正規表現の二つ目の要素が()に入っている値を取得
29                            }
30                            if(clsMatch){
31                                console.log("classにはいったよ!");
32                                clsMatch = clsMatch[1].split(' ');
33
34                                for(var i = 0; i < clsMatch.length; i++){
35                                    console.log(" clsMatch "+clsMatch[i]);
36                                    if(clsMatch !== ""){
37                               
38                                    }
39                                }
40                            }
41                            //if(q !== arrPathCanvas.length){
42                                if(tagMatch){
43
44                                    var arrTagName = [];
45                                    var remaingIndex = 0;
46
47                                    //if(tagMatch.indexOf("IMG")){
48                                    //    break;
49                                    //}else{
50                                    /*for(var v = q; v < arrPathCanvas.length; v++)
51                                    { // タグの配列に直す
52                                        // 正規表現でタグ名取得する
53                                        arrTagName[remaingIndex] = arrPathCanvas[v];
54                                        remaingIndex++;
55                                    }*/
56                                    //targetElem = targetTAGChildParser(targetElem, arrTagName, "IMG");
57                                    //targetElem = targetTAGParentParser(targetElem, arrTagName, "IMG");
58                                
59                                    //}
60
61                                targetROOT = arrPathCanvas[q+1];// 次の子の要素をセット　この時にtargetElemには目的の子要素までの実際の要素が入っている
62                                }   
63                            //}
64                        }
65                    }
66                }else{
67                    console.log("active_pre_process Match Error");
68
69                }