js正则表达式之解析——URL的正则表达式

首先,此片文章并不是直接告诉你,url的正则表达式是什么,以及怎么使用这个正则表达式去解析一个URL地址,相信这种问题在网络上已经能找到很多。本文的宗旨在于教你如何理解URL的正则表达式,以达到理解正则表达式,以及能够在日后的工作中写出相对简单的正则。言归正传,先看看一下的例子:

var parse_url = /^(?:([A-Za-z]+):)?(\/{0,3})([0-9.\-A-Za-z]+)(?::(\d+))?(?:\/([^?#]*))?(?:\?([^#]*))?(?:#(.*))?$/;

 1 var parse_url = /^(?:([A-Za-z]+):)?(\/{0,3})([0-9.\-A-Za-z]+)(?::(\d+))?(?:\/([^?#]*))?(?:\?([^#]*))?(?:#(.*))?$/;
 2 var url = "http://qiji123.kerlai.net:81/GoodsBasic/Operate/12678?q#simen";
 3 var result = parse_url.exec(url);
 4 var names = ["url","scheme","slash","host","port","path","query","hash"];
 5 for(var i=0; i <names.length;i++){
 6     console.log(names[i]+":"+result[i]);
 7 }
 8
 9 //输出结果
10 /*
11 url:http://qiji123.kerlai.net:81/GoodsBasic/Operate/12678?q#simen
12 scheme:http
13 slash://
14 host:qiji123.kerlai.net
15 port:81
16 path:GoodsBasic/Operate/12678
17 query:q
18 hash:simen
19 */

我们先来看看结果:

url:http://qiji123.kerlai.net:81/GoodsBasic/Operate/12678?q#simen

scheme:http

slash://

host:qiji123.kerlai.net

port:81

path:GoodsBasic/Operate/12678

query:q

hash:simen

代码中result数组的集合是[‘http://qiji123.kerlai.net:81/GoodsBasic/Operate/12678?q#simen‘,‘http‘, ‘//‘, ‘qiji123.kerlai.net‘, ‘81‘, ‘GoodsBasic/Operate/12678‘, ‘q‘, ‘simen‘]

现在我们尝试把从第2个到最后一个的结果一个一个链接起来,得到的结果为:"http // qiji123.kerlai.net 81 GoodsBasic/Operate/12678 q simen" 和原来的url相比,缺少了":?#"等链接符。这个是为何?说到这,我们就要引出正则表达式的一个概念为正则表达式的分组。正则表达式有4种分组,分别是:捕获型、飞捕获型、向前正向匹配、向前负向匹配。此处我重点介绍前面两种,后面两种大家可以自行补脑。其中非捕获型的就不会在结果的数组中出现,()括起来的为一个组,即会占用结果数组的一个位置。同样如果在你的正则表达式中,没有用括号括起来,那么所匹配到的字符将不会出现在exec()方法所返回的数组中。正则的分组是使用()括起来的称为一个分组。

1、捕获型分组:(...)

2、非捕获型分组:(?: .....)

3、向前正向匹配:(?=........)

4、向前负向匹配:(?!.........)

接下来我们来分解parse_url这个正则表达式,第一个分组

1、^表示字符串的开始

整个正则因子是匹配一个协议名:http

2、(?: )表示一个非捕获型分组:即在这个括号内的,但是不在其子括号内所匹配到的字符将不放入结果数组中。

3、()表示一个捕获型分组,此括号内所匹配到的字符放入结果数组中对应url中的:http字符

4、[]为正则表达式类,表示符合中括号内任一一个字符。

7、A-Za-z表示字母A到字母Z,字母a到字母z。[A-Za-z]表示符合字母A到字母Z,字母a到字母z的任一一个字符

5、+表示匹配1次货多次

6、?表示此组为可选匹配条件

第二个正则因子:(\/{0,3})://

捕获型分组,\/表示一个应该被匹配的/,{0,3}表示\将被匹配0次或者1到3次之间

([0-9.\-A-Za-z]+):qiji123.kerlai.net

捕获型分组,由一个或多个数字 ,“.”,”\-“(转义成”-“),字母A到Z和字母a到z组成

(?::(\d+))?:81

前置:放在非捕获型分组中将不会出现在返回数组中,\d表示匹配数字。整个因子就是匹配前置为:后面跟随一个或多个数字。此分组因子为可选的

(?:\/([^?#]*))?:GoodsBasic/Operate/12678

该分组由/开始,^在此处表示非的意思,即除?#之外的所有字符 最后一个?表示此正则因子分组可选

(?:\?([^#]*))? :q

该分组表示包含0个或多个非#字符

(?:#(.*))?:simen

该分组以#开始,(.)将匹配除结束符以外的所有字符。

$表示这个字符串结束。

到此就已经分析完url的所有分组。接下来大家可以写写电话号码的正则表达式:既能匹配固定电话有能匹配手机号(这个会用到新的字符:|)

时间: 2024-10-14 20:41:37

js正则表达式之解析——URL的正则表达式的相关文章

正则表达式解析url参数

解析url参数正则:(?<=\?|&)[\w\={},:''""]*(?<=[^#]) 正好项目中要用到 捣鼓了好久还是不会.最终放弃使用split分割的方式解析发现好落伍 public static NameValueCollection QueryString(string path) { if (string.IsNullOrEmpty(path)) { return null; } var arr=path.Split(new char[] { '?' },

正确匹配URL的正则表达式

网上流传着多种匹配URL的正则表达式版本,但我经过试验,最好用的还是从stackoverflow上查到的: (https?|ftp|file)://[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|] IP地址.前后有汉字.带参数的,都是OK的. 另外几个有问题的版本: 摘自微软MSDN: (ht|f)tp(s?)\:\/\/[0-9a-zA-Z]([-.\w]*[0-9a-zA-Z])*(:(0-9)*)*(\/?)([a-zA-Z0-9

正则表达式匹配解析过程探讨分析(正则表达式匹配原理)

已经有多篇关于正则表达式介绍的文章,随着我们越来越多使用正则表达式,想对性能做优化.减少我们正则表达式书写匹配Bug.我们不得不进一步深入了解正则表达式执行过程了.下面我们一起学习,分析下正则表达式执行过程.我们会用regexbuddy测试工具分解执行过程,具体工具使用,可以看:正则表达式性能测试工具推荐.优化工具推荐(regexbuddy推荐).要了解正则表达式解析过程前,我们先来熟悉几个概念. 常见正则表达式引擎 引擎决定了正则表达式匹配方法及内部搜索过程,了解它至关重要的.目前主要流行引擎

C# 正则表达式判断IP,URL等及其解释

C# 正则表达式判断IP,URL等及其解释 判断IP格式方法: [csharp] view plain copy public static bool ValidateIPAddress(string ipAddress) { Regex validipregex=new Regex(@"^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$

【我的Linux,我做主!】通配符和正则表达式深层解析

目录:(一)了解通配符和正则的作用(二)通配符的使用(三)正则表达式的使用(四)扩展正则表达式的使用 (一)了解通配符和正则的作用(1.1)在我们日常的工作中,我们都会使用到通配符或者正则表达式.通配符是一种特殊语句,主要有星号(*)和问号(?),用来模糊搜索文件.当查找文件夹时,可以使用它来代替一个或多个真正字符:当不知道真正字符或者懒得输入完整名字时,常常使用通配符代替一个或多个真正的字符.正则表达式是计算机科学的一个概念,正则表达式通常被用来检索.替换那些符合某个模式的文本,正则表达式是对

JS代码预解析原理、函数相关、面向对象

JS重要知识点 这里列出了一些JS重要知识点(不全面,但自己感觉很重要).彻底理解并掌握这些知识点,对于每个想要深入学习JS的朋友应该都是必须的. 讲解还是以示例代码搭配注释的形式,这里做个小目录: JS代码预解析原理(包括三个段落): 函数相关(包括 函数传参,带参数函数的调用方式,闭包): 面向对象(包括 对象创建.原型链,数据类型的检测,继承). JS代码预解析原理 /****************** JS代码预解析原理 ******************//*JS代码预解析.变量作

利用a标签自动解析URL

很多时候我们有从一个URL中提取域名,查询关键字,变量参数值等的需要,而万万没想到可以让浏览器方便地帮我们完成这一任务而不用我们写正则去抓取.方法就在JS代码里先创建一个 a 标签然后将需要解析的URL赋值给 a 的 href 属性,然后就得到了一切我们想要的了. var a = document.createElement('a'); a.href = 'http://www.cnblogs.com/wayou/p/'; console.log(a.host); 利用这一原理,稍微扩展一下,就

正则表达式入门教程&amp;&amp;经典Javascript正则表达式----share

前言 例子: ^[email protected]+\\..+$ 这样的代码曾经多次把我自己给吓退过.可能很多人也是被这样的代码给吓跑的吧.继续阅读本文将让你也可以自由应用这样的代码. 正文 教程:正则表达式30分钟入门教程 一个学习正则表达式不错的教程,对正则表达式有兴趣,但不太了解的童鞋可以参考下 以下内容摘自 常用JQuery数字类型验证正则表达式整理  和    经典Javascript正则表达式         [  留个备份 :) ~~  ]     常用JQuery数字类型验证正则

ANGULAR JS POST 数据解析

ANGULAR js POST 数据的时候,默认是发送JSON数据到服务端的. var params={defId:"1234"}; $http.post(url,params).success(function(data, status, headers, config){                                            }); 我们在服务端获取数据数据时,使用 request.getParmeter("defId");这种方