2020-02-01

Web前端

12 分钟读完 (大约 1825 个字)

JavaScript正则表达式

转载次 2020-02-01 20:37

JavaScript正则表达式详解

一、什么是正则表达式

正则表达式（Regular Expression，简称regexp）是一种描述字符串结构的语法规则。是一个特定的格式化模式，用于验证各种字符串是否匹配这个特征，进而实现高级的文本查找、替换、截取内容等操作。

二、正则表达式的应用和适配领域

应用： 在项目开发中，手机号码指定位数的隐藏、数据采集、敏感词的过滤以及表单的验证等功能，都可以利用正则表达式来实现。
适用领域：在操作系统（Unix、Linux等）、编程语言（C、C++、Java、PHP、Python、JavaScript等）。

三、正则表达式的表现形式

一种是POSIX规范兼容的正则表达式，用于确保操作系统之间的可移植性。一种是当Perl（一种功能丰富的编程语言）发展起来后，衍生出来了Perl正则表达式，JavaScript中的正则语法就是基于Perl的。

四、正则表达式的使用

在开发中，经常需要根据正则匹配模式完成对指定字符串的搜索和匹配。

(一)、exec()方法使用

exec()方法用于在目标字符串中搜索匹配，一次仅返回一个匹配结果。

// 需求： 在指定的字符串str中搜索abc
var str = 'AbC123abc456';
var reg = /abc/i;// 定义正则对象
reg.exec(str); // 匹配结果： ["AbC", index: 0, input: "AbC123abc456"]

“/abc/i”中的“/”是正则表达式的定界符，“abc”表示正则表达式的模式文本，“I”是模式修饰标识符，表示在str中忽略大小写。
exec()方法的参数是待匹配的字符串str，匹配成功时，该方法的返回绘制是一个数组，否则返回null。

从exec()的返回结果可以看出，改数组保存的第一个元素（AbC）表示·匹配到的字符串；第2个元素index表示匹配到的字符串位于目标字符串中的索引值（从0开始计算）；第三个参数input表示目标字符串（AbC123abc456）

(二)、match()方法使用

基本语法：
String对象中的match()方法除了可在字符串内检索指定的值外，还可以在目标字符串中根据正则匹配出所有符合要求的内容，匹配成功后将其保存到数组中，匹配失败则返回false。

var str = "It's is the shorthand of it is";
var reg1 = /it/gi;
str.match(reg1);    // 匹配结果：(2) ["It", "it"]
var reg2 = /^it/gi;	
str.match(reg2);    // 匹配结果：["It"]
var reg3 = /s/gi;	
str.match(reg3);    // 匹配结果：(4) ["s", "s", "s", "s"]
var reg4 = /s$/gi;
str.match(reg4);    // 匹配结果：["s"]

定位符“^”,可以用于匹配字符串开始的位置。
定位复“$”,可以用于匹配字符串结尾的位置。
g表示全局匹配，用于在找到一个匹配之后仍然继续查找。

获取正则对象：
在JavaScript应用中，使用正则表达式之前首先需要创建正则对象。除了前面讲解过的字面量方式创建外，还可以通过RegExp对象的构造函数的方式创建。

pattern是由元字符和文本字符组成的正则表达式模式文本。
元字符是具有特殊含义的字符，如“^”、“.”或“*”等。
文本字符就是普通的文本，如字母和数字等。
flags表示模式修饰标识符，用于进一步对正则表达式进行设置。

模式修饰符，还可以根据实际需求多个组合在一起使用。
例如，既要忽视大小写又要进行全局匹配，则可以直接使用gi，并且在编写多个模式修饰符时没有顺序要求。
·因此，模式修饰符的合理使用，可使正则表达式变得更加简洁、直观。

案例说明：

var str = '^abc\\1.23*edf$';
var reg1 = /\.|\$|\*|\^|\\/gi; // 字面量方式创建正则对象
var reg2 = RegExp('\\.|\\$|\\*|\\^|\\\\', 'gi');  // 构造函数方式创建正则对象
str.match(reg1);    // 匹配结果：(5) ["^", "\", ".", "*", "$"]
str.match(reg2);    // 匹配结果：(5) ["^", "\", ".", "*", "$"]

选择符“|”表示“或”，查找条件只要其中一个条件满足即可成立。
JavaScript中字符串存在转义问题，因此代码中str里的“\”表示反斜线“\”。
在正则中匹配特殊字符时，也需要反斜线（\）对特殊字符进行转义。例如，“\\”经过字符串转义后变成“\”，然后正则表达式再用“\”去匹配“\”。

注意：

构造函数方式与字面量方式创建的正则对象，虽然在功能上完全一致，但它们在语法实现上有一定的区别，前者的pattern在使用时需要对反斜杠（\）进行转义。而后者的pattern在编写时，要放在定界符“/”内，flags标记则放在结尾定界符之外

(三)、字符类别与集合

字符类别：

var str = 'good idea';
// 正则对象
var reg = /\s../gi;
// 匹配结果：[" id"]
str.match(reg);

正则对象reg用于匹配空白符后的任意两个字符
（除换行外）。
因此在控制台查看到的结果中，id前有一个空格。

字符集合：

字符集合的表示方式：“[]”可以实现一个字符集合。
字符范围：与连字符“-”一起使用时，表示匹配指定范围内的字符。
反义字符：元字符“^”与“[]”一起使用时，称为反义字符。
不在某范围内： “^”与“[]”一起使用，表示匹配不在指定字符范围内的字符。

注意： 字符“-”在通常情况下只表示一个普通字符，只有在表示字符范围时才作为元字符来使用。“-”连字符表示的范围遵循字符编码的顺序，如“a-Z”、“z-a”、“a-9”都是不合法的范围。

正则表达式表单验证

1、输入长度限制

<p>1. 长度限制</p>
<form name=a onsubmit="return test()">
<textarea name="b" cols="40" rows="6" placeholder="不能超过20个字符！"></textarea>
<br />
<input type="submit" name="Submit" value="check">
</form>

<script language="javascript">
function test()
{
if(document.a.b.value.length>20)
{
alert("不能超过20个字符！");
document.a.b.focus();
return false;
}
}
</script>

2、中英文限制

<!-- 中文 -->
<p>2. 只能是汉字 </p>
<input type="text" onblur="isChinese(this.value)" placeholder="请输入中文！" />

<script language="javascript">
function isChinese(obj){
var reg=/^[\u0391-\uFFE5]+$/;
if(obj!=""&&!reg.test(obj)){
alert('必须输入中文！');
return false;
}
}
</script>
<!-- 英文 -->
<script type="text/javascript">
//验证只能是字母
function checkZm(zm){
var zmReg=/^[a-zA-Z]*$/;
if(zm!=""&&!zmReg.test(zm)){
alert("只能是英文字母！");
return false;
}
}
</script>

# JavaScript