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

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第2天，点击查看活动详情。

`replace()`方法

string 方法替换字符串中的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”开头的单词并且两个单词匹配；“好”和“家伙”。在这种情况下，如果我们想对匹配的值做一些事情，我们需要回调。

这是另一个例子：

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 查找和替换文本中的 URL

在 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://...”的模式（s 可选）。使用回调，我可以获得url与正则表达式匹配的，并使用它来创建一个带有“text--link”类的锚标记字符串。

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

结论

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