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>' +

演示

＆＃13;

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);

});

＆＃13;

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

＆＃13;

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

＆＃13;

jQuery呈现聊天系统的链接

3 个答案: