当前位置： 移动技术网 > IT编程>开发语言>JavaScript > JavaScript正则表达式

JavaScript正则表达式

2018年04月26日  | 移动技术网IT编程  | 我要评论

文章目录

基础知识

正则表达式是用于匹配字符串中字符组合的模式，在 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 提供了字面量和对象两种方式来创建正则表达式.

  1. 通过构造函数创建
    var reg = new RegExp();
  2. 字面量的方式创建
    var reg = / /;

字面量方式

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

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

对象创建

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

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

参数

  1. 第一参数是正则
  2. 第二个参数是修饰符 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"]

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

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

常用符号

转义

转换意义,改变意义

  1. 转义符号 \
  2. 转义字符 \字符( 把原有的字符转换意义)
	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>

修饰符

  1. i 表示不区分大小写 ignoreCase
  2. g 表示全局匹配 global
  3. 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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网