当前位置: 首页 > 我要学前端 > 三天学会用JS正则 > 第二天:正则表达式要怎么写

第二天:正则表达式要怎么写

支持左(←)、右(→)方向键,切换到下一章。

今天就进入正则实战阶段了。

这里做个提示:由于正则表达式模式文本中的转义字符也是“\”,如果正则表达式中要匹配原义字符“\”,在正则表达式模式文本中要以“\\”来表示,当使用显式构造函数的方式创建RegExp实例对象的时候,就需要使用“\\\\”来表示原义字符“\”。为了方便理解,所以下面的正则表达式用 regex = /文档/g; 这个模式创建,而不是用 regex = new RegExp("文档","g"); 来创建。下面的正则都是针对实例来说,针对实例来说是准确的,但是放大范围,并不一定准确。只是教你怎么写正则表达式。

实例1:将字符串“我的手机号码是18611138195;他的手机号是18623438195;她的手机号码是15632438195”中的手机号替换成01088889999。
步骤:
1.描述手机号码。[天朝手机号码的特点:第一位肯定是1;第二位可能是3,4,5,8;11位数字。]
2.书写正则

var str = "我的手机号码18611138195;他的手机号是18623438195;她的手机号码是15632438195。 25632438195,16632438195,22334";
var regex = /[\d]{11}/g; //11位任意数字
var regex = /[1][\d]{10}/g; //第一位是1 后面10位任意数字
var regex = /[1][3|4|5|8][\d]{9}/g; //第一位是1,第二位是3或3或4或5或8 后面9位任意数字
var str_r = str.replace(regex, " **** "); //将找到的字符替换成” **** “
alert(str_r);

实例2:验证字符串“col@163.com,yu@,ba@cc,123,678@qq.com”有几个邮箱地址
1.描述邮箱规则。[必须有@,@前面是任意字符,@后面必须是域名(字符.字符)]
2.书写正则

var str = "col@163.com,yu@,ba@cc,123,678@qq.com";
var regex = /@/g; //有@符号
var regex = /[a-zA-Z0-9]@/g; //@第一位必须是数字或者字母
var regex = /[a-zA-Z0-9][\w]*@/g; //第二位开始,@之前是任意字符【匹配任意字母数字下划线\w等价[a-zA-Z0-9_];* 匹配前一个字符或者子表达式 0-无穷次】
var regex = /[a-zA-Z0-9][\w]*@[\.]/g; //包含. 应为.是元字符 这里要表示字符 需要加\转义。
var regex = /[a-zA-Z0-9][\w]*@[\w]*[\.][\w]*/g; //.前面是任意字符,后面是任意字符
var array = str.match(regex); //执行匹配,返回数组
alert(array.length); //打印数组大小

OK,通过上面2个例子,涉及到元字符,那么都有哪些元字符呢?看下面的表,元字符和运算方法汇总。

. 匹配任意单个字符 | “或”操作符
[] 集合中的一个字符 [^] 对字符集取非
- 定义一个区间 \ 转义
* 匹配前一个字符或者子表达式 0-无穷次 *? *的懒惰模式
+ 匹配前一个字符或者子表达式 1-无穷次 +? +的懒惰模式
? 匹配前一个字符或者子表达式 0-1次 {n} 匹配前一个字符或者子表达式 n次
{m,n} 匹配前一个字符或者子表达式 m-n次 m < n {n,} 匹配前一个字符或者子表达式 n-无穷次
{n,}? {n,}的懒惰版本 ^ 匹配字符串的开头
$ 匹配字符串的结尾 \A 匹配字符串的开头
\Z 匹配字符串的结尾 \< 匹配单词的开头
\> 匹配单词的结束 \b 匹配单词的边界(开头或结尾)
\B \b的反义 [\b] 退格
\c 控制字符 \f 换页符
\n 换行符 \r 回车符
\t 制表符 \v 垂直制表符
\d 匹配任意数字字符 等价[0-9] \D \d的反义
\s 匹配一个空白字符 \S \s的反义
\w 匹配任意字母数字下划线[a-zA-Z0-9_] \W \w的反义
\x 匹配一个十六进制数字 \0 匹配一个八进制数字
() 定义一个子表达式 \1 匹配第一个子表达式
?= 向前查找 ?<= 向后查找
?! 负向前查找 ?!= 负向后查找
?() 条件(if then ) ?()| 条件 (if then else)
\l 下一个字符转换成小写 \L 后面字符转换成小写直到遇到\E
\u 下一个字符转换成大写 \U 后面字符准成大写,直到遇到\E
\E \U \L的结束符 (?m) 分行匹配模式

再来看看一个实例。
实例3:在这下面这段字符串中,将一个换行符替换成<br>,2个连续的者换行符替换成</p><p>,开头的换行符替换成<p>,结尾的换行符替换成</p>。

var str = "\n\n\n这一篇其实是不是废话的废话。前端为什么要学正则?其实可以不学,就像我一样,找个高人有需求了就让人写一下。但是总不能每次麻烦别人,痛定\n"+
"思痛,自己学一下。高人每次写正则之前都会这样问:你描述一下你的需求,所以就有了这第一篇。\n"+
"\n"+
"在前端中应用最多的场景就是表单验证,为了减轻一部分负担,前端也需要对数据进行一些基本的验证,如邮箱格式、电话格式等;还有就是写一个简单\n"+
"的编辑器,对内容进行过滤;还有批量替换等。最大的好处就是,看起来好像很牛掰的样子。\n"+
"\n"+
"首先要明白的就是正则处理的对象是字符串,如果是其他格式的对象,都要先转成字符串先。\n"+
"通过下面的例子先搞一下JS怎么用正则。";
var start = /^[\n]*/g; //开始的换行符
var end = /$[\n]*/g; //结束的换行符
var one = /[\n]/g; //1个换行符
var two = /[\n]{2}/g; //2个换行符
str = str.replace(start, "<p>");
str = str.replace(end, "<p>");
str = str.replace(two, "</p><p>");
str = str.replace(one, "<br>");
alert(str);

替换完成之后,就会发现是我们常用的HTML格式。

这一天也打完收工。下一天,就说说比较复杂的需求,同是也练习,加深印象!