迹忆客 专注技术分享

当前位置:主页 > 学无止境 > WEB前端 > JavaScript >

如何在 JavaScript 中将回调函数传递给 String.replace()

作者:迹忆客 最近更新:2023/01/08 浏览次数:

你知道 string.replace() 方法可以接受回调函数吗? 我今天才发现,这里我做一个分享。

你需要这个功能做什么? 它为什么存在? 在阅读本文时,我将回答所有这些问题。

replace() 方法

replace() 字符串方法替换字符串中的文本字符。 它有两个参数:要替换的字符串和应该替换的值。

使用此方法,我们可以替换字符串字符(如“hello”)或匹配 RegEx 模式的字符(如 /hi/)。

这是此方法的语法:

String.replace(string/pattern, replacer)

以下是一些示例,展示了如何使用此方法:

const sentence = "Hi my name is jiyik"

const replaced1 = sentence.replace("jiyik", "JavaScript")
console.log(replaced1)
// "Hi my name is JavaScript"

const replaced2 = sentence.replace(/\s/g, "-")
console.log(replaced2)
// "Hi-my-name-is-jiyik"

但是,replacer 参数也可以是一个函数。

为什么需要使用函数作为 replacer 方法?

原因是有时我们想对那些匹配指定模式的字符做一些事情。

下面是语法:

String.replace(/pattern/, function(matched){
    // 做一些匹配的事情并返回替换值
})

如果你使用像“jiyik”这样的文字字符串模式,则不需要回调函数,因为你已经知道你通过句子匹配的只是“jiyik”。

但是使用 RegEx 模式,它可以匹配多个事物。 下面是一个例子:

const sentence = "I am a good guy and you too"
const replaced = sentence.replace(/g\S*/g, "😂")

console.log(replaced)
// I am a 😂 😂 and you too

正则表达式匹配所有以“g”开头的单词并且两个单词匹配; “好”和“家伙”。 在这种情况下,如果我们想对匹配的值做一些事情,我们需要回调。

这是另一个例子:

const sentence = "I am a good guy and you too"
const replaced = sentence.replace(/g\S*/g, function(matched){
    console.log("matched", matched)
    return "😂"
})

console.log(replaced)
// 匹配 good
// 匹配 guy
// I am a 😂 😂 and you too

我们可以用匹配值做的事情的例子有哪些? 有很多场景,但我将使用一个让我发现这一点的用例。

如何使用 RegEx 查找和替换文本中的 URL

在很多平台上,我们会发现当发布带有链接的帖子或消息时,该链接的颜色与其他文本不同,并且表现得像一个链接。 然后,当它被点击时,它会将用户导航到一个单独的页面。

他们如何做到这一点? 这个想法是用一个元素替换文本中的链接,该元素具有一些样式并且也可以用作链接。

以下是我使用 JavaScript 执行此操作的方法:

const text = "我的网站是 https://www.jiyik.com,我在 https://blog.csdn.net/ 上写作"

const regex = /https?:\/\/\S*/gi

const modifiedText = text.replace(regex, (url) => {
    return '<a class="text--link" href="'+url+'">'+url+'</a>'
})
console.log(modifiedText)

上面代码替换后的结果如下

我的网站是 <a class="text--link" href="https://www.jiyik.com">https://www.jiyik.com</a> 我在 <a class="text --link" href="https://blog.csdn.net/">https://blog.csdn.net/</a> 上写作

正则表达式匹配带有“https://...”的模式(s 可选)。 使用回调,我可以获得与正则表达式匹配的 url,并使用它来创建一个带有“text--link”类的锚标记字符串。

使用这个返回的字符串,我可以将它注入到 DOM 中。 在我的例子中,我使用的是 React,所以我使用了 dangerouslySetInnerHTML 将它注入到一个段落中。 我可以在样式表中为“text--link”类指定颜色。

总结

我们每天都在学习新东西,我希望你今天在 JavaScript 中学到了一些东西——String.replace() 中的回调函数。

此外,在本文中,我展示了一个很好的利用此功能的用例。

转载请发邮件至 1244347461@qq.com 进行申请,经作者同意之后,转载请以链接形式注明出处

本文地址:

相关文章

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

最新推荐

教程更新

热门标签

扫码一下
查看教程更方便