replace()的日常使用

在项目中经常使用到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'
})