正则表达式

JavaScript 正则表达式免费看

正则表达式语法结构、创建正则表达式、正则表达式修饰符、正则表达式模式、使用正则表达式

2020-06-18侠课岛    基础入门       

前端/前端必修/JavaScript 基础知识梳理 6     0     641

本节我们要学习 JavaScript 中的正则表达式,首先我们要搞清楚什么是正则表达式?

正则表达式是由一个字符序列形成的搜索模式,可以用搜索模式来描述想要查询的内容。正则表达式可以是一个简单的字符,也可以是更复杂的模式。正则表达式可以用于所有文本搜索和替换操作。

正则表达式语法结构

语法格式:

/pattern/modifiers;

pattern 是正则表达式主体(用于检索)、modifiers 是修饰符,修饰符是可选的。

示例:

例如我们可以试着定义一个正则表达式:

var patt = /xkd/i;

其中 /xkd/i 就是一个正则表达式,xkd 是正则表达式主体,在搜索中使用。i 是修饰符,用于把搜索修改为大小写不敏感。

创建正则表达式

JavaScript 中有两种创建正则表达式的方法:

第一种就是上面讲到的 /pattern/modifiers 的形式,例如:

var re = /xkd/;

这种方式创建正则表达式,在脚本加载后,正则表达式字面量就会被编译,当正则表达式保持不变时使用此方法可获得更好的性能。

另外一种方法是通过调用 RegExp 对象的构造函数来创建,如下所示:

var re = new RegExp("xkd");

在脚本运行过程中,用构造函数创建的正则表达式会被编译。如果正则表达式会改变,或者它会从用户输入等来源中动态地产生,就需要使用构造函数来创建正则表达式。

示例:

现有一个字符串如下所示:

var str = "ABCDEFGHIJKLM"; 

我们需要检索这个字符串中是否有字母“F”,正则表达式写法如下:

var str = "ABCDEFGHIJKLM"; 
var result = str.search(/F/);  // 正则表达式
console.log(result);    // 输出: 5

我们可以看到上述代码输出结果为5,也就是说检索到字符串索引为 5 的位置,有一个与正则表达式 /F/ 匹配的子字符串。

正则表达式修饰符

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

正则表达式模式

元字符是拥有特殊含义的字符:

  • \d:查找数字,等价 [0-9]
  • \D:查找非数字,等价 [0-9]
  • \s:查找空白字符。
  • \S:查找非空白字符。
  • \b:匹配单词边界。
  • \B:匹配非单词边界。
  • \w:等价于 [a-zA-Z0-9_]
  • \W:等价于 [^a-zA-Z0-9_]
  • \n:匹配换行符。
  • \uxxxx:查找以十六进制数 xxxx 规定的 Unicode 字符。

方括号用于查找某个范围内的字符:

  • ^:以...开头。
  • $:以...结尾。
  • [...]:方括号内任意字符。
  • [^...]:不在方括号内任意字符。
  • [abc]:查找方括号之间的任何字符。
  • [0-9]:查找任何从 0 至 9 的数字。
  • (x|y):查找任何以 | 分隔的选项。

定义量词:

  • *:匹配任何包含零个或多个 n 的字符串。

  • +:匹配任何包含至少一个 n 的字符串。

  • ?:匹配任何包含零个或一个 n 的字符串。

  • {n,m}:匹配 n 至 m 次,包括 n 和 m次。

  • {n,}:匹配前一项至少 n 次。

  • {n}:匹配前一项 n 次。

使用正则表达式

正则表达式可以被用于 RegExp 的 exectest 方法以及 Stringmatchreplacesearchsplit 方法。

  • exec()方法:是一个正则表达式方法,用于检索字符串中的正则表达式的匹配,返回一个数组,如果未匹配到则返回 null。
示例:

例如我们检索某个字符串中的内容,如果匹配到字符串中有 xkd 这个子字符串,则会返回一个数组,否则会返回null:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS_侠课岛(9xkd.com)</title>
</head>
<body>
<script>
  var name1 = "xkd";
  var name2 = "summer"
  var re = /xkd/;
  var r1 = re.exec(name1);
  var r2 = re.exec(name2);
  console.log(r1);
  console.log(r2);
</script>
</body>
</html>

在浏览器中打开:

从返回结果可以看出,对于字符串 name1 和 name2 来说,name1 中成功匹配到子字符串 xkd,name2 中则匹配不成功,所以返回 null。

  • test()方法:一个在字符串中测试是否匹配的 RegExp 方法,返回 true 或 false。
示例:

例如搜索字符串是否以字母 a 开头,是则返回 true,不是则返回 false,代码可以像下面这样写:

// 用于检索的两个字符串
var str1 = "123456789";
var str2 = "abcdefg"
// 正则表达式,否则以字母a开头
var re = /^a/;     

// 分别匹配两个字符串
var r1 = re.test(str1);
var r2 = re.test(str2);

// 输出匹配结果
console.log(r1);
console.log(r2);

输出:

false
true

从代码的输出结果我们可以看出,字符串str1 不是以字母 a 开头(返回 false),而字符串 str2 是以 a 开头 (返回 true)。

  • search()方法:用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串,并返回子字符串的起始位置。如果失败返回-1。
示例:

例如我们可以想知道字符串变量 content 中是否包含子字符串 you

var content = "Hello xkd, Do you have time tomorrow?";
re = /you/;
var result = content.search(re);
console.log(result)

输出:

14
  • replace()方法:用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。
示例:

例如使用 replace 方法将变量 content 中的 “xkd” 替换成 “summer”:

var content = "Hello xkd, Do you have time tomorrow?";
re = /xkd/;
var result = content.replace(re, 'summer');
console.log(result)

执行代码,会输出:

Hello summer, Do you have time tomorrow?
  • match()方法:一个在字符串中执行查找匹配的 String 方法,它返回一个数组,在未匹配到时会返回 null。
示例:

使用 match 方法某个字符中是否包含字母 x

var str1 = "hello xkd";
var str2 = "Wow, that's great";
re = /x/;
var result1 = str1.match(re);
var result2 = str2.match(re);
console.log(result1);
console.log(result2);

执行代码,会输出:

[ 'x', index: 6, input: 'hello xkd', groups: undefined ]
null

上面代码中,定义了两个字符串,其中字符串 str1 中成功匹配到了字母 x,返回了一个数组,数组中 index 为匹配的结果的开始位置,input 是搜索的字符串。而str2 中没有字母 x ,匹配失败,所以输出结果为 null。

一些常用的正则表达式

在开发中,我们可能会经常用到正则表达式的验证,特别是在表单中,例如用户名、密码、电话号码、邮箱格式等的验证,我们来看看下面这几种验证:

  • 例如用户名正则:3到8位,可以包含字母数字下划线:
var re = /^[a-zA-Z0-9_]{3,8}$/;
  • 例如密码正则:6到16位,可以包含字母数字:
var re = /^[a-zA-Z0-9_]{6,16}$/;
  • 例如电话号码正则:可以13、15、17、18开头,一共11位:
var re = /^1[3578]\d{9}$/;
  • 例如邮箱验证:以字母数字下划线_、减号-、点号.开头,并需要重复一次至多次[+]。然后中间接一个@ 符号,@ 之后需要连接字母数字下划线_、减号-、点号.,并需要重复一次至多次[+]。结尾必须是点号. 连接2至4位的大小写字母:
var re = /^([a-zA-Z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;

本教程图文或视频等内容版权归侠课岛所有,任何机构、媒体、网站或个人未经本网协议授权不得转载、转贴或以其他方式复制发布或发表。

评价

6

本课评分:
  •     非常好
难易程度:
  •     适中的

内容目录


本文索引


|
教程
粉丝
主页

签到有礼

已签到2天,连续签到7天即可领取7天全站VIP

  • 1
    +2 金币
  • 2
    +3 金币
  • 3
    +5 金币
  • 6
    +7 金币
  • 5
    +6 金币
  • 4
    暖心福利
    自选分类VIP ×1天
  • 7
    惊喜大礼

    自选分类VIP ×3天 +20金币
  • 持续签到 +8 金币

金币可以用来做什么?