js 字符串中的特殊字符全部替换成定义对象里面key对应的value值（进阶篇）

在上一篇文章中，初步介绍了字符串特殊字符的基础用法，js 字符串中的特殊字符全部替换成定义对象里面key对应的value值（基础篇）-CSDN博客可以回顾看一下。现在，进一步封装方法全局调用。

示例1

let textString = "你好！my name is ${name},l like ${hobby},this is a test string with special characters！";let userInfo = {name: 'Aotman_',hobby:"playing basketball"}let overString = textString.replace(/\$\{(.*?)\}/g,function(textString,i){console.log(textString, 'str');console.log(i, 'iii');return userInfo[i];});console.log(overString, '输出结果'); // 输出: "你好！my name is Aotman_,l like playing basketball,this is a test string with special characters！"

示例2

    getReplaceStr(str, obj) {for (let key in obj) {str = str.replace(new RegExp('\\{\\{' + key + '\\}\\}', 'g'), obj[key])}return str}let userInfo = {name: 'Aotman_',hobby:"playing basketball"}let textString = `你好！my name is {{name}},l like {{hobby}},this is a test string with special characters！`console.log(this.getReplaceStr(textString, userInfo)); // 输出: "你好！my name is Aotman_,l like playing basketball,this is a test string with special characters！"

示例3

 getReplaceStr(textString, userInfo) {return textString.replace(/{(.*?)}/g, (match, key) => {return typeof userInfo[key] !== 'undefined' ? userInfo[key] : match;});
}
const textString= "你好！my name is {name},l like {hobby},this is a test string with special characters！Hello, {name}! Welcome to {city}.";
const userInfo= {name: 'Aotman_',city:"Hang Zhou",hobby:"playing basketball"}
const overString= this.getReplaceStr(textString, userInfo);
console.log(overString); // 你好！my name is Aotman_,l like playing basketball,this is a test string with special characters！Hello, Aotman_! Welcome to Hang Zhou.

代码解析

1、函数定义：我们定义了一个名为 getReplaceStr的函数，它接受两个参数：textString和 userInfo。

2、正则表达式：/{(.*?)}/g 用于匹配字符串中的占位符。

3、替换逻辑：textString.replace(...) 方法将每个占位符替换为对象 userInfo 中相应的值。如果找不到对应的值，则保持原样。

进阶扩展：

    getReplaceStr(textString) {const userInfo= {'name': 'Aotman_','city':"Hang Zhou",'hobby':"playing basketball",'.':"。"}return textString.trim().replace(new RegExp(Object.keys(userInfo).join('|'), 'g'), match => {return typeof userInfo[match] !== 'undefined' ? userInfo[match] : match})},
const textString = "你好！my name is name,l like hobby,this is a test string with special characters！Hello, name! Welcome to city.";
const result = this.getReplaceStr(textString);
console.log(result);//你好！my Aotman_ is Aotman_,l like playing basketball,this is a test string with special characters！Hello, Aotman_! Welcome to Hang Zhou。

结论

本文介绍了 JavaScript 的占位符替换方案，提供了灵活易懂的代码示例和实现步骤。无论是刚开始学习前端技术，还是正在从事前端开发工作，掌握字符串占位符替换的技巧都是十分重要的。希望通过本文，你能够更深入理解字符串处理的强大，提升开发技能，为未来的项目奠定坚实基础。如果你有任何问题或建议，欢迎留言讨论！