String的replace方法的使用
大部分语言的都有字符串类型,字符串类型基本都有replace
方法,今天就来说说javascript
的replace
方法
const str = 'abcdefjabcd'
const newStr = str.replace('a', 'p')
console.log(newStr) // pbcdefjabcd
今天的分享就到这里,恭喜你已经学会了javascript
的字符串的replace
的使用了...
有的童鞋可能会问了,我是要替换所有的a
呀,你这也没有被替换掉啊。哈哈,没全替换就对了。如果全替换了那就又得有童鞋会问我只想替换一个,其它的不管。
所以呢,饭得一口一口吃,代码得一行一行码。
全部替换replace
第一个参数可以直接传一个正则表达式,修饰符增加为全局查找,这样就可以替换所有字符串了;还有使用ES2021
新的apireplaceAll
也可以全局替换
const str = 'abcdefjabcd'
const newStr = str.replace(/a/g, 'p') // 使用正则替换全局字符
console.log(newStr) // pbcdefjpbcd
const strAll = str.replaceAll('a', p) // 使用新api替换全局字符
console.log(strAll) // pbcdefjpbcd
进阶
当然不会那么简单了,我又不是水文章的
很多童鞋都不知道replace
方法的第二个参数可以传一个回调函数
const str = 'abcdefjabcd'
const newStr = str.replace('a', (a,b,c) => {
console.log(a, b, c) // a 0 abcdefjabcd
return 'p'
}) // 使用正则替换全局字符
console.log(newStr) // pbcdefjabcd
可以看到,回调函数的返回值就是用来替换的值,回调函数的参数分别是:第一个参数是匹配的字符,第二个参数是匹配的索引,第三个参数是全部字符串
接着我们配合正则使用
const str = 'abcdefjabcd'
const newStr = str.replace(/a/g, (a,b,c) => {
console.log(a, b, c) // a 0 abcdefjabcd
// a 7 abcdefjabcd
return 'p'
}) // 使用正则替换全局字符
console.log(newStr) // pbcdefjpbcd
可以看出,正则全局匹配的时候会执行多次回调函数,这很正常,全局多个匹配当然得执行多次了,无可厚非
来一个复杂一点的正则,来体现回调函数的大用处
const str = '我叫<%name>,今年<%age>岁,来自<%site>,哈哈'
const user = {
name: '张三',
age: 32,
site: '山东'
}
const newStr = str.replace(/<%(\w+)>/g, (a, b, c, d) => {
console.log(a, b, c, d)
// <%name> name 2 我叫<%name>,今年<%age>岁,来自<%site>,哈哈
// <%age> age 12 我叫<%name>,今年<%age>岁,来自<%site>,哈哈
// <%site> site 22 我叫<%name>,今年<%age>岁,来自<%site>,哈哈
return user[b]
})
console.log(newStr) // 我叫张三,今年32岁,来自山东,哈哈
这有点像什么,是不是像字符串模板的感觉。眼尖的童鞋可能看到了,回调函数又多了一个参数,是的,你没有看错的确多了一个参数。这个参数就是正则括号里面匹配的值
所以得出结论,回调函数的参数
- 1.匹配的值
- 2+.匹配正则括号的值,可以是多个
- -2.倒数第二个参数,匹配值在全字符串的索引
- -1.倒数第一个参数,全字符串
这就是javascript
的字符串的replace
常见的用法。具体怎么使用还是得看业务需求
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。