在实际项目开发中,经常会遇到需要替换字符串的情况,简单的使用replace替换指定的一种字符串相信处理起来基本都没啥问题,但遇到一些比较复杂的替换字符串的场景如:需要替换多个不同的字符串,每次正则匹配出来后都要替换成不同的字符串,处理起来实现思路可能就会有些困惑!

实战应用场景:
拿到一后端转义过的字符串,需要将该字符串转换成JSON格式再做后续的业务处理,该字符串格式结构如下:

{"app_params":"{ \"aid\": 6666 }"}

试错做法:

 var str = '{"app_params":"{ \"aid\": 6666 }"}';
    var strToJson=JSON.parse(str);
    console.log(strToJson);

然后就看到了最不想看到的红色报错:

VM86:1 Uncaught SyntaxError: Unexpected token a in JSON at ​position 18 at JSON.parse ()

大致意思是说遇到非预期的语法错误:意外的标记,导致JSON.parse执行失败,直白点说就是提供的字符串不符合标准的JSON格式,无法按预期转换为JSON输出。

分析下字符串:
\" 该转义字符串会自动替换输出",即原始字符串实际是这样的:

{"app_params":"{ "aid": 6666 }"}

单击展开代码,方便阅读

要能正常转换成JSON,在转换前必须将字符串替换处理为:

{"app_params":{ "aid": 9442 }}

单击展开代码,方便阅读

即需要替换2种字符:"{=>{ 和 }"=>},实现代码如下:

    var str='{"app_params":"{ \"aid\": 6666 }"}';
    str = str.replace(/"\{/g, '{');
    str = str.replace(/"\}/g, '}');
    console.log(`替换后字符串:${str}`);
    strToJson = JSON.parse(str);
    console.dir(`转JSON后: ${strToJson}`);

多次调用replace正则替换看上去没啥毛病,但若遇到需要替换更多个不同字符串的时候,随着使用replace个数的添加,你会觉得这样的代码显得累赘,不够优雅,不够“高大上”!!
强迫症都出来了,不能忍!!!
replace同时正则匹配替换多个不同字符串,改造后的写法:

    var str = '{"app_params":"{ \"aid\": 6666 }"}';
    console.log(`原始字符串:${str}`);
    str = str.replace(/("\{|"\})/gi, function (matchStr, p1) {
        console.log(`当前匹配到的子字符串:${p1}`)
        // 将正则匹配到的子字符串作为索引key,返回对象字面量value(该value为要替换后的字符串)
        return {
            '"{': '{',
            '"}': '}',
        }[p1] //
    })
    console.log(`替换后字符串:${str}`);
    strToJson = JSON.parse(str);
    console.dir(`转JSON后: ${strToJson}`);

注意看注释,有没一种豁然开朗的感觉!

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐