原文:How to Pass Callback Functions to String.replace() in JavaScript,作者:Dillion Megida

你知道字符串 .replace() 方法接受一个回调函数吗?我今天刚刚发现了它,并认为我应该分享。

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

replace() 方法

.replace() 字符串方法替换一个字符串中的文本字符。它需要两个参数:要替换的字符串,以及要替换的值。

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

下面是这个方法的语法:

String.replace(string/pattern, replacer)

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

const sentence = "Hi my name is Dillion"

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

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

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

为什么你需要使用一个函数作为替换方法?

原因是,有时候,你想对那些与指定模式相匹配的字符做一些事情。

语法是这样的:

String.replace(/pattern/, function(matched){
    // do something with matched and return
    // the replace value
})

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

但是对于 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” 开头的词,并且有两个词匹配,“good” 和 “guy”。在这种情况下,如果我们想对匹配的值做些什么,我们就需要回调。

下面是另一个例子:

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)
// matched good
// matched guy
// I am a 😂 😂 and you too

我们可以用匹配的值做哪些事情呢?有很多情况,但我要介绍引导我发现这个的一个示例。

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

在 WhatsApp 和 Twitter 这样的平台上,你会发现,当你发布带有链接的帖子或信息时,链接的颜色与其他文本不同,看起来就像是一个链接。然后当它被点击时,它会将用户导航到一个单独的页面。

它们是如何实现这一点的呢?这个想法是用一个有一些样式的元素来代替文本中的链接,同时也作为一个链接工作。

下面是我如何用 JavaScript 做到这一点的:

const text = "My website is https://dillionmegida.com and I write on http://freecodecamp.org/"

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

const modifiedText = text.replace(regex, (url) => {
    return `<a class="text--link" href="${url}">${url}</a>`
})

console.log(modifiedText)
// My website is <a class="text--link" href="https://dillionmegida.com">https://dillionmegida.com</a> and I write on <a class="text--link" href="http://freecodecamp.org/">http://freecodecamp.org/</a>

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

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

总结

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

另外,在这篇文章中,我还展示了一个利用这个函数的好例子。

如果你觉得这篇文章有帮助,请把它分享给朋友。