Javascript - replace()方法替换变量[含对变量进行全文替换] - 实践

傷城~ 2022-12-12 12:30 118阅读 0赞

1.应用场景

<table> 
 <tbody> 
 <tr> 
 <td>主要用于使用javascript 对字符串进行操作, 这里则是对字符串进行全局替换.</td> 
 </tr> 
 </tbody> 
</table>

2.学习/操作

<table> 
 <tbody> 
 <tr> 
 <td> 需求如下: 1.首次需求 字符串替换, 将第一个空格替换为下划线. 很容易想到使用replace函数, 很多语言都提供了这样的函数.名字都是一样的, 用法也是大差不差. 关于replace的用法:&nbsp; <a href="https://wangdoc.com/javascript/stdlib/regexp.html#stringprototypereplace" rel="nofollow">https://wangdoc.com/javascript/stdlib/regexp.html#stringprototypereplace</a> <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/replace" rel="nofollow">https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/replace</a> <a href="https://www.w3school.com.cn/jsref/jsref_replace.asp" rel="nofollow">https://www.w3school.com.cn/jsref/jsref_replace.asp</a> &nbsp; 代码实现: let string =&nbsp; 'just test .'; string = string.replace(/ /, '_');&nbsp; // 这里可以直接使用空格即 / / 或者 /\s/ console.log(string ); &nbsp; 执行结果: // 通过 <img alt="" height="364" src="https://img-blog.csdnimg.cn/20201009170520731.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="533"> &nbsp; 2.需求改变 字符串替换, 将所有的空格替换为下划线. 只需要将上面的代码进行简单的修改, 即使得替换操作由局部变为全局操作. 代码实现: let string =&nbsp; 'just test .'; string = string.replace(/\s/g, '_'); console.log(string); &nbsp; 执行结果: // 通过 <img alt="" height="185" src="https://img-blog.csdnimg.cn/20201009170556789.png" width="481"> &nbsp; 3.需求再次改变. 要替换的字符串可能是动态无法预测的.或者 很多种可能, 这样情况下, 就要定义一个变量来处理. 同样是全局替换. &nbsp; 初次实现代码: // 字符串替换 function strReplaceAll(search = ' ', replacement = '_', string){ &nbsp;&nbsp; &nbsp;if(!string) return; &nbsp; &nbsp; return string.replace(/search/g, replacement); } &nbsp; 然后调用验证: let string =&nbsp; 'just test .';&nbsp; string = strReplaceAll(' ', '_', string); console.log(string); &nbsp; 执行结果:&nbsp; // 失败, 因为这里将参数search当作了字符串, 而不是变量. <img alt="" height="292" src="https://img-blog.csdnimg.cn/20201009171752267.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="785"> 但是只是局部替换则是可以的. <img alt="" height="295" src="https://img-blog.csdnimg.cn/20201009171952742.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="722"> &nbsp; 最后查询资料, 文档, 并且实践验证得到:&nbsp; //不过还是csdn 找到了同样遇到这样问题的博客 <img alt="" height="521" src="https://img-blog.csdnimg.cn/20201009173111788.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="769"> // 字符串替换 function strReplaceAll(search = ' ', replacement = '_', string){ &nbsp;&nbsp; &nbsp;if(!string) return; &nbsp; &nbsp; return string.replace(new RegExp(search,'g'), replacement); } &nbsp; 执行结果: //通过 <img alt="" height="291" src="https://img-blog.csdnimg.cn/20201009172635334.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="760"> &nbsp; 总结: 我们遇到的很多问题, 总有人已经遇到, 并且已经解决, 有时候你要做的就是尽快地找到他们, 并且转化为自己的内在东西, 如果你是第一次遇到, 你是悲哀又是幸运的, 取决于你怎么对待. 上面的问题或者说很多问题,&nbsp;就是查阅资料和动手实践的问题, 但也是工作生活中很重要的能力[解决问题的问题.]的组成部分之一. &nbsp; &nbsp; 后续补充 ... </td> 
 </tr> 
 </tbody> 
</table>

3.问题/补充

4.参考

<table> 
 <tbody> 
 <tr> 
 <td><a href="https://blog.csdn.net/yzbben/article/details/53467659" rel="nofollow">https://blog.csdn.net/yzbben/article/details/53467659</a></td> 
 </tr> 
 </tbody> 
</table>

后续补充

...