侯体宗的博客
  • 首页
  • Hyperf版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 中国象棋ai
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

JavaScript 正则表达式(笔记)

前端  /  管理员 发布于 4年前   171

一 什么是正则表达式

// 正则表达式(regular expression)是一个描述字符模式的对象;
// JS定义RegExp类表示正则表达式;
// String和RegExp都定义了使用正则表达式进行强大的模式匹配和文本检索与替换的函数;

二 创建正则表达式

1.创建正则表达式
// JS提供了两种方法创建正则;一种是采用new运算符,另一种是采用字面量方式;
    (1).var box = new RegExp('box');          // 第一个参数是字符串;
            var box = new RegExp('box','ig'); // 第二个参数是可选模式修饰符;
    (2).var box = /box/;                      // 直接使用两个反斜杠;
            var box = /box/ig;                // 添加模式修饰符;

2.RegExp对象测试正则表达式
// RegExp对象包含两个方法:test()和exec();功能基本相似,用于测试字符串匹配;
(1).test():在字符串中查找是否存在指定的正则表达式并返回布尔值;
// test()实例
    var pattern = new RegExp('box','i');     // 创建正则;
    var str = 'This is a Box!';              // 创建字符串;
    alert(pattern.test(str));                // 通过test()方法验证是否匹配;
    // 使用一条语句实现正则匹配;
    alert(/box/i.test('This is a box!'));
(2).exec():在字符串中查找指定正则表达式,若成功,则返回包含该查找字符串的相关信息数组;若失败,返回null;
exec()实例
    var pattern = /box/i;
    var str = 'This is a Box!';
    alert(pattern.exec(str));                // 匹配返回了数组;

3.String对象测试正则表达式

(1).match(pattern):返回pattern中的子串或null;
// math()方法获取匹配数组;
    var pattern = /box/ig;           //开启了全局
    var str = 'This is a Box!,That is a Box too!';
    alert(str.match(pattern));               // 得到数组:[Box,Box]
(2).search(pattern):返回字符串中pattern开始位置;
    var pattern = /box/ig;
    var str = 'This is a Box!,That is a Box too!';
    console.log(str.search(pattern));        // 10;search()查找到即返回,否则返回-1;
(3).replace(pattern,replacement):用replacement替换pattern;
    var pattern = /box/ig;
    var str = 'This is a Box!,That is a Box too';
    console.log(str.replace(pattern,'Tom')); // 将Box替换成了Tom;
(4).split(pattern):返回字符串按指定pattern拆分的数组;
    var pattern = / /ig;
    var str = 'This is a Box!, That is a Box too.';
    console.log(str.split(pattern));         // 将空格拆开分组成数组;

三 获取控制

// 正则表达式元字符是包含特殊含义的字符;
// 它们有一些特殊功能,可以控制匹配模式的方式;
// 反斜杠后的元字符将失去其特殊含义;

1.元字符/元符号    匹配情况
// 字符类:单个字符和数字
.                              匹配除换行符外的任意字符;
[a-z0-9]                    匹配括号中的字符集中任意字符;
[^a-z0-9]                  匹配不在括号中的字符集中的字符;
\d                             匹配数字;
\D                             匹配非数字;
\w                             匹配字母和数字及_
\W                             匹配非字母和数字及_
// 字符类:空白字符
\0                             匹配null字符;
\b                             匹配空格字符;
\f                             匹配进纸字符;
\n                             匹配换行符;
\r                             匹配回车字符;
\t                             匹配制表符;
\s                             匹配空白字符/空格/制表符和换行符;
\S                             匹配非空白字符;
// 字符类:锚字符;
^                              行首匹配;
$                              行尾匹配;
// 字符类:重复字符;
x?                             匹配0个或1个x;
x*                             匹配0个或任意多个x
x+                             匹配至少一个x;
(xyz)+                         匹配至少一个(xyz);
x{m,n}                         匹配最少m个,最多n个x;
// 字符类:替代字符;
this|where|logo                匹配this或where或logo中任意一个;
// 字符类:记录字符;
$1                             匹配第一个分组中的内容;

实例:
pattern = /g..gle/;         // ".":匹配任意一个字符;
pattern = /g.*gle/;         // ".*":匹配0个或任意多个字符;
pattern = /g[a-z]*gle/;     // [a-z]*:匹配任意个a-z中的字符;
pattern = /g[^0-9]*gle/;    // [^0-9]*:匹配任意个非0-9的字符;
pattern = /[a-z][A-Z]+/;    // [A-Z]+:匹配A-Z中的字符一次或多次
pattern = /g\w*gle/;        // \w*:匹配任意多个所有字符数字及_;
pattern = /google\d*/;      // \d*:匹配任意多个数字;
pattern = /\D{7,}/;         // \D{7,}:匹配至少7个非数字;
pattern = /^google$/;       // "^":从开头匹配;"$":从结尾匹配;
var pattern = /8(.*)8/;
var str = 'This is 8google8';
str.match(pattern);
console.log(RegExp.$1);     // 得到第一个分组里的字符串内容;

2.贪婪和惰性
+        +?
?        ??
*        *?
{n}      {n}?
{n,}     {n,}?
{n,m} {n,m}?
var pattern = /[a-z]+?/;        //"?":关闭了贪婪匹配,只替换了第一个;
var str = 'abcdefg';
alert(str.replace(pattern,'xxx'));    // =>xxxdefg;

// 使用exec返回数组
var pattern = /^[a-z]+\s[0-9]{4}$/i;
var str  = 'google 2015';
alert(pattern.exec(str)[0]);    // 返回整个字符串=>google 2015;

var pattern = /^[a-z]+/i;
var str = 'google 2015';
alert(pattern.exec(str));       //返回匹配到的字母=>google;

// 使用特殊字符匹配;
var pattern = /\.\[\/b\]/;
var str = '.[/b]';
alert(pattern.test(str));

// 使用换行模式
var pattern = /^\d+/mg;
var str = '1.baidu\n2.google\n3.bing';
var result = str.replace(pattern,"#");
alert(result);                  // #.baidu  #.google  #.bing;

四 常用的正则

1.检查邮政编码
// 共6位数字,第一位不能为0;
var pattern = /[1-9][0-9]{5}/;
var str = '224000';
alert(pattern.test(str));

2.检查文件压缩包
// 数字+字母+_+.+zip|rar|gz
var pattern = /[\w]+\.zip|rar|gz/;
var str = '123.zip';
alert(pattern.test(str));

3.删除多余空格
var pattern = /\s/g;          // 必须全局,才能全部匹配;
var str = '111 222 333';
var result = str.replace(pattern,"");

4.删除首尾空格
var pattern = /^\s+/;                        // 强制首;
var str = '    goo  gle   ';
var result = str.replace(pattern,"");        // 删除行首空格;
pattern = /\s+$/;                            // 强制尾;
result = result.replace(pattern,"");         // 删除行尾空格;
 
5.简单的电子邮件验证
var pattern = /^([a-zA-Z0-9_\.\-]+)@([a-zA-Z0-0_\.\-]+)\.([a-zA-Z]{2,4})$/;
var str = '[email protected]';
alert(pattern.test(str));


  • 上一条:
    AS3 js正则表达式 反向引用(backreference)
    下一条:
    详解Vue中CSS样式穿透问题
  • 昵称:

    邮箱:

    0条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • ThinkPHP
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • 使用 Alpine.js 排序插件对元素进行排序(0个评论)
    • 在js中使用jszip + file-saver实现批量下载OSS文件功能示例(0个评论)
    • 在vue中实现父页面按钮显示子组件中的el-dialog效果(0个评论)
    • 使用mock-server实现模拟接口对接流程步骤(0个评论)
    • vue项目打包程序实现把项目打包成一个exe可执行程序(0个评论)
    • 近期文章
    • 在go语言中使用api.geonames.org接口实现根据国际邮政编码获取地址信息功能(1个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf分页文件功能(0个评论)
    • gmail发邮件报错:534 5.7.9 Application-specific password required...解决方案(0个评论)
    • 欧盟关于强迫劳动的规定的官方举报渠道及官方举报网站(0个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf文件功能(0个评论)
    • Laravel从Accel获得5700万美元A轮融资(0个评论)
    • 在go + gin中gorm实现指定搜索/区间搜索分页列表功能接口实例(0个评论)
    • 在go语言中实现IP/CIDR的ip和netmask互转及IP段形式互转及ip是否存在IP/CIDR(0个评论)
    • PHP 8.4 Alpha 1现已发布!(0个评论)
    • Laravel 11.15版本发布 - Eloquent Builder中添加的泛型(0个评论)
    • 近期评论
    • 122 在

      学历:一种延缓就业设计,生活需求下的权衡之选中评论 工作几年后,报名考研了,到现在还没认真学习备考,迷茫中。作为一名北漂互联网打工人..
    • 123 在

      Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..
    • 原梓番博客 在

      在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..
    • 博主 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..
    • 1111 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..
    • 2016-10
    • 2016-11
    • 2017-06
    • 2017-07
    • 2017-08
    • 2017-09
    • 2017-10
    • 2017-11
    • 2018-03
    • 2018-04
    • 2018-05
    • 2018-06
    • 2018-09
    • 2018-11
    • 2018-12
    • 2019-02
    • 2020-03
    • 2020-04
    • 2020-05
    • 2020-06
    • 2021-04
    • 2021-05
    • 2021-07
    • 2021-08
    • 2021-09
    • 2021-10
    • 2021-11
    • 2022-08
    • 2022-09
    • 2022-10
    • 2022-11
    • 2022-12
    • 2023-01
    • 2023-02
    • 2023-03
    • 2023-04
    • 2023-05
    • 2023-06
    • 2023-07
    • 2023-09
    • 2023-10
    • 2023-11
    • 2023-12
    • 2024-01
    • 2024-02
    • 2024-03
    • 2024-04
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客