JavaScript自动将文本中的URL转换为可点击链接

JavaScript自动将文本中的URL转换为可点击链接

实现URL地址自动添加的核心逻辑主要包含两个步骤：检测与替换。

检测

所谓“检测”，即判断字符串内部是否包含符合HTTP协议规范的地址。这一过程显然需要借助正则表达式进行验证。该功能在前端和后端均可实现，本文仅探讨前端方案，即使用JavaScript来完成。

用于验证HTTP地址的正则表达式如下（可能存在疏漏或不准确之处，欢迎指正）：

var reg = /(http://|https://)((w|=|?|.|/|&|-)+)/g;

该表达式的前半部分用于匹配以http或https开头的URL字符串，后半部分则用于匹配后续的字符，包括英文字符、下划线(_)、点号(.)、问号(?)以及等号(=)、连接短线(-)等。

替换 www.jb51.net 在JavaScript中提及替换功能时，首先想到的自然是replace方法。replace的强大之处在于它支持正则表达式，能够对符合正则规则的字符串进行替换。例如，若要去除字符串两端的空格，可以使用类似以下的语句：

var s = " blank ";
s = s.replace(/^s+(.*?)s+$/, "");
alert(s);

执行后将得到“blank”，两端的空格已被剔除。同理，此处只需将匹配到的http地址替换为嵌套了href属性的<a>标签即可。

例如，以下表达式可以匹配http、https、ftp、ftps以及IP地址格式的URL。

var URL = /(https?://|ftps?://)?((d{1,3}.d{1,3}.d{1,3}.d{1,3})(:[0-9]+)?|([w]+.)(S+)(w{2,4})(:[0-9]+)?)(/?([w#!:.?+=&%@!-/]+))?/ig;

该表达式对URL地址的匹配相对完善。基于此表达式，我编写了两个小函数，用于将用户留言中的URL地址替换为可点击的链接。实现过程并不复杂，主要利用JavaScript的replace()函数将URL转换为link：

/**
* JavaScrit 版本
* 将URL地址转化为完整的A标签链接代码
 */
var replaceURLToLink = function (text) {
 text = text.replace(URL, function (url) {
 var urlText = url;
 if (!url.match('^https?://')) {
 url = 'http://' + url;
 }
 return '' + urlText + '';
 });
return text;
 };