使用 JS 或 Jquery 检测 textarea 中的 url

Posted 2023-05-07

【中文标题】使用 JS 或 Jquery 检测 textarea 中的 url

【英文标题】：Detect url in textarea with JS or Jquery

【发布时间】：2012-08-19 01:41:33

【问题描述】：

如何检测（在文本区域或其他输入中）用户是否已完成输入网址，就像 Facebook 在其主要形式中所做的那样？

this 之类的解决方案只能在用户完成输入并执行操作（例如单击按钮）时起作用。

我希望在整个条目中检测 url，例如检查每个空格后输入的单词。

提前谢谢你。

【问题讨论】：

URL 的标识将是相同的，您只需将其绑定到不同的事件 - 按下键而不是单击按钮。

【参考方案1】：

下面是一个示例，说明如何做到这一点：

$(function() 
    "use strict";
    var url = /[-a-zA-Z0-9@:%_\+.~#?&//=]2,256\.[a-z]2,4\b(\/[-a-zA-Z0-9@:%_\+.~#?&//=]*)?/gi;

    $("#textarea").on("keyup", function( e ) 
        var urls, output = "";
        if ( e.keyCode !== 8 && e.keyCode !== 9 && e.keyCode !== 13 && e.keyCode !== 32 && e.keyCode !== 46 ) 
            // Return is backspace, tab, enter, space or delete was not pressed.
            return;
        

        while ((urls = url.exec(this.value)) !== null) 
            output += urls[0] + ", ";
        
        console.log("URLS: " + output.substring(0, output.length - 2));
    );
);

当然，您必须绑定其他事件，例如 .blur() 才能正常工作。

尝试以下小提琴并在您键入时检查您的控制台：http://jsfiddle.net/sQVe/mXQrc/1/

【参考方案2】：

看这个：https://github.com/stephan-fischer/jQuery-LiveUrl/ - 它干净、简单，并提供 url 预览！

【参考方案3】：

您要查找的是按键事件，您可以在此处查看文档和如何使用它的示例：http://api.jquery.com/keypress/