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

JavaScript 1年前 33

你知道字符串 .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>