如何将纯文本的一部分转换为URL可点击链接？

Question

我只是想知道是否可以像这样转换纯文本：

<text>Hello everyone, check out my website www.clickablelink.com!</text>

并把它变成这样的东西：

<text>Hello everyone, check out my website <a href="http://www.clickablelink.com">www.clickablelink.com!</a></text>

我正在开发一个webbapplication，其中用户应该能够发布消息，如果有人选择写一些类似的东西：“嘿，看看我的网站 - www~”，那么该链接应该是可点击的。

我使用visual studio（MVC / JS / jQuery）。

Answer 1

是，这可以通过以下步骤实现：

1. 制作正则表达式以查找网站字符串的开始和结束位置，以便您只修改字符串的网站部分。这将根据您的完全网址规范而有所不同，但/(www.)?([a-zA-Z0-9]+)\.[a-zA-Z0-9]*\.[a-z]{3}\.?([a-z]+)?/应该足够了。
2. 定位您要修改的<text>代码，最好使用 document.getElementsByTagName() ，将 .innerHTML 保存到变量中。
3. 使用正则表达式作为参数对元素运行 .match() ，并保存此变量以供日后使用。
4. 使用 .replace() 将字符串替换为格式化<a>标记中包含的相同字符串。请注意，由于您在示例中省略了协议，因此您需要在替换时在中添加一个，否则它将被视为<文件夹当前当前的网站。
5. 将元素的.innerHTML设置为替换。

这可以在以下内容中看到：

＆＃13;
＆＃13;
var regex = /(www.)?([a-zA-Z0-9]+)\.[a-zA-Z0-9]*\.[a-z]{3}\.?([a-z]+)?/;
var str = document.getElementsByTagName('text')[0].innerHTML;
var matches = str.match(regex);
var replacement = str.replace(regex, "<a href='http://" + matches[0] + "'>" + matches[0] + "</a>");
document.getElementsByTagName('text')[0].innerHTML = replacement;
＆＃13;
<text>Hello everyone, check out my website www.clickablelink.com!</text>
＆＃13;
＆＃13;
＆＃13;

希望这有帮助！ ：）

Answer 2

以下是使用正则表达式实现此目的的快速方法。请记住，此示例需要一些抛光才能匹配相应的字符串。例如，这仅匹配以www开头并以.com。结尾的链接。

// retreive the text
let textElement = document.getElementById('text');
let text = textElement.innerHTML;

// find and replace text that looks like a link using a
// regularExpression. This example will only replace links
// that start with 'www' and end with '.com'. If you need
// to match other strings change the regular expression 
// accordingly.
let processedText = text.replace(/(\bw{3}.*\.com\b)/g, '<a href="http:\\\\$1">$1</a>');

// output the new text
textElement.innerHTML = processedText;

<text id="text">Hello everyone, check out my website www.clickablelink.com!</text>