在项目中经常使用到replace，也只限于对字符中的一些替换，还没到彻底掌握，今天无意在html的数据模版实现中，看到对replace配合正则来替换，才发现原来还可以这样用的。我决定要深究一下它的API的使用技巧。
String.prototype.replace()
方法并不改变调用它的字符串本身，而只是返回一个新的替换后的字符串。
str.replace(regexp|substr, newSubStr|function)
从语法中，可以看到可以使用正则或字符来匹配，后面匹配内容可以是字符也可以是函数。能连系到正则都精妙的实现一些效果。
全局搜索需加g，忽略大小写需加i
简单例子：
newTitle = "I like you".replace(/you/, "him")
console.log(newTitle)
// I like him
// $1、$2、...、$99 与 regexp 中的第 1 到第 99 个子表达式相匹配的文本
var re = /(\w+)-(\w+)-(\w+)-(\w+)/;
var str = "a-b-c-d";
var newStr = str.replace(re, "$4+$3+$2+$1");
console.log(newStr);
// d+c+b+a
name = '"a", "b"';
newName = name.replace(/"([^"]*)"/g, "'$1'");
console.log(newName)
// "'a', 'b'"
函数使用：
function styleHyphenFormat(propertyName) {
function upperToHyphenLower(match) {
// match匹配的子串
return '-' + match.toLowerCase();
}
return propertyName.replace(/[A-Z]/g, upperToHyphenLower);
}
var style = styleHyphenFormat("marginTop")
console.log(style)
// margin-top
错误方法：
var newString = propertyName.replace(/[A-Z]/g, '-' + '$&'.toLowerCase());
这是因为 '$&'.toLowerCase() 会先被解析成字符串字面量（这会导致相同的'$&')而不是当作一个模式。
MDN上一个有意思的例子，replace也可像循环那样使用
var str = 'x-x_';
var retArr = [];
str.replace(/(x_*)|(-)/g, function(match, p1, p2) {
if (p1) { retArr.push({ on: true, length: p1.length }); }
if (p2) { retArr.push({ on: false, length: 1 }); }
});
console.log(retArr);
// [{...}{...}{...}]
简单字符串模版使用
直接使用字符串进行正则替换。但是无法处理循环语句和 if / else 判断这些
// {{}} 包裹
const template = (
'<div class="toast">' +
'<div class="msg">{{text}}</div>' +
'<div class="icon {{iconClass}}"></div>' +
'</div>'
)
// 正则匹配{{}}替换
function templateEngine(source, data) {
if (!data) {
return source
}
return source.replace(/{{([^}}]+)?}}/g, function (match, key) {
return data[key] ? data[key] : ''
})
}
// 方法调用
document.querySelector('body').innerHTML = templateEngine(template, {
text: '提示',
iconClass: 'info'
})
