需要正則解析的div ``` <div id="app"> <span v-bind:title="message" v-bind:dat-myXX="message" v-bind:data-myXX="pData"> {{ message }} </span> <p>{{ pData}}</p> <p>{{ message}}</p> <p>{{ pData}}</p> </div> ``` ``` var app = new Vue({ el: '#app', data: { message: '這是message', pData: '這是pData' } }) function Vue (option) { var context = document.querySelector(option.el); var data = option.data; var html = context.innerHTML; var regex = /(\{\{\s*([\w]+)\s*\}\})/g; while (regex.exec(html)) { // 要替換的內容 var value = data[RegExp.$2]; var len = RegExp.$1.length; // g全局替換提高性能 ({{}} 里面內容一致會同時一次全部替換掉, // 里面變量兩邊空格不一致會認為是兩個,就要等到循環 // 到它的位置才會替換) html = html.replace(new RegExp(RegExp.$1,'g'), value); // g全局 regex.lastIndex -= len - value.length; } regex = /(v-bind:(\w+)=\"(\w+)\")/g; while (regex.exec(html)) { var value = RegExp.$2+"=\""+data[RegExp.$3]+"\""; var len = RegExp.$1.length; html = html.replace(new RegExp(RegExp.$1,'g') ,value); regex.lastIndex -= len - value.length; } console.log(html) context.innerHTML = html; } ```