JavaScript中的正则表达式学习笔记

正则表达式(Regular Expression),在台湾地区也被叫做规则表达式(感觉这个才是正确的翻译),其实就是规定一种格式(规则),然后在一定的工作环境下,用来检索、替换那些符合(规则)的文本信息

一些关联的字符串操作

正则表达式是为了简化检索,替换文本的步骤而存在的,仅仅依靠正则实现功能是没有意义的,下面介绍几个使用正则表达式时常见的字符串操作

Search()方法返回第一次出现的位置,不存在返回-1

var str='abcdef';
str.search('u'); //-1(表示不存在)
str.search('b'); //1

Substring()方法获取字符串,可以传两个数字(2,5),第一个数字表示的是起始位置,第二个是终止位置,但是不包括结束位置

'yundingshuyuan'.substring(0, 4) // "yund"
'yundingshuyuan'.substring(4) // "ingshuyuan"  如果省略第二个参数,则表示子字符串一直到原字符串的结束。
如果第一个参数大于第二个参数,substring方法会自动更换两个参数的位置
如果参数是负数,substring方法会自动将负数转为0

CharAt()方法用来获取某个字符 如charAt(3)就是获取字符串3位置的字符。

var string = new String('nodeJS');
s.charAt(1) // "o"
s.charAt(s.length - 1) //  “5”位置是S

Split()用来分割字符串,获得数组。

split方法按照给定规则分割字符串,返回一个由分割出来的子字符串组成的数组。
'a|b|c'.split('|') // ["a", "b", "c"]

var str='12-56-aaa-89';
var arr=str.split('-');
console.log(arr); //["12", "56", "aaa", "89"]

split方法还可以接受第二个参数,限定返回数组的最大成员数。
'a|b|c'.split('|', 0) // []
'a|b|c'.split('|', 1) // ["a"]
'a|b|c'.split('|', 2) // ["a", "b"]
'a|b|c'.split('|', 3) // ["a", "b", "c"]
'a|b|c'.split('|', 4) // ["a", "b", "c"]

用常规方法提取字符串中的数字

var  str = "12 fff 87 er334 233 -=--=fa80";  //我们要处理的字符串(乱写的)
var arr = [];	//创建了一个数组来容纳数字
var tmp = "";       //用于中间保存数字的变量

for (var i = 0;i < str.length;i++){
    if(str.charAt(i)>='0'&&str.charAt(i)<='9'){
        tmp +=str.charAt(i);
    }//如果是数字,则会把数字字符相加起来,连成数字字符串
    else    
    {       //如果不是数字,进入else把储存在tmp的数字字符串传到数组里
        if(tmp){
            arr.push(tmp);
            tmp = '';   //对中间临时储存变量进行清空,防止重复添加数字符串
        }
    }
}
if(tmp){//防止最后可能还有数字,再来一遍
    arr.push(tmp);
    tmp = '';
}

console.log(arr);

但是如果使用正则表达式

var  str = "12 fff 87 er334 233 -=--=fa80";
console.log(str.match(/\d+/g));  //现在虽然不懂,但一会儿就看懂了

正则极大的简化了字符串的功能使用        小声bb:天下武功,唯快不破

正则表达式的两种风格

Js风格:var rs = new RegExp(“a”,“i”);ps:第二个“”里的是选项

Perl风格:var rs = /a/i ps:最后跟的是选项

字符串与正则的配合

(1)search和选项i(ignore)的配合,search返回出现的位置,i选项可以忽略大小写

var str='abcdef';
var str2='ABCDEF';

var re = /b/;
var re2 = /b/i;

str.search(re); //1
str2.search(re2); //1

(2)match和选项g (global) 的配合,match获取匹配的项目,而选项g表示全局匹配而量词:+代表的意思是若干,比如最上面的找出字符串中的所有数字,有一位的,两位的,可以通过**\d+的方式**告诉计算机找出不同位数的数字(你多少位数字我都要),不加的话找出来就是一个一个的数字。

var str='asdf 34 656 cvs33';
var re=/\d/g;

str.match(re);  //["3", "4", "6", "5", "6", "3", "3"]
var str='asdf 34 656 cvs33';
var re=/\d+/g;

str.match(re); //["34", "656", "33"]

(3)replace 替换所有匹配,返回替换后的字符串,可以与选项g ,i配合来使用

 例子:将所有的a替换为0
var  str = "aaabbbssaa";
var re = /a/g;
console.log(str.replace(re,'0'));  //实际可用于敏感词过滤

正则表达式中使用或的话      /a|b|c/  用一个|就可以表示或
var str = "我正在使用云顶书院的开源社区云里云外";

var re=/云|顶|书|院/g;
str.replace(re, '<JS方向>');
//"我正在使用<JS方向><JS方向><JS方向><JS方向>的开源社区<JS方向>里<JS方向>外"

元字符(方括号)

(1)任意字符: [abc]表示的意思是或,即任选一个,比如[abc]pc表达的意思实际上是apc,bpc,cpc都符合要求

var str='apc xpc ppc bpc spc tpc';
var re=/[apx]pc/g;

str.match(re)) //["apc", "xpc", "ppc"]

(2)范围: [a-z],[0-9]表示的意思就是a-z的所有小写字母,[0-9] == \d,表示的是所有的数字

var str='yunding12345487shuyuan123hahaha897lalala555hahaha ';

var re=/[a-z]+/g;
str.match(re); //["yunding", "shuyuan", "hahaha", "lalala", "hahaha"]

var re=/[1-9]+/g;
str.match(re); //["12345487", "123", "897", "555"]

(3)排除:^

[^a-z]表示的意思是除了a-z的小写字母都要,还可以进行组合[^a-z0-9]

正则表达式是贪婪的,会尽可能的匹配更长的字符串

我们举个栗子
因为某些学习原因,我们需要从一个网站的某一篇文章里把内容摘录出来(我会告诉你我是要做一个盗版小说转载网站吗),而文章内容是写在<>(标签里的),而文章的内容中往往会混有<br><p>,<div><img>这些格式的标签,如果我们要从网站上摘抄一些文章,需要过滤掉这些html的标签

var re=/<.+>/g; //过滤掉所有的标签    其中. 表示任意字符   

//以下是模拟的小说内容

var text = "<br /><br />斗罗大陆,天斗帝国西南,法斯诺行省。
<br /><br />圣魂村,如果只是听其名,那么,这绝对是个相当令人惊讶的名字,
可实际上,这只不过是法斯诺行省诺丁城南一个只有三百余户的小村而已。
之所以名为圣魂,是因为传说中,在百年前这里曾经走出过一位魂圣级别的魂师,
从而名这也是圣魂村永远的骄傲。<br /><br />
圣魂村外,尽是大片的农耕之地,这里出产的粮食和蔬菜,都要供给到诺丁城,
诺丁城在法斯诺行省中虽然算不得大城市,但这里毕竟距离与另一帝国接壤处很近,
也自然是两大帝国商人交易的起始地之一,
诺丁城因此而繁荣,附带的,令城市周围这些村庄中的平民生活也比其他地方要好的多。
<br /><br />天刚蒙蒙亮,远处东方升起一抹淡淡的鱼肚白色,
毗邻圣魂村的一座只有百余米高的小山包上,却已经多了一道瘦小的身影。<br /><br />
那是个只有五、六岁的孩子,显然,他经常承受太阳的温暖,皮肤呈现出健康的小麦色,
黑色短发看上去很利落,一身衣服虽然朴素,到也干净。<br /><br />对于他这么大的孩子来说
,攀爬这百米高的丘可并不是什么容易的事,但奇怪的是,当他来到山顶的制高点时却面不红、气不喘,
一副怡然自得的样子。<br /><br />";

//让我们简单的输出一下
//你会发现输出没有,是空的,可能是个空行?

console.log(text.replace(re, '')); //(你得到的内容是空的)

为什么呢?

我们的正则  re=re=/<.+>/g  没有什么问题啊<br /> <p>这些html标签符合这个正则的要求啊
怎么会过滤出空行,难道是我打开的方式不对吗?

-------------------好好想一想再看下面的原因------------------------------














其实因为文本内容最外面< b……斗罗大陆…………一副怡然自得的样子。……r>也符合这个正则的要求
所以它非常贪婪,会全部都替换掉

实际上,我们应该这么写
var re=/<[^<>]+>/g;
console.log(text.replace(re, '')); 
斗罗大陆,天斗帝国西南,法斯诺行省。圣魂村,如果只是听其名,那么,这绝对是个相当令人惊讶的名字,
可实际上,这只不过是法斯诺行省诺丁城南一个只有三百余户的小村而已。
之所以名为圣魂,是因为传说中,在百年前这里曾经走出过一位魂圣级别的魂师,
从而名这也是圣魂村永远的骄傲。圣魂村外,尽是大片的农耕之地,这里出产的粮食和蔬菜,
都要供给到诺丁城,诺丁城在法斯诺行省中虽然算不得大城市,
但这里毕竟距离与另一帝国接壤处很近,也自然是两大帝国商人交易的起始地之一,
诺丁城因此而繁荣,附带的,令城市周围这些村庄中的平民生活也比其他地方要好的多。天刚蒙蒙亮,
远处东方升起一抹淡淡的鱼肚白色,毗邻圣魂村的一座只有百余米高的小山包上,
却已经多了一道瘦小的身影。那是个只有五、六岁的孩子,显然,他经常承受太阳的温暖,
皮肤呈现出健康的小麦色,黑色短发看上去很利落,一身衣服虽然朴素,到也干净。
对于他这么大的孩子来说,攀爬这百米高的丘可并不是什么容易的事,但奇怪的是,
当他来到山顶的制高点时却面不红、气不喘,一副怡然自得的样子。

弄好了,哈哈哈,可以愉快的学习了(去做盗版小说网站了) 

常用的转义字符

\d 数字 相当于 [0-9]

\w 英文、数字、下划线 相当于[ a-z0-9_ ]

\s 空白字符(不可打印、不可显示的字符比如空格,换行等等)

上面的还有孪生兄弟,把字母大写,就是新的转义字符,但是意思大相径庭,只是长得像

\D 非数字 [^0-9]

\W 非英文、数字、下划线 [ ^a-z0-9_ ]

\S 非空白字符(不可打印、不可显示的字符比如空格,换行等等)

. 表示任意字符,但是容易出问题,不推荐使用

量词

什么是量词,量词就是个数

刚才我们看到的**+**就是一种量词,+代表的意思是若干,意思个数是若干个,那我们来看看原始的量词,长什么样子(请看大屏幕)

最原始的量词:(1){n}: 正好出现n次 (多一个不要,少一个不行)
比如说要寻找文档中八位的数字

那正则就可以写成 var re = \d{8} ;

量词的2.0:(2){n,m} :最少n次,最多m次

比如匹配qq号2429789743,那么该怎么写呢

var re = /[1-9] \d{4,10}/;

ps: qq号第一位不能是0,假设qq号最少5位,最多11位

量词的3.0: (3){n, } : 最少n次,最多不限

前面出现的+,表示的实际上是{1,}

(4)?:相当于是{0,1} 表示的是有或者没有

比如固定电话010-87496698-8455

//010是区号,不同地区才会需要,地区相同不需要

//分机号就是比如你拨10086,语音提示会让你输乱七八糟的号码,进行操作,这个和那个类似,可有可无

所以我们的正则可以写为 var re = /(0\d{2,3}-)?[1-9]\d{7}(-\d{1,5})?/ ;

Ps:括号表示的意思是分组,区号和分机号可有可无,所以拿括号括起来,让计算机不要干傻事

(5)* 任意次,表达的意思是{0,} 容易出问题,不推荐使用

常用使用正则的例子:检验邮箱

//一般邮箱长这样: 123456zhang@yunding123.com

一串英文、数字、下划线    @      一串英文、数字    .                  一串英文
     \w+                 @       [a-z0-9]+       \.(这里在转义)      [a-z]+

写出来就是var re =/\w+@[a-z0-9]+.[a-z]+/i;

小声bb:写正则一定要搞清楚结构,每一部分要分开写,到最后你会发现,合并以后你自己写了啥你都不知道

正则表达式的test方法,判断字符串是否符合正则表达式,字符串一部分符合要求,就返回true。

const re = /yun/i
re.test('yundingshuyuan') // true

在实际中你就可以用test方法写一个校验了

var email = "用户输入的邮箱";
var re = /\w+@[a-z0-9]+\.[a-z]+/i;

if(re.test("email")){
	console.log("合法的邮箱");
}else{
	console.log("你丫写错了");
} //以上功能好像除了能气到管理员以外,没什么别的用处

But,其实还有一点点小问题

test方法是只要字符串有一部分符合,就会返回true,所以如果这个人脑子一抽,写个

“呜啦啦啦zhang123@yunding.com------” , 这很明显不符合邮箱的格式,但是我们用上面的方法校验会给我们一个true(这就有点意思了)

在方括号里,^的意思是非,如果不在方括号[ ] 里,^和$分别表示的是行首(字符串开头)和行尾(字符串结尾)

var re=/^\w+@[a-z0-9]+\.[a-z]+$/i;

相当于两扇门,限制了验证的字符串开头只能是一串字母,数字,下划线,最后也只能是字母

问题貌似解决了,聪明的你可能发现了,还是存在很多问题,正式版的邮箱正则怎么写呢,好好想一想?可以在评论区里让大家看到你的想法

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值