在字符串中搜索一组字符并用链接替换这些字符的最佳方法

Question

例如，在Reddit上：

如果您的评论包含r/foobar，则r/foobar将替换为指向reddit.com/r/foobar的链接。

我怎样才能做到这一点？

Answer 1

我将使用String.prototype.replace()方法并使用正则表达式。关于MDN的良好文档。

超级基础示例：

var inputString = 'Some text with a link to r/foobar on Reddit.';
var regEx = /(r/foobar)/g;
console.log(inputString.replace(regEx, 'reddit.com/$&'));
// Expected results: 'Some text with a link to reddit.com/r/foobar on Reddit.'

你最初的问题是"用链接替换这些字符？"。我不认为你的意思是一个真正的锚标记链接(r/foobar(，然而，这个相同的方法可以用于一些更改。

更复杂的示例：

由于string.replace()方法只是将一个字符串交换为另一个字符串，因此它无法单独使用HTML元素交换字符串。如果您使用它并添加类似element.innerHTML的东西，它就会起作用。举以下例子：

假设我们有一个html文档，其中包含如下段落：

<p class="my-class">Some text with a link to r/foobar, r/bar, and r/foo on Reddit.</p>

还有一些运行在该页面上的JS：

var p = document.querySelector('.my-class');
var regEx = /(r/foobar|r/bar)/g;
p.innerHTML = p.innerHTML.replace(regEx, '<a href="https://reddit.com/$&">$&</a>'); // This is going to wrap "r/foobar" & "r/bar" in an HTML anchor tag in the paragraph because it's combined with element.innerHTML

需要注意的事项：

1. 我的regEx变量末尾有g全局标志，这意味着它不会在一场比赛中停止，而是继续
2. 在Regex中，必须用前面的反斜杠转义正斜杠/
3. Regex正在使用一个捕获组(位于括号()内(
4. Regex正在使用逻辑或(|(运算符
5. 替换使用$&调用捕获组并将其粘贴到替换中(两次(。您可以用$&调用一个完整的正则表达式匹配，或者用$n调用单个捕获，其中n等于捕获顺序($1是第一个捕获$2是第二个…(

请参阅工作代码笔演示