javascript - 這個(gè)正則表達(dá)式為什么總是只能替換掉一個(gè)字符串??
問題描述
我是想把雙大括號(hào)里的包括字符串替換成真正的值,但是總是只能替換掉一個(gè),不知道為什么?
var tpl = ’/cube_xinbao_dial_result/{{report_type}}/{{query}}’;var data = {report_type:1, query: ’2323’}function render(tpl, data){ var re = /{{([^}]+)?}}/g; var match = ’’; while(match = re.exec(tpl)){tpl = tpl.replace(match[0],data[match[1]]); } return tpl;}console.log(render(tpl,data));
問題解答
回答1:ad
回答2:String.replace 也支持正則表達(dá)式當(dāng)作參數(shù)哦,給你改寫了一下
var tpl = ’/cube_xinbao_dial_result/{{report_type}}/{{query}}’;var data = {report_type:1, query: ’2323’}function render(tpl, data){ var re = /{{([^}]+)?}}/g; return tpl.replace(re, function($0, $1, $2){if( $1 in data ){ return data[$1];}else{ return '[DATA.'+ $1.toUpperCase() + ']'; //如果沒有,提示標(biāo)簽錯(cuò)誤} });}console.log(render(tpl,data));/* /cube_xinbao_dial_result/1/2323*/console.log(render(tpl,{query:1234}));/* /cube_xinbao_dial_result/[DATA.REPORT_TYPE]/1234*/
如果執(zhí)意要使用你原來的方式,需要取消掉全局參數(shù)g
var tpl = ’/cube_xinbao_dial_result/{{report_type}}/{{query}}’;var data = {report_type:1, query: ’2323’}function render(tpl, data){ var re = /{{([^}]+)?}}/; //不要全局匹配就可以 var match = ’’; while(match = re.exec(tpl)){tpl = tpl.replace(match[0],data[match[1]]); } return tpl;}console.log(render(tpl,data));/* /cube_xinbao_dial_result/1/2323*/回答3:
RegExp對(duì)象,有個(gè)屬性,lastIndex,代表一個(gè)整數(shù),標(biāo)示開始下一次匹配的字符位置。。當(dāng)exec第一次執(zhí)行成功后,lastIndex為匹配項(xiàng)位置+1。正因?yàn)檫@樣,再次調(diào)用才會(huì)會(huì)獲得下一個(gè)匹配項(xiàng)。回到你這個(gè)例子,第一次循環(huán)后,re的lastIndex為40,而此時(shí)tpl變?yōu)榱藅pl='/cube_xinbao_dial_result/1/{{query}}'顯然你要匹配的query的位置是在40之前的,所以再次匹配時(shí)失敗,exec返回null,循環(huán)跳出。
回答4:var tpl = ’/cube_xinbao_dial_result/{{report_type}}/{{query}}’;var data = {report_type:1, query: ’223’}function render(tpl, data){ var re = /{{([^}]+)?}}/g; var tpl2=tpl; tpl.match(re).forEach(function (val) {tpl2= tpl2.replace(val,data[val.substring(2,val.length-2)]); }); return tpl2;}console.log(render(tpl,data));
輸出結(jié)果
/cube_xinbao_dial_result/1/223
相關(guān)文章:
1. css - 新手做響應(yīng)式布局, 斷點(diǎn)過后右側(cè)出現(xiàn)空白,求幫助,謝謝。2. javascript - 關(guān)于<a>元素與<input>元素的JS事件運(yùn)行問題3. javascript - ES6 中能否把 class 屬性 方法 分文件?4. python - 能通過CAN控制一部普通的家用轎車嗎?5. mysql - 查詢字段做了索引為什么不起效,還有查詢一個(gè)月的時(shí)候數(shù)據(jù)都是全部出來的,如果分拆3次的話就沒問題,為什么呢。6. mysql - 記得以前在哪里看過一個(gè)估算時(shí)間的網(wǎng)站7. ID主鍵不是自增的嗎 為什么還要加null8. 大家好,我想請(qǐng)問一下怎么做搜索欄能夠搜索到自己網(wǎng)站的內(nèi)容。9. MySQL中的enum類型有什么優(yōu)點(diǎn)?10. css - 關(guān)于border-image
