VUE动态数据绑定（正则解析）

我们需要有一个对象，将DOM节点和对应的数据一一映射起来。
以此来达到修改DOM相关的任意一个属性的时候，只修改它所对应的节点。而不是去渲染更新整个DOM。

<p>姓名：{{name}}，年龄:{{age}}</p>

p标签中的姓名：{{name}}，年龄:{{age}}是一个文本节点。在进行节点对象构建时，需将这个文本节点拆分成多个，以此来达到精确匹配。举个栗子，上面的这个文本节点需要拆分成 [“姓名：”，“name”,"年龄"，“age”].
我们通过正则来实现这一需求。

• 首先列举出JavaScript RegExp 对象中的几个方法：

test()  //检索字符串中的指定值。返回值是 true 或 false。
exec() // 检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配，则返回 null。
compile()  //可以改变检索模式，也可以添加或删除第二个参数。

• 具体代码如下。主要思路是通过RegExp对象的exec方法进行全文检索。

<script type="text/javascript">
           // 姓名：{{user.name}}，年龄：{{user.age}}
           var pendingText = "姓名：{{user.name}}，年龄：{{user.age}}"
           function parseText(pendingText){
               var collection=[];
               var searchTxt="";
               var targetTxt = "";
               var stringLength=0,lastIndex=0,curIndex=0;
               var reg =/\{\{(.+?)\}\}/g;
               
                if(!reg.test(pendingText)){
                   throw new Error("未匹配");
                }else{
                   reg.lastIndex=0;
                 while( tempR = reg.exec(pendingText))
                   {
                     curIndex = reg.lastIndex;
                     searchTxt=tempR[0];
                     stringLength=searchTxt.length;
                     collection.push(pendingText.slice(lastIndex,curIndex-stringLength));
                     targetTxt=tempR[1];
                     collection.push(targetTxt);
                     lastIndex=curIndex;
                   }
                }
                console.log(collection);
           }
           parseText(pendingText);
       </script>