标签:
最近在做一个小项目时用到了正则匹配,感觉正则挺好用的,所以打算抽时间来小小总结一下。
正则表达式是一种文本模式,包括普通字符(例如,a 到 z 之间的字母)和特殊字符(称为“元字符”)。模式描述在搜索文本时要匹配的一个或多个字符串。RegExp 对象表示正则表达式,它是对字符串执行模式匹配的强大工具。正则表达式是一种查找以及字符串替换操作。
方式一:直接量语法
var reg = /pattern/attributes
方式二:创建 RegExp 对象的语法
var reg = new RegExp(pattern, attributes);
参数说明:
参数 pattern 是一个字符串,指定了正则表达式的模式或其他正则表达式。
参数 attributes 是一个可选的字符串,包含属性 “g”、”i” 和 “m”,分别用于指定全局匹配、区分大小写的匹配和多行匹配。ECMAScript 标准化之前,不支持 m 属性。如果 pattern 是正则表达式,而不是字符串,则必须省略该参数。
两者区别在于:
1.采用直接量语法新建的正则表达式对象在代码编译时就会生成,是平常开发中常用的方式;
2.采用构造函数生成的正则对象要在代码运行时生成。
正则表达式使用:
正则对象的方法是指这样使用的: RegExp对象.方法(字符串)
字符串对象的方法是这样使用:字符串.方法(RegExp对象)
source 返回正则表达式的源文本(不包括反斜杠)
i 执行对大小写不敏感的匹配
通常用于两种任务:
1.验证
用于验证时,通常需要在前后分别加上^和$,以匹配整个待验证字符串;
2.搜索替换
搜索/替换时是否加上此限定则根据搜索的要求而定,此外,也有可能要在前后加上\b而不是^和$
检索字符串中指定的值。返回 true 或 false。
如果字符串 string 中含有与 RegExpObject 匹配的文本,则返回 true,否则返回 false。
Demo1:
如果正则表达式带有g修饰符,则每一次test方法都从上一次匹配结束的位置开始匹配。
使用了g修饰符的正则表达式,表示要记录每一次搜索的位置,接着使用test方法,每次开始搜索的位置都是上一次匹配的后一个位置。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>test方法</title>
</head>
<body>
<script type="text/javascript">
var reg = /abc/g;
var str = "123abc456abc";
console.log(reg.lastIndex);//0
console.log(reg.test(str));//true
console.log(reg.lastIndex);//6
console.log(reg.test(str));//true
console.log(reg.lastIndex);//12
console.log(reg.test(str));//false
</script>
</body>
</html>
Demo2:
如果正则表达式是一个空字符串,则会匹配所有的字符串,但需要使用new RegExp()方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>test方法</title>
</head>
<body>
<script type="text/javascript">
console.log(new RegExp(‘‘).test(‘abc‘));//true
console.log(/‘‘/.test(‘abc‘));//false
console.log(/‘‘/.test("‘‘"));//true
</script>
</body>
</html>
exec() 方法用于检索字符串中的正则表达式的匹配。
返回一个数组,其中存放匹配的结果。如果未找到匹配,则返回值为 null。
Demo1:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>exec方法</title>
</head>
<body>
<script type="text/javascript">
var str = "xyz";
var reg1 = /x/;
var reg2 = /a/;
var res1 = reg1.exec(str);
var res2 = reg2.exec(str);
console.log(res1);//["x", index: 0, input: "xyz"]
console.log(res2);//null
</script>
</body>
</html>
Demo2:
如果正则表达式包含圆括号,则返回的数组会包括多个元素。首先是整个匹配成功的结果,后面是圆括号里匹配成功的结果,如果有多个圆括号,他们的匹配成功的结果都会成为数组元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>exec方法2</title>
</head>
<body>
<script type="text/javascript">
var str = ‘abcdabc‘;
var reg = /(a)b(c)/;
var res = reg.exec(str);
console.log(res);//["abc", "a", "c", index: 0, input: "abcdabc"]
</script>
</body>
</html>
对于调用exec方法后返回的数组具有以下两个属性:
search() 方法用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串。
返回值: stringObject 中第一个与 regexp 相匹配的子串的起始位置。
注释:如果没有找到任何匹配的子串,则返回 -1。
search() 方法不执行全局匹配,它将忽略标志 g。它同时忽略 regexp 的 lastIndex 属性,并且总是从字符串的开始进行检索,这意味着它总是返回 stringObject 的第一个匹配的位置。
Demo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>search方法</title>
</head>
<body>
<script type="text/javascript">
var str = "abcdcef";
console.log(str.search(/c/g));//2
</script>
</body>
</html>
match() 方法可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配。该方法类似 indexOf() 和 lastIndexOf(),但是它返回指定的值,而不是字符串的位置。
字符串对象的match方法与正则对象的exec方法比较类似:
但是如果正则表达式带有g修饰符,那么match方法与exec方法就有差别了:
可以看到match返回了所有成功匹配的结果,但是exec方法只返回了一个。
Demo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>match方法</title>
</head>
<body>
<script type="text/javascript">
var str = "abcd";
var reg1 = /a/;
var reg2 = /x/;
console.log(str.match(reg1));//["a", index: 0, input: "abcd"]
console.log(str.match(reg2));//null
var str = "abcdabc";
var reg = /a/g;
console.log(str.match(reg));//["a", "a"]
console.log(reg.exec(str));//["a", index: 0, input: "abcdabc"]
</script>
</body>
</html>
replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。
返回值:一个新的字符串,是用 replacement 替换了 regexp 的第一次匹配或所有匹配之后得到的。
字符串 stringObject 的 replace() 方法执行的是查找并替换的操作。它将在 stringObject 中查找与 regexp 相匹配的子字符串,然后用 replacement 来替换这些子串。如果 regexp 具有全局标志 g,那么 replace() 方法将替换所有匹配的子串。否则,它只替换第一个匹配子串。
Demo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>replace方法</title>
</head>
<body>
<script type="text/javascript">
var str = "xxx";
console.log(str.replace(‘x‘,‘y‘));//yxx
console.log(str.replace(/x/,‘y‘));//yxx
console.log(str.replace(/x/g,‘y‘));//yyy
</script>
</body>
</html>
Demo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>replace中的特殊字符替换</title>
</head>
<body>
<script type="text/javascript">
//用子表达式替换:$1和$2
//正则表达式中()就是一个子表达式,$1对应是第一个表达式的内容,即java,$2为script
var str = "javascript";
console.log(str.replace(/(java)(script)/,‘$2$1‘)); //输出:scriptjava
//$& 为正则表达式匹配的字符串
//正则表达式通过直接量java来匹配,匹配结果为java,则 $&的值为java,然后用字符串$&-来替换匹配的字符串
var str1 = "javascript";
console.log(str1.replace(/java/,‘$&-‘)); //输出:java-script
var str2 = "javascript";
// $`为匹配子串ava的左侧文本,则为j
console.log(str2.replace(/ava/,"$`")); //输出:jjscript
// $‘为匹配子串ava的右侧文本,则为script
console.log(str2.replace(/ava/,"$‘")); //输出:jscriptscript
// $$为直接量符号,即插入一个$符号
console.log(str2.replace(/ava/,"$$"));//输出:j$script
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>replace的参数replacement是函数</title>
</head>
<body>
<script type="text/javascript">
function replacer(match, a1, a2, a3, index, string) {
return [a1, a2, a3].join(‘ ~ ‘);
}
var str = ‘xyz45678%$&^‘;
var reg = /([^\d]*)(\d*)([^\w]*)/
var res = str.replace(reg, replacer);
console.log(res);//xyz ~ 45678 ~ %$&^
</script>
</body>
</html>
split(‘字符串的分割正则’,’返回数组的最大成员数’);返回分割后各部分组成的数组
Demo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>split方法</title>
</head>
<body>
<script type="text/javascript">
var str = ‘a,b , c,d‘;
var res = str.split(",");//以逗号来分割字符串
console.log(res);//["a", "b ", " c", "d"]
var str1 = ‘a,b , c,,d‘;
var res1 = str1.split(/,*/);//以0或多个逗号来分割字符串
console.log(res1);//["a", "b", " ", " ", "c", "d"]
var str2 = ‘a, b,c, d‘;
var res2 = str2.split(/, */);//以0或对个逗号空格来分割字符串
console.log(res2);//["a", "b", "c", "d"]
var str3 = ‘a, b,c, d‘;
var res3 = str3.split(/, */,2);//以0或对个逗号空格来分割字符串,同时限制返回数组中最多有两项
console.log(res3);//["a", "b"]
</script>
</body>
</html>
可以变换正则的匹配规则来分割字符串。
下面正则的匹配规则是以0或多个x来进行分割,如果加上括号则括号匹配的部分也就是分割规则也会作为数组成员返回。
Demo2:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>split方法2</title>
</head>
<body>
<script type="text/javascript">
var str = "x@@xx@xx@@";
var res = str.split(/x*/);//以0或者对个x为分隔符
console.log(res);//["", "@", "@", "@", "@", "@"]
var res1 = str.split(/(x*)/);//如果加上括号则括号匹配的部分也就是分割规则也会作为数组成员返回
console.log(res1);//["", "x", "@", "", "@", "xx", "@", "xx", "@", "", "@"]
</script>
</body>
</html>
var re = /(\w)\1+/g;
(\w)外面的圆括号表示分组,\1表示重复第一分组中的内容 ,\1+表示 \w匹配到的字符重复n次,后面的g表示执行全部替换
str.replace的第二个参数是个函数,参数a表示整个匹配到的字符串,b表示第一捕获分组也就是出现重复的单个字符 ,将a.length 与已经记录 过的最多重复num比较,如果a.length 更大,就将它赋值给num,用value记录重复字符 b,这个函数返回的是替换文本,但这里没有返回值,也就是说替换 为空,每次替换这个函数都被执行
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>字符串中出现次数最多的字符</title>
</head>
<body>
<script type="text/javascript">
var str = ‘mmmmmmmmaaammmmmmmmmbbbbsccc‘;
function most(str) {
var arr = str.split(‘‘);
str = arr.sort().join(‘‘);//将字符串按单个字符分割,然后排序组合,经过这一步,相同的字符就会排列到一起
var reg = /(\w)\1+/g;
var num = 0;
var value = ‘‘;
str.replace(reg, function (a,b) {
// console.log(a);
if (num<a.length) {
num = a.length;
value = b;
}
});
return ‘出现次数最多的字符是‘ + value + ‘出现了‘ + num + ‘次‘;
}
console.log(most(str));
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>从url中提取子域名</title>
</head>
<body>
<script type="text/javascript">
var url = "http://www.abc.com";
var reg = /[^.]+/;//匹配除了.之外的其他字符
var res = reg.exec(url)[0].substr(7);
console.log(reg.exec(url));//["http://www", index: 0, input: "http://www.abc.com"]
console.log(res);//www
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>给字符串加千分符</title>
</head>
<body>
<script type="text/javascript">
var str = "12345678912312";
function fn(str){
var reg = /(?=(?!b)(\d{3})+$)/g;
return str.replace(reg,‘,‘);
}
var res = fn(str);
console.log(res);//12,345,678,912,312
</script>
</body>
</html>
标签:
原文地址:http://blog.csdn.net/liujie19901217/article/details/51219672