迹忆客 专注技术分享

你知道 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() 中的回调函数。

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