JavaScript正则表达式

程序员文章站 2022-09-07 17:38:17

正则表达式在程序应用中的使用是非常广泛的。首先正则表达式一般要写两个斜杠之间：/正则表达式/ 其次有两个符号 ^ 和 $ ，符号 ^ 代表一个字符串的开始，而 $ 则代表一个字符串的结束。举个例子：这里声明一个字符串str,声明一个select,表示所有以asd开头的字符串。表示所有以jkl ......

基础知识

正则表达式是用于匹配字符串中字符组合的模式，在 JavaScript中，正则表达式也是对象。

正则表达式是在宿主环境下运行的，如js/php/node.js 等
正则表达式在其他语言知识中也是可用的,只是会有些函数使用上的区别

正则表达式是字符串的一种匹配模式，专门为简化字符串操作而生
说白了就是为了检索一个字符串中特定字符的规则,
正则并不是单纯的字符串,而是一种逻辑公式

对比分析

与普通函数操作字符串来比较，正则表达式可以写出更简洁、功能强大的代码
下面使用获取字符串中的所有数字来比较函数与正则的差异。

		//普通方式获取数字
        let hd = "gansu1234lanz4545";
        let nums = [...hd].filter(a => !Number.isNaN(parseInt(a)));
        console.log(nums.join(""));

使用正则获取数字

        let hd = "gansu1234lanz4545";
        console.log(hd.match(/\d/g).join(''));

创建正则

JavaScript 提供了字面量和对象两种方式来创建正则表达式.

通过构造函数创建
var reg = new RegExp();

字面量的方式创建
var reg = / /;

字面量方式

使用 // 包裹的字面量创建方式是推荐的作法，但它不能在其中使用变量

        let hd = "happy";
        console.log((/a/.test(hd)))     //true
        console.log((/x/.test(hd)))     //false
        //test()方法就是以正则为规则检查字符串中是否包含正则内容

对象创建

正则表达式是一个通过内置的构造函数构造出来的对象

var reg = new RegExp('text');  // 实例化一个正则对象

参数

第一参数是正则

第二个参数是修饰符 i g m

例子

var reg = new RegExp('text');  // 实例化一个正则对象
var str = 'This is a text';
console.log(reg.test(str));   // true;
// test()方法就是以正则为规则检查字符串中是否包含正则内容

正则表达式的方法

test

正则对象的一个方法，它表示该字符串（参数）是否匹配我们的正则规则。

使用方式

reg.test(str)

参数

str: 是需要查询(匹配)的字符串

返回值

布尔值,匹配成功返回true,否则返回false

var reg = /wuwei/;
var str = 'hello wuwei';  
// 判断str字符串是否匹配我们reg规则
console.log(reg.test(str));

exec

提取匹配成功的子字符串

使用方式

reg.exec(str)

参数

str: 是需要查询(匹配)的字符串

返回值

布尔值,匹配成功返回true,否则返回false

不使用 g 修饰符时与 match 方法使用相似，使用 g 修饰符后可以循环调用直到全部匹配完。
使用 g 修饰符多次操作时使用同一个正则，即把正则定义为变量使用
使用 g 修饰符最后匹配不到时返回 null

var reg = /wuwei/g;
var str = 'hello wuwei wuwei aaa';
// 判断str字符串是否匹配我们reg规则
console.log(reg.exec(str));
// ["wuwei", index: 6, input: "hello wuwei wuwei aaa", groups: undefined]

var reg = /wuwei/g;
var str = 'hello wuwei wuweiaaa';
// 判断str字符串是否匹配我们reg规则
console.log(str.match(reg));
// ["wuwei", "wuwei"]

可以使用正则的字符串方法

search 获取字符在字符串中的位置
split 字符串转化成数组
replace 字符串替换

常用符号

转义

转换意义,改变意义

转义符号 \

转义字符 \字符( 把原有的字符转换意义)

	var str = '你是很"牛逼"的一个人'
	// 如果我就想包裹单引号
	var str = '你是很'牛逼'的一个人''
	// 直接只用发现牛逼会变成一个变量,变量和字符串这么拼接就是错的
	var str = '你是很\'牛逼\'的一个人'' 
	// \' 就是转义字符
	// 同样的\ 代表转义,那么我就想在网页中显示\ 就可以用转义
	var str = '你是很\\牛逼\\的一个人''

有一些规定好的转义字符

\n 换行 \t 制表符 \r 回车

选择符

| 这个符号带表选择修释符，也就是 | 左右两侧有一个匹配到就可以。

        //匹配字符是否包括py或者st
        let str = 'happy';
        console.log(/py|st/.test(str));    //true

字符边界

使用字符边界符用于控制匹配内容的开始与结束约定。

边界符	说明
^	匹配字符串的开始
$	匹配字符串的结束，忽略换行符

内容必须以www开始

        //内容必须以www开始
        let reg = new RegExp(/^www/);
        console.log(reg.test('www.baidu.com'));        //true
        console.log(reg.test('http://www.baidu.com')); //false

内容必须以.com结束

        // 内容必须以.com结束
        let reg = new RegExp(/.com$/); 
        console.log(reg.test('www.baidu.com')); //true
        console.log(reg.test('abc.cn'));        //false

检测用户名长度为3~6位，且只能为字母。如果不使用 ^与$ 限制将得不到正确结果

<body>
  <input type="text" name="username" />
</body>

<script>
  document
    .querySelector(`[name="username"]`)
    .addEventListener("keyup", function() {
      let res = this.value.match(/^[a-z]{3,6}$/i);
      console.log(res);
      console.log(res ? "正确" : "失败");
    });
</script>

修饰符

i 表示不区分大小写 ignoreCase

g 表示全局匹配 global

m 表示换行匹配 multiline

i不区分大小写

字符串片段,大小写默认敏感,默认区分大小写

// 不区分大小写
var reg = new RegExp('Text');  // 实例化一个正则对象
var str = 'This is a text';
console.log(reg.test(str));   // false;

//  区分大小写
var reg = new RegExp('Text','i');  // 实例化一个正则对象
var str = 'This is a text';
console.log(reg.test(str));   // true;

g全局匹配

默认值匹配一个

// 不加全局匹配
var reg = new RegExp('text');  // 实例化一个正则对象
var str = 'This is a text and text and text';
console.log(str.match(reg));
// ["text", index: 10, input: "This is a text and text and text", groups: undefined]

// 加全局匹配修饰符
var reg = new RegExp('text','g');  // 实例化一个正则对象
var str = 'This is a text and text and text';
console.log(str.match(reg));
// ["text", "text", "text"]

m多行匹配

var reg = new RegExp('^Text');  // 实例化一个正则对象
var str = 'This is a \nText and';
console.log(str.match(reg));  // null

// 多行匹配
var reg = new RegExp('^Text','m');  // 实例化一个正则对象
var str = 'This is a \nText and';
console.log(str.match(reg));// ["Text", index: 11, input: "This is a ↵Text and", groups: undefined]

元子字符

元字符是正则表达式中的最小元素，只代表单一（一个）字符

字符列表

元字符	说明	示例
\d	匹配任意一个数字	[0-9]
\D	与除了数字以外的任何一个字符匹配	[^0-9]
\w	与任意一个英文字母,数字或下划线匹配	[a-zA-Z_]
\W	除了字母,数字或下划线外与任何字符匹配	[^a-zA-Z_]
\s	任意一个空白字符匹配，如空格，制表符\t，换行符\n	[\n\f\r\t\v]
\S	除了空白符外任意一个字符匹配	[^\n\f\r\t\v]
.	匹配除换行符外的任意字符

使用体验

匹配所有数字

        //匹配所有数字
        let str = 'happy123';
        console.log(str.match(/\d/g)); // ["1", "2", "3"]

匹配所有电话号码

        //匹配所有电话号码
        let str = `李雷:010-12345678,韩梅梅:020-98765432` ;
        console.log(str.match(/\d{3}-\d{7,8}/g));   //["010-12345678", "020-98765432"]

获取数字字母下划线

        // 匹配字母数字下划线
        let str = '123@qq.com_$'
        console.log(str.match(/\w/g));       //["1", "2", "3", "q", "q", "c", "o", "m", "_"]

匹配与任意一个空白字符匹配

console.log(/\s/.test(" ")); //true
console.log(/\s/.test("\n")); //true

匹配除了空白符外任意一个字符匹配

let hd = "hdcms@";
console.log(hd.match(/\S/g)); //["2", "0", "1", "0","@"]

如果匹配点则需要转义

        let str = `baidu@com`;
        console.log(/baidu.com/i.test(str)); //true
        console.log(/baidu\.com/i.test(str)); //false

使用.匹配除换行符外任意字符，下面匹配不到hdcms.com 因为有换行符

       const url = `
            https://www.baidu.com
            hdcms.com
        `;
        console.log(url.match(/.+/));

原子表

在一组字符中匹配某个元字符，在正则表达式中通过元字符表来完成，就是放到[] (方括号)中。

使用语法

原子表	说明
[]	只匹配其中的一个原子
[^]	只匹配"除了"其中字符的任意一个原子
[0-9]	匹配0-9任何一个数字
[a-z]	匹配小写a-z任何一个字母
[A-Z]	匹配大写A-Z任何一个字母

实例操作

使用[]匹配其中任意字符即成功，下例中匹配ex任何一个字符，而不会当成一个整体来对待

        const str= 'happy evey day';
        console.log(/ex/.test(str)); //false
        console.log(/[ev]/.test(str)); //true

日期的匹配

        let tel = "2022-02-23";
        let date = '2020/07/29';
        let reg = new RegExp(/\d{4}([-\/])\d{2}\1\d{2}/g)
        console.log(tel.match(reg));  	//["2022-02-23"]
        console.log(date.match(reg)); 	//["2020/07/29"]

重复匹配

基本使用

基本使用
如果要重复匹配一些内容时我们要使用重复匹配修饰符，包括以下几种。

符号	说明
*	重复零次或更多次
+	重复一次或更多次
?	重复零次或一次
{n}	重复n次
{n,}	重复n次或更多次
{n,m}	重复n到m次

因为正则最小单位是元字符，而我们很少只匹配一个元字符如a、b所以基本上重复匹配在每条正则语句中都是必用到的内容。

默认情况下重复选项对单个字符进行重复匹配，即不是贪婪匹配

        let str = "hdddd";
        console.log(str.match(/hd+/i)); //hddd

使用原子组后则对整个组重复匹配

        let str = "hdddd";
        console.log(str.match(/(hd)+/ig)); //hd

验证用户名只能为3~8位的字母或数字，并以字母开始

   <input type="text" name="username" />
    <script>
        let input = document.querySelector(`[name="username"]`);
        input.addEventListener("keyup", e => {
            const value = e.target.value;
            let state = /^[a-z][\w]{2,7}$/i.test(value);
            console.log(
                state ? "正确！" : "用户名只能为3~8位的字母或数字，并以字母开始"
            );
        });
   </script>

禁止贪婪

正则表达式在进行重复匹配时，默认是贪婪匹配模式，也就是说会尽量匹配更多内容，但是有的时候我们并不希望他匹配更多内容，这时可以通过?进行修饰来禁止重复匹配

使用	说明
*?	重复任意次，但尽可能少重复
+?	重复1次或更多次，但尽可能少重复
??	重复0次或1次，但尽可能少重复
{n,m}?	重复n到m次，但尽可能少重复
{n,}?	重复n次以上，但尽可能少重复

下面是禁止贪婪的语法例子

let str = "aaa";
console.log(str.match(/a+/)); //aaa
console.log(str.match(/a+?/)); //a
console.log(str.match(/a{2,3}?/)); //aa
console.log(str.match(/a{2,}?/)); //aa

字符方法

search

search() 方法用于检索字符串中指定的子字符串，也可以使用正则表达式搜索，返回值为索引位置

let str = "baidu.com";
console.log(str.search("com"));

使用正则表达式搜索

console.log(str.search(/\.com/i));

match

直接使用字符串搜索

let str = "baidu.com";
console.log(str.match("com"));

使用正则获取内容，下面是简单的搜索字符串

        let str = "happy";
        let res = str.match(/a/);
        console.log(res);
        console.log(res[0]); //匹配的结果
        console.log(res.index); //出现的位置

        // ["a", index: 1, input: "happy", groups: undefined]
        //  a
        //  1

如果使用 g 修饰符时，就不会有结果的详细信息了（可以使用exec）

        let str = "happy";
        let res = str.match(/a/g);  //["a"]

split

用于使用字符串或正则表达式分隔字符串，下面是使用字符串分隔日期

let str = "2023-02-12";
console.log(str.split("-")); //["2023", "02", "12"]

如果日期的连接符不确定，那就要使用正则操作了

let str = "2023/02-12";
console.log(str.split(/-|\//));

本文地址：https://blog.csdn.net/lhrdlp/article/details/107469180

JavaScript正则表达式

文章目录

基础知识

对比分析

创建正则

字面量方式

对象创建

正则表达式的方法

test

exec

常用符号

转义

选择符

字符边界

修饰符

i不区分大小写

g全局匹配

m多行匹配

元子字符

字符列表

使用体验

原子表

使用语法

实例操作

重复匹配

基本使用

禁止贪婪

字符方法

search

match

split

JavaScript Ajax实现异步通信

javascript事件捕获机制【深入分析IE和DOM中的事件模型】

javascript基于原型链的继承及call和apply函数用法分析

javascript读取文本节点方法小结

JavaScript常见的五种数组去重的方式

javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】

EditPlus中的正则表达式 实战(2)

javascript中数组（Array)对象和字符串（String)对象的常用方法总结

javascript三种输出方式实例讲解

JS经典正则表达式笔试题汇总

EditPlus中的正则表达式实战(2)