<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> </head> <body> <textarea id="code"></textarea> <div id="result"></div> <script> $(function() { $(‘#code‘).on(‘input‘,(e) => { let val = e.currentTarget.value // for val = val.replace(/wx:for=["|‘]\s*\{\{([^\}]+)\}\}\s*["|‘]/g, ($0,$1) => ‘v-for="(item, index) in ‘ + $1 + ‘"‘) val = val.replace(/wx:key=["|‘]([^"|‘]+)["|‘]/g, ($0,$1) => ‘:key="‘ + $1 + ‘"‘) // if val = val.replace(/wx:if=["|‘]\s*\{\{([^\}]+)\}\}\s*["|‘]/g, ($0, $1) => ‘v-if="‘ + $1 + ‘"‘) // 变量 // val = val.replace(/data-([^=|\s]+)=["|‘]\{\{([^\}]+)\}\}["|‘]/g, ($0,$1,$2)=> ‘:data-‘+$1+‘="‘+$2+‘"‘) val = val.replace(/([^\s|=]+)=["|‘]\{\{([^\}]+)\}\}["|‘]/g, ($0,$1,$2)=> ‘:‘+$1+‘="‘+$2+‘"‘) val = val.replace(/<view/g, ‘<div‘) val = val.replace(/\/view>/g, ‘\/div>‘) val = val.replace(/<text/g, ‘<span‘) val = val.replace(/\/text>/g, ‘\/text>‘) val = val.replace(/<image([^>]+)/g, ($0,$1) => ‘<img ‘+$1 + ‘/>‘) val = val.replace(/<icon([^>]+)/g, ($0,$1) => ‘<i style="display:inline-block" ‘+$1 + ‘/>‘) val = val.replace(/bind([^=|\s]+)=["|‘]([^"|‘|\s]+)["|‘]/g, ($0,$1,$2)=>‘@‘+$1+‘="‘+$2+‘"‘) $(‘#result‘).text(val) }) }) </script> </body> </html>