在 JavaScript/AJAX 聊天应用程序中替换 URL

引言

本文档描述了如何在 JavaScript/AJAX 聊天应用程序中替换 URL，以便用户可以点击链接，而不是将 URL 从聊天中复制到浏览器的地址栏。

例如，当有人在聊天中发送 http://www.mywebpage.com 时，您希望能够点击该链接。因此，此 JavaScript 函数使用正则表达式将 http://www.mywebpage.com 替换为 <a href="http://www.mywebpage.com" class="my_link" target="_blank">http://www.mywebpage.com</a>。

使用代码

您只需将我的 JavaScript 函数“chat_string_create_urls”复制到您的 *.js 文件中，或复制到 HTML 页面的 script 标签中，并在显示聊天消息之前调用它即可。

function chat_string_create_urls(input)
{
    return input
    .replace(/(ftp|http|https|file):\/\/[\S]+(\b|$)/gim,
'<a href="$&" class="my_link" target="_blank">$&</a>')
    .replace(/([^\/])(www[\S]+(\b|$))/gim,
'$1<a href="http://$2" class="my_link" target="_blank">$2</a>');
}

如果您的消息使用 '<br>' 代替 '\n' 字符串，则需要使用此函数

function chat_string_create_urls(input)
{
    return input
    .replace(/<br>/gim, '\n')
.replace(/(ftp|http|https|file):\/\/[\S]+(\b|$)/gim,
'<a href="$&" class="my_link" target="_blank">$&</a>')
    .replace(/([^\/])(www[\S]+(\b|$))/gim,
'$1<a href="http://$2" class="my_link" target="_blank">$2</a>')
    .replace(/\n/gim, '<br>');
}

第一个 replace 函数替换所有指定了协议的 URL，第二个 replace 函数替换所有以“www”开头的 URL，并假定协议为 HTTP。

它识别链接中的 FTP、HTTP、HTTPS 和 file 协议；如果您不想将协议限制为仅提及的那些，可以将第一个 replace 设置为如下所示

.replace(/(\w+):\/\/[\S]+(\b|$)/gim,
'<a href="$&" class="my_link" target="_blank">$&</a>') 

现在它将匹配所有协议。

我在 Firefox 2.0.0.3、Opera 9.02 和 IE7.0 中进行了测试，在所有浏览器中都能正常工作。如果您想自己测试，请将以下文本放入您的聊天应用程序中

• http://www.test.com
• http://test.com
• https://www.test.com
• https://test.com
• ftp://www.test.com
• ftp://test.com
• www.test.com