如何从像facebook这样的文本框中检测url？答案

【问题标题】：How to detect url from textbox like facebook?如何从像facebook这样的文本框中检测url？
【发布时间】：2011-11-08 08:28:45
【问题描述】：

我正在开发 asp.net mvc3 应用程序。在这个我有一个文本区域，用户可以在其中编写 url 并粘贴 url，我的代码在按钮单击时获取 url 详细信息。

但我想像 facebook 一样实现它。在 facebook 中，当我们编写一些 url 时，它会自动获取 url 详细信息，

我尝试了 keyup 功能，但它会不断检查输入 url。

 $('#urlinput').keyup(function () {
        //alert("something is here!!");
        if (!isValidURL($('#urlinput').val())) {
            alert('Please enter a valid url.');
            return false;
        }
        else {
        some code...
}

我在 facebook 中发现的是，当我们编写 url 后跟空格时，它会获取 url 的详细信息，而当我们将 url 粘贴到文本框中时，它将获取 url 的详细信息。我怎样才能这样实现？

谁能建议我如何像 Facebook 一样实施？

【问题讨论】：

您没有关闭单引号是否有原因？
keyup 不是解决方案，因为当用户使用鼠标或浏览器的工具栏粘贴 url 时它不起作用。如果要捕获所有情况，这比这更复杂
@John：是的，你是对的，约翰。

标签： javascript jquery facebook user-interface

【解决方案1】：

如果我尝试这样做，我会这样做：

如果我使用鼠标粘贴 URL，我会在 mouseup 事件时打开浏览器
如果我使用键盘粘贴，那么它必须是 CTRL + V ... 等等 CTRL 键，我会获取 URL
如果我正在打字，那么我会选择 keyup 或者当文本框失去焦点时

希望对你有帮助

【讨论】：

【解决方案2】：

粘贴会引发一个您可以绑定到的事件：

$(myelement).bind('paste',function(event) {
    alert('paste');
});

关于 keyup 事件，事件对象将提供在event.which 中按下的键。

$(myelement).bind('keyup',function(event) {
    alert(event.which);
});

使用正则表达式，您可以提取 url。你可以在这个地址找到正则表达式：http://regexlib.com/Search.aspx?k=URL&AspxAutoDetectCookieSupport=1

现在对于 Facebook 上的“预览”功能，我想这有点困难，因为他们似乎分析目标 url 的内容以提取缩略图和一些内容（文章文本等）。

希望这会有所帮助， d.

【讨论】：

G：感谢您的关注。我完成了像 facebook 一样的 URL 提取。我只想像 facebook 一样改进我的代码。

【解决方案3】：

好吧，你必须在keyup 上进行，也许还需要在onchange 上处理用户粘贴网址时的情况。

当您识别出有效的 url 时，您应该使用 AJAX 将其发送到服务器。然后，服务器下载 url，分析 HTML 字符串中的页面标题等数据，并将这些数据发送回客户端，您可以在客户端将其显示给用户。

【讨论】：