JavaScript 正则表达式匹配文本字段中的 URL

Question

如何设置我的正则表达式来测试 URL 是否包含在 JavaScript 的文本 block 中。我不太清楚用来完成此任务的模式

 var urlpattern = new RegExp( "(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?"

 var txtfield = $('#msg').val() /*this is a textarea*/

 if ( urlpattern.test(txtfield) ){
        //do something about it
 }

编辑:

所以我现在的模式可以在正则表达式测试器中工作，以满足我需要它做的事情，但 chrome 会抛出错误

  "Invalid regular expression: /(http|ftp|https)://[w-_]+(.[w-_]+)+([w-.,@?^=%&:/~+#]*[w-@?^=%&/~+#])?/: Range out of order in character class"

对于以下代码:

var urlexp = new RegExp( '(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?' );

Answer 1

虽然转义破折号字符(在字符类中可以具有特殊含义，作为字符范围说明符)应该有效，但消除其特殊含义的另一种方法是将它们放在开头或类定义的结尾。

此外，字符类中的\+和\@确实被解释为+和@分别由 JavaScript 引擎；但是，转义不是必需的，并且可能会使试图以视觉方式解释正则表达式的人感到困惑。

为了您的目的，我会推荐以下正则表达式:

(http|ftp|https)://[\w-]+(\.[\w-]+)+([\w.,@?^=%&:/~+#-]*[\w@?^=%&/~+#-])?

这可以在 JavaScript 中通过将其传递到 RegExp 构造函数中来指定(就像您在示例中所做的那样):

var urlPattern = new RegExp("(http|ftp|https)://[\w-]+(\.[\w-]+)+([\w.,@?^=%&:/~+#-]*[\w@?^=%&/~+#-])?")

或者通过使用 // 引用方法直接指定正则表达式文字:

var urlPattern = /(http|ftp|https):\/\/[\w-]+(\.[\w-]+)+([\w.,@?^=%&:\/~+#-]*[\w@?^=%&\/~+#-])?/

如果您接受正则表达式作为字符串(例如，来自用户输入或 AJAX 调用)，则 RegExp 构造函数是必需的，并且可能更具可读性(如本例所示)。我相当确定 // 引用方法更有效，并且在某些时候更具可读性。两者都有效。

我使用 Chrome 在 < JSFiddle 上测试了您的原始版本和此修改版本。 > 和 < RegexLib.com >，使用客户端正则表达式引擎(浏览器)并专门选择 JavaScript。虽然第一个失败并出现您所说的错误，但我建议的修改成功了。如果我从源代码中的 http 中删除 h，它就会无法匹配，因为它应该如此!

编辑

正如 @noa 在评论中指出的，上面的表达式不会匹配本地网络(非互联网)服务器或使用单个单词访问的任何其他服务器(例如 http://localhost/ ...或https://sharepoint-test-server/...)。如果需要匹配这种类型的 url(可能会也可能不会)，以下内容可能更合适:

(http|ftp|https)://[\w-]+(\.[\w-]+)*([\w.,@?^=%&:/~+#-]*[\w@?^=%&/~+#-])?

#------changed----here-------------^

<结束编辑>

最后，一个优秀的资源是Regular-Expressions.info，它教了我 90% 的关于正则表达式的知识。 - 如果您想学习正则表达式(它能做什么和不能做什么)，我强烈推荐它!