js正则表达式 URL格式匹配详解

0、URL格式

protocol :// hostname[:port] / path / [;parameters][?query]#fragment

[;parameters]没见过 这里就不做相关匹配了

1、代码及运行结果

‘use strict‘;
{
    // URL地址匹配格式: protocol :// hostname[:port] / path / [;parameters][?query]#fragment
    // [;parameters]:这都没见过这东西,就不匹配了。
    let url = [
        ‘https://www.baidu.com/‘,
        ‘http://192.168.1.1‘,
        ‘http://192.168.1.1:8080‘,
        ‘https://news.163.com/18/1224/15/E3Q6EJDA0001875N.html#top‘,
        ‘https://baidu.com:80/?wd=wq&url=ksks#ddsx2‘,
        ‘http://192.168.1.1/p/#name‘,
        ‘https://neets.cc/subcriberlist?recommendInventoryId=QNZfMjCRQtS4z8MQrFa7qo‘
    ]
        , result = null
        , matcht = /^(https?:\/\/)([0-9a-z.]+)(:[0-9]+)?([/0-9a-z.]+)?(\?[0-9a-z&=]+)?(#[0-9-a-z]+)?/i
        , info = [‘完整URL‘, ‘协议‘, ‘地址‘, ‘端口‘, ‘路径‘, ‘查询‘, ‘锚点‘]
    url.forEach((value) => {
        result = matcht.exec(value);
        console.log(‘---------------------------------------------------------------------------------‘);
        for (let i = 0; i < result.length; i++) {
            console.log(`${info[i]} = ${result[i]}`);
        }
    })
}

2、元字符解释

元字符                               匹配对象                                                                         
.      任意一个字符
[...] 字符组 字符组内的任意一个字符
[^...] 排除字符组 排除字符组内的所有字符
\char 转义符 转义元字符 或 反引用
提供计数功能的元字符
+ 加号 至少一次
? 问号 匹配一次,但非必须的
* 星号 0次或多次,但非必须的
其它元字符
(...) 括号     限定或界定符,也用于反引用

3、协议匹配规则

常见URL协议有http、https等等,所以这里就做针对http和https的匹配。
匹配规则 :^(https?:\/\/)

4、主机名匹配规则

主机名格式为:xxx.xxx.xxx 或 xxx.xxx 2种形式 由字母或数字组成。
如:www.baidu.com  baidu.com  127.0.0.1
匹配规则为:([0-9a-zA-z.]+)

5、端口匹配

端口部分是由冒号开头后接数值两部分组成而且web默认端口80是不显示在后面的,所以就有2种情况存在或不存在。
如:127.0.0.1:8080  127.0.0.0
匹配规则为:(:[0-9]+)?

6、路径匹配

路径是由字母、数字、斜杠、点组成。在访问网站首页时后面没有路径地址,所以这块如果存在就匹配。
如:/xxx/xxxx/xxx.html 、 /xxx/xxx
匹配规则为:([/0-9a-zA-Z.]+)?

7、查询字符串匹配

查询字符串的格式为:?xxx=1&ddd=2 或 ?xx=2。由于这块不是必须项所以在匹配时,如果存在就匹配,不存在就算了。
匹配规则为:(\?[0-9a-zA-Z&=]+)?

8、信息片断匹配

信息片断是由#、字母、数值组成。由于这块不是必须项所以在匹配时,如果存在就匹配,不存在就算了。
匹配规则为:(#[0-9-a-zA-Z]+)?

9:其它

我的百度经验地址:https://jingyan.baidu.com/article/a24b33cdce7a0519fe002bf9.html

代码分享地址:https://pan.baidu.com/s/1bE5DUP4knVa0ifDs0kNILQ

原文地址:https://www.cnblogs.com/whnba/p/10178541.html

时间: 2024-10-02 19:25:56

js正则表达式 URL格式匹配详解的相关文章

JS正则表达式的分组匹配

什么是分组 通俗来说,我理解的分组就是在正则表达式中用()包起来的内容代表了一个分组,像这样的: var reg = /(\d{2})/ reg.test('12'); //true 这里reg中的(/d{2})就表示一个分组,匹配两位数字 分组内容的的形式 一个分组中可以像上面这样有一个具体的表达式,这样可以优雅地表达一个重复的字符串 /hahaha/ /(ha){3}/ 这两个表达式是等效的,但有了分组之后可以更急简洁. 体格分组中还可以有多个候选表达式,例如 var reg = /I co

ThinkPHP URL 路由功能详解与实例

本节内容导读 本节内容主要介绍 ThinkPHP 路由功能与 U方法的使用,分为下面几个部分: ThinkPHP URL 路由功能详解:见本页下面文字 ThinkPHP 正则路由与实例 ThinkPHP U方法:使用U方法自动生成URL超链接 ThinkPHP 3.0 版本的路由功能较 2.x 版本有较大的变更,如果您的版本是 2.x,请参阅下面的文档: ThinkPHP 2.0 URL 路由(2.0版本适用) ThinkPHP 泛路由使用详解(2.0版本适用) ThinkPHP 2.1 路由规

js showModalDialog参数的使用详解(转)

js showModalDialog参数的使用详解_javascript技巧_脚本之家 http://www.jb51.net/article/45281.htm 本篇文章主要是对js中showModalDialog参数的使用进行了详细的分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助 基本介绍: showModalDialog()              (IE 4+ 支持)showModelessDialog()           (IE 5+ 支持)window.showModa

js的offsetParent属性用法详解

js的offsetParent属性用法详解:此属性是javascript中较为常用的属性,对于它的良好掌握也是非常有必要的,下面就通过代码实例介绍一下它的用法,希望能够给需要的朋友带来一定的帮助.一.基本介绍:此属性可以返回距离指定元素最近的采用定位(position属性值为fixed.relative或者absolute)父级元素,如果父级元素中没有采用定位的元素,则返回body对象的引用.语法结构: obj.offsetParent 二.代码实例: <!DOCTYPE html> <

js对象浅拷贝和深拷贝详解

js对象浅拷贝和深拷贝详解 作者:i10630226 字体:[增加 减小] 类型:转载 时间:2016-09-05我要评论 这篇文章主要为大家详细介绍了JavaScript对象的浅拷贝和深拷贝代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 本文为大家分享了JavaScript对象的浅拷贝和深拷贝代码,供大家参考,具体内容如下 1.浅拷贝 拷贝就是把父对像的属性,全部拷贝给子对象. 下面这个函数,就是在做拷贝: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 var

格式设置详解

AxureRP 6.0以前版本的格式设置都是在右键菜单里面的,不是很方便操作,6.0版本将这个功能分到右侧面板里面,并且增加了页面级的格式设置,大大方便了操作设 置,包括增加了对手绘风格格式的默认支持,再也不需要通过加载额外的手绘组件库来完成了.AxureRP的组件和页面级的格式设置,其实就是网页设计当中 的CSS代码,只不过用图形界面实现了,这样更直观,也更好掌握,毕竟不是所有的产品设计人员都懂CSS的. 这里介绍一下各种格式设置,其实大家如果用中文版的话,是比较一目了然的,虽然汉化包里面广告

js 中中括号,大括号使用详解

一.{ } 大括号,表示定义一个对象,大部分情况下要有成对的属性和值,或是函数.如:var LangShen = {"Name":"Langshen","AGE":"28"};上面声明了一个名为"LangShen"的对象,多个属性或函数用,(逗号)隔开,因为是对象的属性,所以访问时,应该用.(点)来层层访问:LangShen.Name.LangShen.AGE,当然我们也可以用数组的方式来访问,如:Lang

JS中的event 对象详解

JS中的event 对象详解 JS的event对象 Event属性和方法: 1. type:事件的类型,如onlick中的click: 2. srcElement/target:事件源,就是发生事件的元素: 3. button:声明被按下的鼠标键,整数,1代表左键,2代表右键,4代表中键,如果按下多个键,酒把这些值加起来,所以3就代表左右键同时按下:(firefox中 0代表左键,1代表中间键,2代表右键) 4. clientX/clientY:事件发生的时候,鼠标相对于浏览器窗口可视文档区域的

Node.js开发入门—Stream用法详解

Stream是Node.js中非常重要的一个模块,应用广泛.一个流是一个具备了可读.可写或既可读又可写能力的接口,通过这些接口,我们可以和磁盘文件.套接字.HTTP请求来交互,实现数据从一个地方流动到另一个地方的功能. 所有的流都实现了EventEmitter的接口,具备事件能力,通过发射事件来反馈流的状态.比如有错误发生时会发射"error"事件,有数据可被读取时发射"data"事件.这样我们就可以注册监听器来处理某个事件,达到我们的目的. Node.js定义了R