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

Z时代
2024-01-10
分类：综合

你知道 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)
// matched good
// matched 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”类指定颜色。