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

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. 在正则表达式中，您必须使用正斜杠/加上前面的反斜杠\。
3. 正则表达式正在使用捕获组（在括号()内。]
4. 正则表达式正在使用逻辑或（|）运算符。
5. 替换使用$&呼叫捕获组并将其粘贴在替换中（两次）。您可以用$&调用完整的正则表达式匹配，或用$n调用单个捕获，其中n等于捕获顺序（$1是第一个捕获，$2是第二个捕获...]

请参见工作中的codepen demonstration