网站首页 » 前端开发 » JavaScript » JavaScript 正则表达式用法及常用的正则表达式整理
上一篇:
下一篇:

JavaScript 正则表达式用法及常用的正则表达式整理

前言

正则表达式功能之强大,不用多说,不敢想象没有正则表达式的程序世界里会是怎么样的。正则表达式是一种匹配的模式,用于匹配一个或者多个字符串。

字符串常用的一方法如:

  • indexOf 查找下标(通过字符串)
  • substring 获取子字符串(有两个参数,开始位置,结束位置,但不包含结束位置)
  • charAt 获取某个字符(通过下标)
  • split 分割字符获取数组

但在这里我们通过正则来完成字符串的一些操作。

判断一个字符串是不是数字,我们通常的做法是:

老套路
var str = "6";
if(str>"0" && str <"9"){
	console.log("这是一个数字");
}else{
	console.log("这不是一个数字");
}

而现在如果我们通过正则来判断,那么事件就变得非常地简单了:

新套路
var str = "6";
var pat = /[0-9]/;
var result = pat.test(str);
if(result){
	console.log("这是一个数字");
}else{
	console.log("这不是一个数字");
}

虽然这看起来比老套路代码多,但如果要完成一些复杂的匹配时,正则的威力就体现出来了,比如要在一个很长的字符串中找出所有的数字:

旧套路
var str = "oepn111you666mind888";
function collectNumber(str){
    var arr = [];
    var temp = "";
    for(var i=0;i<str.length;i++){
        if(str.charAt(i)>="0" && str.charAt(i)<="9"){
            temp += str.charAt(i);
        }else{
            if(temp){
                collect();
            }
        }
    }
    if(temp){
        collect();
    }

    function collect() {
        arr.push(temp);
        temp = "";
    }
    return arr;
}

长长一大段代码,而如果我们用正则表达式的话,就可以像下面这么简单,这么彻底。

新套路
function collectNumber(str){
    return str.match(/\d+/g);
}

服不服,正则的世界简单得无以伦比,所以我们没有理由不 GET 这个技能。

语法

var expression = /pattern/ flags

parttern 为需要匹配的字符串模式,flags 为标志。

flags 有以下三个值:

  • g:全局模式,查找字符串中所有的匹配项,而不只是第一个。
  • i:不区分大小写。
  • m:多行模式。

匹配字符串中所有的“yunkus”

var pat = /yunkus/g;

匹配第一个“yun”或者“tun”,不区分大小写

var pat = /[yt]un/i;

匹配所有以un结尾的3个字符的组合,不区分大小写

var pat = /.un/gi;

模式中使用的所有元字符都必须转义。正则表达式中的元字符包括:

( { [ \ ^ $ | ? * + . ] } )

所以如果想要在字符串中成功配置到这些字符,就必须对它们进行转义。比如:

区匹配第一个“[yt]un” 字符串,如果不进行转义,那么匹配出来的结果就像上面的那样(匹配 “yun” 或者 “tun” 字符串),要想匹配“[yt]un” 字符串你可以像下面这样写:

var pat = /\[yt\]un/i

最佳实战

正则用于验证

配合 test() 方法使用,简单的判断(返回true | false)。

基本套路
var pat = /pattern/flags
var str = "";
pat.test(str);

匹配中文字符

var pat = /[\u4e00-\u9fa5]/;

匹配域名网址

var pat = /[a-zA-z]+:\/\/[^\s]*/;

匹配身份证

var pat = /^(\d{6})(\d{4})(\d{2})(\d{2})(\d{3})([0-9]|X)$/;

邮政编码

var pat = /[1-9]\d{5}/;

匹配电话号码(可根据最新发行号码调整正则)

var pat = /^1[3|4|5|8][0-9]{9}$/;

匹配 QQ 号

var pat = /(^[1-9]\d{4,11}$)/;

匹配 Email 地址

var pat = /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/;

正则用于替换

配合 replace() 方法

基本套路
var pat = /pattern/flags
var str = "";
str.replace(pat,"replacement");

去掉所有的HTML 标签(这里得根据实践情况进行修改)

var pat = /<[^>]*>/g;

多个字符串代替

套路
var str = "前端开发工程师,前端开发,JavaScript教程,jQuery,前端库,CSS3,HTML5";
var pat = /前端开发|JavaScript|HTML5/g;

var result = str.replace(pat,function(str){
    var temp = "";
    for(var i=0;i<str.length;i++){
        temp += "*";
    }
    return temp;
});
console.log(result); // ****工程师,****,**********教程,jQuery,前端库,CSS3,*****

替换与分组

套路
var str = "2017-8-7"
var pat = /(\d+)(-)(\d)/g;
str.replace(pat,function($0,$1,$2,$3){
    console.log($0,$1,$2,$3);
});

$0 为正则匹配到的项,后台的$1,$2,$3 分别对应这个匹配项的三个括号中的值。

正则查找定位

通过search() 方法来实现查找定位,search():正则匹配字符串,如果匹配成功,返回匹配到的位置,否则返回 -1。

套路
var str = "abcdefghijklmnopqrstuvwyz"
var pat1 = /f/;
var pat2 = /F/;
result1 = str.search(pat1);
result2 = str.search(pat2);
console.log(result1); // 5
console.log(result2); // -1

正则查找字符串

match 正则匹配字符串,如果匹配成功,返回匹配成功的数组,否则返回 null。

套路一:
var str = "abcdefg123hijklmn456opqrst789uvwyz0";
var pat = /\d+/g;
result = str.match(pat);
console.log(result); // ["123", "456", "789", "0"]
套路二:
var str = "2017-8-7"
var pat = /(\d-)+/g;
var result = str.match(pat);
console.log(result); // ["7-8-"]
套路三:
var str = "abcd"
var pat = /(a)(b)(c)(d)/;
console.log(str.match(pat)); // ["abcd", "a", "b", "c", "d", index: 0, input: "abcd"]

正则中的字符类

套路一:
var str = "abcd";
var pat = /a[bc]c/;
console.log(pat.test(str)); // true

[] 或,从 [] 里面的取一个字符。

套路二:
var str = "awcd";
var pat = /a[^bc]c/;
console.log(pat.test(str)); // true

^ 放到 [] 里表示非。

套路三:
var str = "awcd";
var pat = /a[a-z0-9A-Z]c/;
console.log(pat.test(str)); // true

范围a – z 之间

重复的子项

套路一:
var str = "aaaaaaddbbcdddabbbbdfddrrrrtttt";
var pat = /(\w)\1+/g;
str.replace(pat,function($0,$1){
    console.log($0);
});

\1 重复前面子项(一样)

正则中的量词

量词符号
{} // 量词
{1,} // 最少1次
{1,5} // 最少1次,最多5次
{5} // 5次
^ // 开始位置
$ // 结束位置
+ // 等价于{1,}
? // 出现0次或者1次
* // {0,} 至少出现0次

 

  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/regular-expression/

发表评论

电子邮件地址不会被公开。 必填项已用*标注

评论 END