replace之正则和回调函数

Posted 2021-09-16 feng

普通用法

字符串.replace(\'被替换的字符\', 替换的字符)
如：

\'abcabcabc\'.replace(\'a\', \'h\') // hbcabcabc

正则表达式替换

\'abcabcabc\'.replace(/[a]+/g, \'h\') // hbchbchbc

回调函数

\'abcabcabc\'.replace(/[a]+/g, () => {
    return \'h\'
}) // hbchbchbc

// 1. /[(a)]+/g () 代表分组捕获
// 2. 回调参数有4个：匹配项，分组捕获内容，捕获项位置，原字符串

复杂例子：假如有一个需求要求用户配置一个文字模板，渲染时根据接口返回内容填充数据。

// 后端返回数据
var res = {
    year: \'2021\',
    month: \'03\',
    day: \'17\',
    a: 10,
    b: 9
}
// 文字模板
var str = "${year}年${month}月${day}日，xxx系统处于${a > b ? \'正常\': \'异常\'}状态"

// 替换${...}等字符
str.replace(/\\${([^{}]+)}/g, (item, prop)=>{
    // 针对字母类型的变量替换为真实数据
    // item: 匹配的字符串
    // prop：分组捕获的需要识别的属性字符串
    var result = prop.replace(/([a-zA-Z]+)/g, (i, p)=>{
        // 属性替换为实际数据
        return res[p]
    })
    // 有可能是表达式，使用eval计算其结果
    return  eval(result)
})
// "2021年3月17日，xxx系统处于正常状态"