js正则表达式

206 阅读3分钟

1. 前言

上篇讲到js如何获取url参数值时、就有提到说正则表达式、故引出该文(若对获取url参数感兴趣的话、可戳此链接:js如何获取url参数值

2. 正则表达式

用于判断某些字符是否符合要求。代码量更少、更直观

2.1 如何定义正则表达式?

2.1.1 直接量语法
/正则表达式/修饰符
2.1.2 创建RegExp对象

RegExp对象表示正则表达式、对字符串执行模式匹配的强大工具.

new RegExp('正则表达式','修饰符‘)

RegExp对象具有的方法:
-test() 检索字符串中指定的值、返回true/false;
-exec() 检索字符串中指定的值、匹配成功返回一个数组、匹配失败则返回null;

2.2 修饰符

-i: 执行对大小写不敏感的匹配
-g: 执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)
-m: 执行多行匹配

2.3 基本语法

  1. 常见的正则表达式 | 正则表达式 | 描述 | 描述 | | ---- | ---- | ---- | | [abc] | 查找方括号之间的任何字符 | 连续字符 | | [0-9] | 查找任何从0-9的数字 | - | | [a-z] | 查找任何从小写a-z的字符 | - | | [A-Z] | 查找任何从大写A-Z的字符 | - | | [x|y] | 查找任何以|分隔的选项| - |

  2. 常见的元字符 | 元字符 | 描述 | | ---- | ---- | | \d | 查找数字 | | \s | 查找空白字符 | | \w | 匹配基本的ASCIIz字符、如a-z、A-Z、0-9、_ |

  3. 常见的量词 | 元字符 | 描述 | | ---- | ---- | | n+ | 匹配任何包含至少一个n的字符串 | | n* | 匹配任何包含0个或者多个n的字符串 | | n? | 匹配任何包含0个或者一个n的字符串 |

说了这么多概念的东西、来个Demo演示下:

var reg=/hello \w{3,12}/; // 匹配带hello 字符、并后面的字符长度为3-12位[a-z、A-Z、0-9、_]
console.log(reg.exec('hello wo'));  // null  
// 需要留意下返回值
console.log(reg.exec('hello world世界')); // ["hello world", index: 0, input: "hello world世界", groups: undefined]

具体的返回值如下图所示: image.png

3. 如何写一个正则表达式

每次看到正则表达式搞不懂、稀里糊涂的、不知道咩是元字符、量词。这里主要讲解下如何做拆分、去实现正则表达式的编写.
重要提示:

  • 需要用^和$指定起止位置; 验证手机号码
    第一步: 拆成(取值范围 + 量词)的组合
(数字1, 1个) + (数字0-9, 10个)

第二步: 将第一步翻译成正则表达式

1 + [0-9]{10}

第三步: 将翻译好的组合(取值返回+量词)进行拼接

// 这里用\d是有这样的元字符、最终的正则表达式如下图:
/^1\d{10}$/

测试Demo:

const phone = '18881'
console.log(/^1\d{10}$/.test(phone)) // false

4 正则表达式扩展

4.1 match()

检索指定的值, 匹配成功返回匹配结果的数组、不匹配则返回null。

var reg=/hello \w{3,12}/; 
console.log('hello wo'.match(reg));  
console.log('hello world世界'.match(reg));

输出结果如下: image.png

4.2 search()

search() 检索字符串中指定的子字符串或检索与正则表达式相匹配的子字符串, 返回子串的起始位置;

var str = "Visit Runoob!"; 
var n = str.search(/Runoob/i);
console.log('n',n) // n 6

4.3 replace()

replace() 用于在字符串中用一些字符替换另一些字符, 或替换一个与正则表达式匹配的子串;

var str1 = 'microsoft okok'
var txt = str1.replace(/microsoft/i,"Runoob");
console.log('txt',txt) // txt Runoob okok

4.4 split()

将字符串进行分隔、组成数组

var reg=/hello/; 
console.log('hello world世界'.split(reg)); // ["", " world"]

5. 写在最后

若有错误之处, 恳请留言, 定会及时更正! 若觉着对您有帮助的话恳请点个赞或着收藏吧!