JavaScript RegExp 正则表达式创建与 match 方法详解
本文介绍 JavaScript 中正则表达式的两种创建方式:字面量格式与 RegExp 构造函数,并详细解析 match 方法的语法、参数及返回值特性。通过对比全局标志 g 的影响,结合具体代码示例,说明如何检索字符串中的匹配文本及捕获组的使用。
正则表达式的创建方式
正则表达式在 JavaScript 中有两种创建方式。第一种是字面量格式,语法为 /pattern/flags(即 /模式/标记)。第二种是使用 RegExp 构造函数,语法为 new RegExp("pattern"[,"flags"])(即 new RegExp("模式"[,"标记"]))。其中,pattern 表示正则表达式的文本内容,flags 为可选参数,指定匹配标记。flags 可以是 'g'(全局匹配)、'i'(忽略大小写)或 'gi'(同时启用全局匹配和忽略大小写)。需要注意的是,字面量格式中的参数不需要使用引号,而构造函数中的参数必须使用引号。因此,/ab+c/i 与 new RegExp("ab+c","i") 是等价的。当使用构造函数创建正则表达式时,必须遵循字符串的转义规则,即在字符串中手动添加前导反斜杠。例如,re=new RegExp("\\w+") 与 re=/\w+/ 是等价的。
RegExp 预置属性与捕获组
RegExp 对象预置了 $1 到 $9 属性,用于存储用圆括号括起来的匹配子串(如果存在)。这些属性是静态且只读的,从 JavaScript 1.2 和 NES 3.0 版本开始提供。由于 input 是静态属性,而非个别正则表达式对象的属性,因此可以通过 RegExp.input 来访问。正则表达式中圆括号内的子串数量没有上限,但正则表达式对象仅保留最后 9 条匹配结果。如果需要访问所有圆括号内的匹配字串,应使用 match() 方法返回的数组。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<SCRIPT LANGUAGE="JavaScript1.2">
var regexp = new RegExp("(\\w+)\\s(\\w+)");
str = "John Smith";
newstr=str.replace(regexp,"$2");
newstr2=str.replace(regexp,"$1");
document.write("原字符串:"+str+"<br/>");
document.write(newstr+"<br/>");
document.write(newstr2+"<br/>");
document.write('$1='+RegExp.$1+" $2="+RegExp.$2);
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
match 方法语法与返回值
match() 方法用于在字符串内检索指定的值,或找到一个或多个正则表达式的匹配。该方法返回匹配到的值,而不是字符串的位置信息。
match() 方法的语法为 stringObject.match(searchvalue) 或 stringObject.match(regexp)。参数 searchvalue 是必需的,规定要检索的字符串值;regexp 也是必需的,规定要匹配的模式 RegExp 对象。如果该参数不是 RegExp 对象,则需要首先将其传递给 RegExp 构造函数,转换为 RegExp 对象。返回值是一个存放匹配结果的数组,其内容取决于 regexp 是否带有全局标志 'g'。match() 方法会检索字符串 stringObject,以找到一个或多个与 regexp 匹配的文本。该方法的行为在很大程度上依赖于 regexp 是否具有标志 'g'。
全局标志 g 对 match 的影响
如果 regexp 没有标志 'g',match() 方法仅在 stringObject 中执行一次匹配。如果没有找到任何匹配的文本,match() 将返回 null。否则,它将返回一个数组,其中存放了与找到的匹配文本有关的信息。
match 方法使用示例
以下是 match 方法的使用实例:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<SCRIPT LANGUAGE="JavaScript1.2">
var str="1 plus 2 equal 3";
var str2="11/23/55";
var results=str.match(new RegExp("\\d+","gi"));
for(var i=0;i<results.length;i++){
document.write(results[i]+"<br/>");
}
var res=str2.match(new RegExp("(\\d\\d?)/(\\d\\d?)/(\\d\\d)"));
if(str2.length == res[0].length){
document.write(res[1]+"<br/>");
document.write(res[2]+"<br/>");
document.write(res[3]+"<br/>");
}
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
function dateCheck(value) {
re = new RegExp("(\\d\\d?)/(\\d\\d?)/(\\d\\d)");
var result = value.match (re);
if (result){
if (result[0].length != value.length){
alert ("Wrong date format. The correct format should be MM/dd/yy.")
return false;
}else{
var t = result[3];
var y = parseInt("20" + t);
var m = parseInt(result[1], 10) - 1;
var day = parseInt(result[2], 10);
var d = new Date(y, m, day);
if (d.getFullYear() != y || d.getMonth() != m || d.getDate() != day){
alert ("error date!")
return false;
}else{
var sm = result[1].length == 1?'0' + result[1]:result[1];
var sday = result[2].length == 1?'0' + result[2]: result[2];
var sy = result[3];
else
return sm + '/' + sday + '/' + sy;
}
}
}else{
alert ("Wrong date format. The correct format should be MM/dd/yy.");
return false;
}
}
JavaScript异步发送HTTP请求时怎么优雅地处理错误
2026-11-05 17:10:44
5款主流JS在线运行工具对比:CodePen、JSFiddle与StackBlitz怎么选
2026-11-05 17:04:04
JavaScript入门书籍避坑:这些书不适合初学者
2026-11-05 16:31:15
JS使用Math.round实现保留两位小数的原理与代码
2026-11-05 15:35:55
JavaScript 原生 Date 对象怎么实现日期加减
2026-11-05 14:30:00
