jQuery呈现聊天系统的链接

Question

我正在为我的客户构建一个Web应用程序，它涉及一个用户可以相互通信的聊天系统。 现在我的客户要我做的是，如果用户使用此聊天系统向另一个用户发送了链接，它应该自动将其呈现为链接（在标签内）。

现在我可以返回普通文本，如果它是常规文本，但如果它是一个链接，它当前返回[object Object]。 正则表达式本身有效，我已经测试过，我遇到的唯一部分是实际呈现链接。

这是我的功能来测试它是否是一个链接：

functions.js

function isAValidUrl(data)
{
    var pattern = new RegExp('(([\\w]+:)?//)?(([\\d\\w]|%[a-fA-f\\d]{2,2})+(:([\\d\\w]|%[a-fA-f\\d]{2,2})+)?@)?([\\d\\‌​w][-\\d\\w]{0,253}[\\d\\w]\\.)+[\\w]{2,4}(:[\\d]+)?(/([-+_~.\\d\\w]|%[a-fA-f\\d]{2,2})*)*(\\‌​?(&?([-+_~.\\d\\w]|%[a-fA-f\\d]{2,2})=?)*)?(#([-+_~.\\d\\w]|%[a-fA-f\\d]{2,2})*)?');
    if(!pattern.test(data)) {
        return data;
    } else {

         return $('<a>').attr('href', data.message).text(data.message);
    }
}

这是我正在使用该功能的Chat.js的一部分

chat.js

function render() {

    var html = [], messages = $self.data('messages');
    var escaper = $('<div/>');
    for (var i = messages.length - 1; i >= 0; i--) {
        html.push(
            '<div class="media chat-message" data-message-id="' + messages[i].id + '">' +
            '<div class="message-meta"><span class="sender-name">' + messages[i].sender_name + '</span><span class="stamp pull-right" data-stamp="' + messages[i].created_at + '"></span></div>' +
            '<div class="media-body">' +
            '<div class="message-text">' + escaper.text(isAValidUrl(messages[i].message)).html() + '</div>' +
            '</div>' +
            '</div>'
        );
    }
    $self.find('.message-container').html(html.join('')).end().find('.stamp[data-stamp]').timeAgo();
    clearInterval(timeAgoTimer);
    timeAgoTimer = setInterval(function () {
        $self.find('.stamp[data-stamp]').timeAgo();
    }, 60000);
    return $self.chatBox('scrollToBottom');
}

任何帮助将不胜感激！

Answer 1

你在函数中不一致地处理你的参数 - 它是一个带有名为message的属性的对象，它是一个字符串吗？ 或者它只是一个字符串？ 如果它只是一个字符串，那么这将工作：

function isAValidUrl(data)
{
    var pattern = new RegExp('(([\\w]+:)?//)?(([\\d\\w]|%[a-fA-f\\d]{2,2})+(:([\\d\\w]|%[a-fA-f\\d]{2,2})+)?@)?([\\d\\‌​w][-\\d\\w]{0,253}[\\d\\w]\\.)+[\\w]{2,4}(:[\\d]+)?(/([-+_~.\\d\\w]|%[a-fA-f\\d]{2,2})*)*(\\‌​?(&?([-+_~.\\d\\w]|%[a-fA-f\\d]{2,2})=?)*)?(#([-+_~.\\d\\w]|%[a-fA-f\\d]{2,2})*)?');
    if(!pattern.test(data)) {
        return data;
    } else {

         return $('<a>').attr('href', data).text(data);
    }
}

Answer 2

如果您正在使用jQuery，这个插件运行良好，涵盖了几乎所有可能的情况......

https://github.com/SoapBox/jQuery-linkify

正如评论中所讨论的，在包含您要“链接”的文本的元素上调用linkify，而不是在文本本身上。

$('.message-text').linkify();

Answer 3

您正在尝试将文本设置为div，然后使用以下代码调用.html（）

var escaper = $('<div/>');    
escaper.text(isAValidUrl(messages[i].message)).html()

您应该设置.html（）而不是使用.text（），就像它将返回一个对象的链接一样。

'<div class="message-text">' + escaper.html(isAValidUrl(messages[i].message)).html()+ '</div>' +

演示

 function isAValidUrl(data) { var pattern = new RegExp('(([\\\\w]+:)?//)?(([\\\\d\\\\w]|%[a-fA-f\\\\d]{2,2})+(:([\\\\d\\\\w]|%[a-fA-f\\\\d]{2,2})+)?@)?([\\\\d\\\\‌​w][-\\\\d\\\\w]{0,253}[\\\\d\\\\w]\\\\.)+[\\\\w]{2,4}(:[\\\\d]+)?(/([-+_~.\\\\d\\\\w]|%[a-fA-f\\\\d]{2,2})*)*(\\\\‌​?(&?([-+_~.\\\\d\\\\w]|%[a-fA-f\\\\d]{2,2})=?)*)?(#([-+_~.\\\\d\\\\w]|%[a-fA-f\\\\d]{2,2})*)?'); if (!pattern.test(data)) { return data; } else { return $('<a>').attr('href', data).text(data); } } $(document).ready(function() { var html = []; var messages = ["no link", "http://www.test.com"]; var msg = "http://www.test.com"; var div = $('<div/>'); for (var i = messages.length - 1; i >= 0; i--) { html.push('<div class="message-text">' + div.html(isAValidUrl(messages[i])).html() + '</div>'); } $('body').append(html); }); 

 .message-text { background: #eee; color: #555; font-size: 14px; padding: 10px; margin: 10px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>