正则表达式一般用于字符串匹配,字符串查找和字符串替换。别小看它的作用,在工作学习中灵活运用正则表达式处理字符串能够大幅度提高效率,编程的快乐来得就是这么简单。
下面将由浅入深讲解正则表达式的使用。
package test;
public class Test01 {
public static void main(String[] args) {
//字符串abc匹配正则表达式"...", 其中"."表示一个字符
//"..."表示三个字符
System.out.println("abc".matches("..."));
System.out.println("abcd".matches("..."));
}
}
输出结果:
true
false
String类中有个matches(String regex)方法, 返回值为布尔类型,用于告诉这个字符串是否匹配给定的正则表达式。
在本例中我们给出的正则表达式为...,其中每个.表示一个字符,整个正则表达式的意思是三个字符,显然当匹配abc的时候结果为true,匹配abcd时结果为false。
在java.util.regex包下有两个用于正则表达式的类, 一个是Matcher,另一个Pattern。
Java官方文档中给出对这两个类的典型用法,代码如下:
package test;
import java.util.regex.Matcher;
import java.util.regex.Pattern;
public class Test02 {
public static void main(String[] args) {
//[a-z]表示a~z之间的任何一个字符, {3}表示3个字符, 意思是匹配一个长度为3, 并且每个字符属于a~z的字符串
Pattern p=Pattern.compile("[a-z]{3}");
Matcher m1=p.matcher("abc");
System.out.println(m2.matches());
}
}
输出结果:true
Pattern可以理解为一个模式,字符串需要与某种模式进行匹配。 比如Test02中, 我们定义的模式是一个长度为3的字符串, 其中每个字符必须是a~z中的一个。
我们看到创建Pattern对象时调用的是Pattern类中的compile方法,也就是说对我们传入的正则表达式编译后得到一个模式对象。 而这个经过编译后模式对象,,会使得正则表达式使用效率会大大提高,并且作为一个常量,它可以安全地供多个线程并发使用。
Matcher可以理解为模式匹配某个字符串后产生的结果。字符串和某个模式匹配后可能会产生很多个结果,这个会在后面的例子中讲解。
最后当我们调用m.matches()时就会返回完整字符串与模式匹配的结果。
上面的三行代码可以简化为一行代码:
System.out.println("abc".matches("[a-z]{3}"));
但是如果一个正则表达式需要被重复匹配,这种写法效率较低。
代码示例:
package test;
public class Test03 {
private static void p(Object o){
System.out.println(o);
}
public static void main(String[] args) {
// "X*" 代表零个或多个X
p("aaaa".matches("a*"));
p("".matches("a*"));
// "X+" 代表一个或多个X
p("aaaa".matches("a+"));
// "X?" 代表零个或一个X
p("a".matches("a?"));
// \\d A digit: [0-9], 表示数字, 但是在java中对"\\"这个符号需要使用\\进行转义, 所以出现\\d
p("2345".matches("\\d{2,5}"));
// \\.用于匹配"."
p("192.168.0.123".matches("\\d{1,3}\\.\\d{1,3}\\.\\d{1,3}\\.\\d{1,3}"));
// [0-2]指必须是0~2中的一个数字
p("192".matches("[0-2][0-9][0-9]"));
}
}
输出结果:全是true。
[]用于描述一个字符的范围, 下面是一些例子:
package test;
public class Test04 {
private static void p(Object o){
System.out.println(o);
}
public static void main(String[] args) {
//[abc]指abc中的其中一个字母
p("a".matches("[abc]"));
//[^abc]指除了abc之外的字符
p("1".matches("[^abc]"));
//a~z或A~Z的字符, 以下三个均是或的写法
p("A".matches("[a-zA-Z]"));
p("A".matches("[a-z|A-Z]"));
p("A".matches("[a-z[A-Z]]"));
//[A-Z&&[REQ]]指A~Z中并且属于REQ其中之一的字符
p("R".matches("[A-Z&&[REQ]]"));
}
}
输出结果:全是true。
关于\
在Java中的字符串中,如果要用到特殊字符, 必须通过在前面加\进行转义。
举个例子,考虑这个字符串"老师大声说:"同学们,快交作业!""。 如果我们没有转义字符,那么开头的双引号的结束应该在说:"这里,但是我们的字符串中需要用到双引号, 所以需要用转义字符。
使用转义字符后的字符串为"老师大声说:\"同学们,快交作业!\"", 这样我们的原意才能被正确识别。
同理如果我们要在字符串中使用\,也应该在前面加一个\,所以在字符串中表示为"\"。
那么如何在正则表达式中表示要匹配\呢? 答案为"\\"。
我们分开考虑:由于正则式中表示\同样需要转义, 所以前面的\表示正则表达式中的转义字符\,后面的\表示正则表达式中\本身, 合起来在正则表达式中表示\。
先来看代码示例:
package test;
public class Test05 {
private static void p(Object o){
System.out.println(o);
}
public static void main(String[] args) {
// \s{4}表示4个空白符
p(" \n\r\t".matches("\\s{4}"));
// \S表示非空白符
p("a".matches("\\S"));
// \w{3}表示数字字母和下划线
p("a_8".matches("\\w{3}"));
p("abc888&^%".matches("[a-z]{1,3}\\d+[%^&*]+"));
// 匹配 \
p("\\".matches("\\\\"));
}
}
^在中括号内表示取反的意思[^], 如果不在中括号里则表示字符串的开头。
代码示例:
package test;
public class Test06 {
private static void p(Object o){
System.out.println(o);
}
public static void main(String[] args) {
/**
* ^ The beginning of a line 一个字符串的开始
* $ The end of a line 字符串的结束
* \b A word boundary 一个单词的边界, 可以是空格, 换行符等
*/
p("hello sir".matches("^h.*"));
p("hello sir".matches(".*r$"));
p("hello sir".matches("^h[a-z]{1,3}o\\b.*"));
p("hellosir".matches("^h[a-z]{1,3}o\\b.*"));
}
}
输出结果:
true
true
true
false
代码示例:
package test;
import java.util.regex.Matcher;
import java.util.regex.Pattern;
public class Test07 {
private static void p(Object o){
System.out.println(o);
}
public static void main(String[] args) {
Pattern pattern=Pattern.compile("\\d{3,5}");
String s="123-34345-234-00";
Matcher m=pattern.matcher(s);
//先演示matches(), 与整个字符串匹配.
p(m.matches());
//结果为false, 显然要匹配3~5个数字会在-处匹配失败
//然后演示find(), 先使用reset()方法把当前位置设置为字符串的开头
m.reset();
p(m.find());//true 匹配123成功
p(m.find());//true 匹配34345成功
p(m.find());//true 匹配234成功
p(m.find());//false 匹配00失败
//下面我们演示不在matches()使用reset(), 看看当前位置的变化
m.reset();//先重置
p(m.matches());//false 匹配整个字符串失败, 当前位置来到-
p(m.find());// true 匹配34345成功
p(m.find());// true 匹配234成功
p(m.find());// false 匹配00始边
p(m.find());// false 没有东西匹配, 失败
//演示lookingAt(), 从头开始找
p(m.lookingAt());//true 找到123, 成功
}
}
如果一次匹配成功的话start()用于返回匹配开始的位置,
end()用于返回匹配结束字符的后面一个位置。
代码示例:
package test;
import java.util.regex.Matcher;
import java.util.regex.Pattern;
public class Test08 {
private static void p(Object o) {
System.out.println(o);
}
public static void main(String[] args) {
Pattern pattern=Pattern.compile("\\d{3,5}");
String s="123-34345-234-00";
Matcher m=pattern.matcher(s);
p(m.find());//true 匹配123成功
p("start: " + m.start() + " - end:" + m.end());
p(m.find());//true 匹配34345成功
p("start: " + m.start() + " - end:" + m.end());
p(m.find());//true 匹配234成功
p("start: " + m.start() + " - end:" + m.end());
p(m.find());//false 匹配00失败
try {
p("start: " + m.start() + " - end:" + m.end());
} catch (Exception e) {
System.out.println("报错了...");
}
p(m.lookingAt());
p("start: " + m.start() + " - end:" + m.end());
}
}
输出结果:
true
start: 0 - end:3
true
start: 4 - end:9
true
start: 10 - end:13
false
报错了...
true
start: 0 - end:3
Matcher类中的一个方法group(),它能返回匹配到的字符串。
代码示例:将字符串中的java转换为大写
package test;
import java.util.regex.Matcher;
import java.util.regex.Pattern;
public class Test09 {
private static void p(Object o){
System.out.println(o);
}
public static void main(String[] args) {
Pattern p=Pattern.compile("java");
Matcher m=p.matcher("java I love Java and you");
p(m.replaceAll("JAVA"));//replaceAll()方法会替换所有匹配到的字符串
}
}
输出结果:
JAVA I love Java and you
我们要在创建模板模板时指定大小写不敏感。
public static void main(String[] args) {
Pattern p=Pattern.compile("java", Pattern.CASE_INSENSITIVE);//指定为大小写不敏感的
Matcher m=p.matcher("java I love Java and you");
p(m.replaceAll("JAVA"));
}
输出结果:
JAVA I love JAVA and you
这里演示把查找到第奇数个字符串转换为大写,第偶数个转换为小写。
这里会引入Matcher类中一个强大的方法appendReplacement(StringBuffer sb, String replacement),它需要传入一个StringBuffer进行字符串拼接。
public static void main(String[] args) {
Pattern p=Pattern.compile("java", Pattern.CASE_INSENSITIVE);
Matcher m=p.matcher("java Java JAVA JAva I love Java and you ?");
StringBuffer sb=new StringBuffer();
int index=1;
while(m.find()){
m.appendReplacement(sb, (index++ & 1)==0 ? "java" : "JAVA");
index++;
}
m.appendTail(sb);//把剩余的字符串加入
p(sb);
}
输出结果:
JAVA JAVA JAVA JAVA I love JAVA and you ?
先看一个示例:
package test;
import java.util.regex.Matcher;
import java.util.regex.Pattern;
public class Test10 {
private static void p(Object o) {
System.out.println(o);
}
public static void main(String[] args) {
Pattern p=Pattern.compile("\\d{3,5}[a-z]{2}");
String s="005aa-856zx-1425kj-29";
Matcher m=p.matcher(s);
while (m.find()) {
p(m.group());
}
}
}
输出结果:
005aa
856zx
1425kj
其中正则表达式"\d{3,5}[a-z]{2}"表示3~5个数字跟上两个字母,然后打印出每个匹配到的字符串。
如果想要打印每个匹配串中的数字,如何操作呢?
分组机制可以帮助我们在正则表达式中进行分组。规定使用()进行分组,这里我们把字母和数字各分为一组"(\d{3,5})([a-z]{2})"
然后在调用m.group(int group)方法时传入组号即可。
注意:组号从0开始,0组代表整个正则表达式,从0之后,就是在正则表达式中从左到右每一个左括号对应一个组。在这个表达式中第1组是数字, 第2组是字母。
public static void main(String[] args) {
Pattern p=Pattern.compile("(\\d{3,5})([a-z]{2})");//正则表达式为3~5个数字跟上两个字母
String s="005aa-856zx-1425kj-29";
Matcher m=p.matcher(s);
while(m.find()){
p(m.group(1));
}
}
输出结果:
005
856
1425
以上就是对于正则表达式的一个总结和使用说明,愿正则表达式给你带来更愉快的编程体验。
作者:初念初恋
原文链接:https://juejin.cn/post/6999944971495145502
这里是云端源想IT,帮你轻松学IT”
嗨~ 今天的你过得还好吗?
如果你赶不上凌晨五点的日出
你不妨看看傍晚六点的夕阳
我的意思是
你可以选择后者
- 2023.06.30 -
说起正则表达式大家应该都不陌生,今天小编给大家找了一个JavaScript正则表达式的练习,利用正则表达式进行注册信息格式验证,快打开你的电脑一起来练习试试吧!
注册信息界面如下:
需求格式要求如下,开始练习前,大家要仔细阅读要求哦!
格式要求:
1、学号项不能为空,必须为纯数字,不能与数据库中的重复,正则表达式/^\d+$/g;
2、姓名项不能为空;
3、密码不能为空且无空格判断空格text.split(" ").length !=1,安全等级分为3个等级:
4、确认密码项要求与密码项填写的密码一致;
5、年级项不能为空,且格式必须为第20**级,正则表达式text.search(/^\u7B2C{1}20\d+\u7EA7{1}$/) !=-1;
6、专业项不能为空,且只能以汉字开头,结尾可以为汉字或者字母正则表达式text.search(/^[\u4e00-\u9fa5]+[a-zA-Z]*$/g) !=-1;
7、班级项不能为空且格式为专业+班级即类似电信1001格,正则表达式text.search(/^[\u4e00-\u9fa5]+\d{4}$/) !=-1;
8、手机项可以为空,格式为(+86)1*********正则表达式text.search(/^(\+86)?1\d{10}$/) !=-1。
运行效果:
正确格式输入后运行效果:
下面小编将参考代码奉上,听我的!先自己试着敲代码运行试试,实在不会了再看答案哦!
html代码:
<!--register-->
<div style="display:block">
<div>
<span style=" font-weight: bold;"><label>注册</label></span>
</div>
<div>
<span class="input_span"><label class="text_label">学号</label><label class="text_label" style="color:Red;">*</label></span>
<span class="input_span"><input type="text" id="studentNum_input" οnblur="checkRegisterInfo(1)"/></span>
<span><label id="studentNumCheck_label"></label></span>
</div>
<div>
<span class="input_span"><label class="text_label">姓名</label><label class="text_label" style="color:Red;">*</label></span>
<span class="input_span"><input type="text" id="name_input" οnblur="checkRegisterInfo(2)"/></span>
<span><label id="nameCheck_label"></label></span>
</div>
<div>
<span class="input_span"><label class="text_label">密码</label><label class="text_label" style="color:Red;">*</label></span>
<span class="input_span"><input type="password" id="passwd_rigester_input" οnblur="checkRegisterInfo(3)"/></span>
<span><label id="passwdCheck_label"></label></span>
</div>
<div>
<span class="input_span" id="confirmpasswd_span"><label>确认密码</label><label class="text_label" style="color:Red;"> *</label></span>
<span class="input_span"><input type="password" id="confirmPasswd_input" οnblur="checkRegisterInfo(4)"/></span>
<span><label id="confirmPasswdCheck_label"></label></span>
</div>
<div>
<span class="input_span"><label class="text_label">年级</label><label class="text_label" style="color:Red;">*</label></span>
<span class="input_span"><input type="text" id="grade_input" οnblur="checkRegisterInfo(5)"/></span>
<span><label id="gradeCheck_label">格式:第20**级</label></span>
</div>
<div>
<span class="input_span"><label class="text_label">专业</label><label class="text_label" style="color:Red;">*</label></span>
<span class="input_span"><input type="text" id="major_input" οnblur="checkRegisterInfo(6)"/></span>
<span><label id="majorCheck_label"></label></span>
</div>
<div>
<span class="input_span"><label class="text_label">班级</label><label class="text_label" style="color:Red;">*</label></span>
<span class="input_span"><input type="text" id="class_input" οnblur="checkRegisterInfo(7)"/></span>
<span><label id="classCheck_label">格式:电信1001</label></span>
</div>
<div>
<span class="input_span" id="phone_span"><label class="text_label">手机</label></span>
<span class="input_span"><input type="text" id="phone_input" οnblur="checkRegisterInfo(8)"/></span>
<span><label id="phoneCheck_label"></label></span>
</div>
<div class="button_div"><span><input id="register_button" type="button" οnclick="summitRegisterInfo()" value="用户注册"/></span></div>
</div>
<!--end register-->
</div>
就知道有的人会直接看答案~
代码比较长,大家有耐心一点,看了答案也要自己再敲一遍哦,这样你的体会将更深刻。
JS验证源代码:
/*
* 功能: 验证注册信息是否合法,在每次<input>控件失去聚焦时调用
* 参数: num 控件编号,指示是哪个控件触发了该函数
* 返回值: 如果全部合法返回true,否则给予响应的错误提示并返回false
*/
function checkRegisterInfo(num) {
var text;
switch (num) {
//当点击提交按钮时校验必填项是否为空,防止直接点击提交按钮
case 0:
if (document.getElementById("studentNum_input").value==""
|| document.getElementById("name_input").value==""
|| document.getElementById("passwd_rigester_input").value==""
|| document.getElementById("confirmPasswd_input").value==""
|| document.getElementById("grade_input").value==""
|| document.getElementById("major_input").value==""
|| document.getElementById("class_input").value=="") {
alert("注册失败,打*号的项不能为空!");
return false;
}
else
return true;
break;
//验证学号
case 1:
text=document.getElementById("studentNum_input").value;
var check=document.getElementById("studentNumCheck_label");
//验证是否为空
if (text=="") {
check.style.color="red";
check.innerText="学号项不能为空!";
}
//验证格式
else if (text.search(/^\d+$/g)==-1) {
check.style.color="red";
check.innerText="学号应为纯数字!";
}
else {
//验证学号的唯一性
var xmlHttp=createXmlHttp();
xmlHttp.open("get", "Ajax.aspx?met=rigesterInfo&data=" + escape(text), true);
xmlHttp.send(null);
xmlHttp.onreadystatechange=function () {
if (xmlHttp.readyState==4 & xmlHttp.status==200) {
//服务器返回true表示该学号可用
if (xmlHttp.responseText) {
check.style.color="yellow";
check.innerText="恭喜您,该学号可用!";
}
else {
check.style.color="red";
check.innerText="您输入的学号已存在,请重新输入!";
}
}
}
}
break;
//验证姓名
case 2:
text=document.getElementById("name_input").value;
var check=document.getElementById("nameCheck_label");
if (text=="") {
check.style.color="red";
check.innerText="名字项不能为空!";
}
else {
check.style.color="yellow";
check.innerText="名字项填写正确!";
}
break;
//验证密码
case 3:
text=document.getElementById("passwd_rigester_input").value;
var check=document.getElementById("passwdCheck_label");
if (text=="") {
check.style.color="red";
check.innerText="密码项不能为空!";
}
//密码中只能有数字、字母和标点符号
else if (text.split(" ").length !=1) {
check.style.color="red";
check.innerText="密码中不能出现空格!";
}
else {
//验证密码的安全级数,纯数字或纯字母或纯标点为1级,字母+数字为2级,字母或数字任意一个+标点为3级
if ((text.search(/^[a-zA-Z]+$/g) !=-1) || (text.search(/^[0-9]+$/g) !=-1)) {
check.style.color="yellow";
check.innerText="密码安全级别为1级!";
}
else if (text.search(/^[a-zA-Z0-9]+$/g) !=-1) {
check.style.color="yellow";
check.innerText="密码安全级别为2级!";
}
else {
check.style.color="yellow";
check.innerText="密码安全级别为3级!";
}
}
break;
//验证确认密码
case 4:
text=document.getElementById("confirmPasswd_input").value;
var check=document.getElementById("confirmPasswdCheck_label");
if (text !=document.getElementById("passwd_rigester_input").value) {
check.style.color="red";
check.innerText="两次密码输入不一致!";
}
else {
check.style.color="yellow";
check.innerText="密码确认正确!";
}
break;
//验证年级
case 5:
text=document.getElementById("grade_input").value;
var check=document.getElementById("gradeCheck_label");
if (text=="") {
check.style.color="red";
check.innerText="年级项不能为空!";
}
else if (text.search(/^\u7B2C{1}20\d+\u7EA7{1}$/) !=-1) {
check.style.color="yellow";
check.innerText="年级项填写正确!";
}
else {
check.style.color="red";
check.innerText="年级项格式为:第20**级!";
}
break;
//验证专业
case 6:
text=document.getElementById("major_input").value;
var check=document.getElementById("majorCheck_label");
if (text=="") {
check.style.color="red";
check.innerText="专业项不能为空!";
}
else if (text.search(/^[\u4e00-\u9fa5]+[a-zA-Z]*$/g) !=-1) {
check.style.color="yellow";
check.innerText="专业项填写正确!";
}
else {
check.style.color="red";
check.innerText="专业项填写不正确!";
}
break;
//验证班级
case 7:
text=document.getElementById("class_input").value;
var check=document.getElementById("classCheck_label");
if (text=="") {
check.style.color="red";
check.innerText="班级项不能为空!";
}
else if (text.search(/^[\u4e00-\u9fa5]+\d{4}$/) !=-1) {
check.style.color="yellow";
check.innerText="班级项填写正确!";
}
else {
check.style.color="red";
check.innerText="班级项格式为:电信1001!";
}
break;
//验证电话
case 8:
text=document.getElementById("phone_input").value;
var check=document.getElementById("phoneCheck_label");
if (text=="") {
break;
}
else if (text.search(/^(\+86)?1\d{10}$/) !=-1) {
check.style.color="yellow";
check.innerText="手机项填写正确!";
}
else {
check.style.color="red";
check.innerText="手机项格式错误!";
}
break;
}
}
利用正则表达式进行注册信息格式验证是非常重要的一个知识点,希望这个小练习能够帮助你更快地掌握!
我们下期再见!
END
文案编辑|云端学长
文案配图|云端学长
内容由:云端源想分享
正则表达式是一种用来匹配字符串的强有力的武器
它的设计思想是用一种描述性的语言定义一个规则,凡是符合规则的字符串,我们就认为它“匹配”了,否则,该字符串就是不合法的
根据正则表达式语法规则,大部分字符仅能够描述自身,这些字符被称为普通字符,如所有的字母、数字等。
元字符就是拥有特动功能的特殊字符,大部分需要加反斜杠进行标识,以便于普通字符进行区别,而少数元字符,需要加反斜杠,以便转译为普通字符使用。JavaScript 正则表达式支持的元字符如表所示。
在 JavaScript中,正则表达式也是对象,构建正则表达式有两种方式:
const re=/\d+/g;
const re=new RegExp("\\d+","g");
const rul="\\d+"
const re1=new RegExp(rul,"g");
使用构建函数创建,第一个参数可以是一个变量,遇到特殊字符\需要使用\进行转义
表示字符的方法有多种,除了可以直接使用字符本身外,还可以使用 ASCII 编码或者 Unicode 编码来表示。
下面使用 ASCII 编码定义正则表达式直接量。
var r=/\x61/;var s="JavaScript";var a=s.match(s);
由于字母 a 的 ASCII 编码为 97,被转换为十六进制数值后为 61,因此如果要匹配字符 a,就应该在前面添加“\x”前缀,以提示它为 ASCII 编码。
除了十六进制外,还可以直接使用八进制数值表示字符。
var r=/1/;var s="JavaScript";var a=s.match(r);
使用十六进制需要添加“\x”前缀,主要是为了避免语义混淆,而八进制则不需要添加前缀。
ASCII 编码只能够匹配有限的单字节字符,使用 Unicode 编码可以表示双字节字符。Unicode 编码方式:“\u”前缀加上 4 位十六进制值。
var r="/\u0061/";var s="JavaScript";var a=s.match(s);
在 RegExp() 构造函数中使用元字符时,应使用双斜杠。
var r=new RegExp("\u0061");
RegExp() 构造函数的参数只接受字符串,而不是字符模式。在字符串中,任何字符加反斜杠还表示字符本身,如字符串“\u”就被解释为 u 本身,所以对于“\u0061”字符串来说,在转换为字符模式时,就被解释为“u0061”,而不是“\u0061”,此时反斜杠就失去转义功能。解决方法:在字符 u 前面加双反斜杠。
常见的校验规则如下:
规则 | 描述 |
\ | 转义 |
^ | 匹配输入的开始 |
$ | 匹配输入的结束 |
* | 匹配前一个表达式 0 次或多次 |
+ | 匹配前面一个表达式 1 次或者多次。等价于 {1,} |
? | 匹配前面一个表达式 0 次或者 1 次。等价于{0,1} |
. | 默认匹配除换行符之外的任何单个字符 |
x(?=y) | 匹配'x'仅仅当'x'后面跟着'y'。这种叫做先行断言 |
(?<=y)x | 匹配'x'仅当'x'前面是'y'.这种叫做后行断言 |
x(?!y) | 仅仅当'x'后面不跟着'y'时匹配'x',这被称为正向否定查找 |
(?<!y)x | 仅仅当'x'前面不是'y'时匹配'x',这被称为反向否定查找 |
x|y | 匹配‘x’或者‘y’ |
{n} | n 是一个正整数,匹配了前面一个字符刚好出现了 n 次 |
{n,} | n是一个正整数,匹配前一个字符至少出现了n次 |
{n,m} | n 和 m 都是整数。匹配前面的字符至少n次,最多m次 |
[xyz] | 一个字符集合。匹配方括号中的任意字符 |
[^xyz] | 匹配任何没有包含在方括号中的字符 |
\b | 匹配一个词的边界,例如在字母和空格之间 |
\B | 匹配一个非单词边界 |
\d | 匹配一个数字 |
\D | 匹配一个非数字字符 |
\f | 匹配一个换页符 |
\n | 匹配一个换行符 |
\r | 匹配一个回车符 |
\s | 匹配一个空白字符,包括空格、制表符、换页符和换行符 |
\S | 匹配一个非空白字符 |
\w | 匹配一个单字字符(字母、数字或者下划线) |
\W | 匹配一个非单字字符 |
标志 | 描述 |
g | 全局搜索。 |
i | 不区分大小写搜索。 |
m | 多行搜索。 |
s | 允许 . 匹配换行符。 |
u | 使用unicode码的模式进行匹配。 |
y | 执行“粘性(sticky)”搜索,匹配从目标字符串的当前位置开始。 |
使用方法如下:
var re=/pattern/flags;
var re=new RegExp("pattern", "flags");
在了解下正则表达式基本的之外,还可以掌握几个正则表达式的特性:
在了解贪婪模式前,首先举个例子:
const reg=/ab{1,3}c/
在匹配过程中,尝试可能的顺序是从多往少的方向去尝试。首先会尝试bbb,然后再看整个正则是否能匹配。不能匹配时,吐出一个b,即在bb的基础上,再继续尝试,以此重复
如果多个贪婪量词挨着,则深度优先搜索
const string="12345";
const regx=/(\d{1,3})(\d{1,3})/;
console.log( string.match(reg) );
//=> ["12345", "123", "45", index: 0, input: "12345"]
其中,前面的\d{1,3}匹配的是"123",后面的\d{1,3}匹配的是"45"
惰性量词就是在贪婪量词后面加个问号。表示尽可能少的匹配
var string="12345";
var regex=/(\d{1,3}?)(\d{1,3})/;
console.log( string.match(regex) );
//=> ["1234", "1", "234", index: 0, input: "12345"]
其中\d{1,3}?只匹配到一个字符"1",而后面的\d{1,3}匹配了"234"
分组主要是用过()进行实现,比如beyond{3},是匹配d字母3次。而(beyond){3}是匹配beyond三次
在()内使用|达到或的效果,如(abc | xxx)可以匹配abc或者xxx
反向引用,巧用$分组捕获
let str="John Smith";
// 交换名字和姓氏
console.log(str.replace(/(john) (smith)/i, '$2, $1')) // Smith, John
正则表达式常被用于某些方法,我们可以分成两类:
方法 | 描述 |
exec | 一个在字符串中执行查找匹配的RegExp方法,它返回一个数组(未匹配到则返回 null)。 |
test | 一个在字符串中测试是否匹配的RegExp方法,它返回 true 或 false。 |
match | 一个在字符串中执行查找匹配的String方法,它返回一个数组,在未匹配到时会返回 null。 |
matchAll | 一个在字符串中执行查找所有匹配的String方法,它返回一个迭代器(iterator)。 |
search | 一个在字符串中测试匹配的String方法,它返回匹配到的位置索引,或者在失败时返回-1。 |
replace | 一个在字符串中执行查找匹配的String方法,并且使用替换字符串替换掉匹配到的子字符串。 |
split | 一个使用正则表达式或者一个固定字符串分隔一个字符串,并将分隔后的子字符串存储到数组中的 String 方法。 |
str.match(regexp) 方法在字符串 str 中找到匹配 regexp 的字符
如果 regexp 不带有 g 标记,则它以数组的形式返回第一个匹配项,其中包含分组和属性 index(匹配项的位置)、input(输入字符串,等于 str)
let str="I love JavaScript";
let result=str.match(/Java(Script)/);
console.log( result[0] ); // JavaScript(完全匹配)
console.log( result[1] ); // Script(第一个分组)
console.log( result.length ); // 2
// 其他信息:
console.log( result.index ); // 7(匹配位置)
console.log( result.input ); // I love JavaScript(源字符串)
如果 regexp 带有 g 标记,则它将所有匹配项的数组作为字符串返回,而不包含分组和其他详细信息
let str="I love JavaScript";
let result=str.match(/Java(Script)/g);
console.log( result[0] ); // JavaScript
console.log( result.length ); // 1
如果没有匹配项,则无论是否带有标记 g ,都将返回 null
let str="I love JavaScript";
let result=str.match(/HTML/);
console.log(result); // null
返回一个包含所有匹配正则表达式的结果及分组捕获组的迭代器
const regexp=/t(e)(st(\d?))/g;
const str='test1test2';
const array=[...str.matchAll(regexp)];
console.log(array[0]);
// expected output: Array ["test1", "e", "st1", "1"]
console.log(array[1]);
// expected output: Array ["test2", "e", "st2", "2"]
返回第一个匹配项的位置,如果未找到,则返回 -1
let str="A drop of ink may make a million think";
console.log( str.search( /ink/i ) ); // 10(第一个匹配位置)
这里需要注意的是,search 仅查找第一个匹配项
替换与正则表达式匹配的子串,并返回替换后的字符串。在不设置全局匹配g的时候,只替换第一个匹配成功的字符串片段
const reg1=/javascript/i;
const reg2=/javascript/ig;
console.log('hello Javascript Javascript Javascript'.replace(reg1,'js'));
//hello js Javascript Javascript
console.log('hello Javascript Javascript Javascript'.replace(reg2,'js'));
//hello js js js
使用正则表达式(或子字符串)作为分隔符来分割字符串
console.log('12, 34, 56'.split(/,\s*/)) // 数组 ['12', '34', '56']
regexp.exec(str) 方法返回字符串 str 中的 regexp 匹配项,与以前的方法不同,它是在正则表达式而不是字符串上调用的
根据正则表达式是否带有标志 g,它的行为有所不同
如果没有 g,那么 regexp.exec(str) 返回的第一个匹配与 str.match(regexp) 完全相同
如果有标记 g,调用 regexp.exec(str) 会返回第一个匹配项,并将紧随其后的位置保存在属性regexp.lastIndex 中。 下一次同样的调用会从位置 regexp.lastIndex 开始搜索,返回下一个匹配项,并将其后的位置保存在 regexp.lastIndex 中
let str='More about JavaScript at https://javascript.info';
let regexp=/javascript/ig;
let result;
while (result=regexp.exec(str)) {
console.log( `Found ${result[0]} at position ${result.index}` );
// Found JavaScript at position 11
// Found javascript at position 33
}
查找匹配项,然后返回 true/false 表示是否存在
let str="I love JavaScript";
// 这两个测试相同
console.log( /love/i.test(str) ); // true
通过上面的学习,我们对正则表达式有了一定的了解
下面再来看看正则表达式一些案例场景:
验证QQ合法性(5~15位、全是数字、不以0开头):
const reg=/^[1-9][0-9]{4,14}$/
const isvalid=patrn.exec(s)
校验用户账号合法性(只能输入5-20个以字母开头、可带数字、“_”、“.”的字串):
var patrn=/^[a-zA-Z]{1}([a-zA-Z0-9]|[._]){4,19}$/;
const isvalid=patrn.exec(s)
将url参数解析为对象
const protocol='(?<protocol>https?:)';
const host='(?<host>(?<hostname>[^/#?:]+)(?::(?<port>\\d+))?)';
const path='(?<pathname>(?:\\/[^/#?]+)*\\/?)';
const search='(?<search>(?:\\?[^#]*)?)';
const hash='(?<hash>(?:#.*)?)';
const reg=new RegExp(`^${protocol}\/\/${host}${path}${search}${hash}$`);
function execURL(url){
const result=reg.exec(url);
if(result){
result.groups.port=result.groups.port || '';
return result.groups;
}
return {
protocol:'',host:'',hostname:'',port:'',
pathname:'',search:'',hash:'',
};
}
console.log(execURL('https://localhost:8080/?a=b#xxxx'));
protocol: "https:"
host: "localhost:8080"
hostname: "localhost"
port: "8080"
pathname: "/"
search: "?a=b"
hash: "#xxxx"
再将上面的search和hash进行解析
function execUrlParams(str){
str=str.replace(/^[#?&]/,'');
const result={};
if(!str){ //如果正则可能配到空字符串,极有可能造成死循环,判断很重要
return result;
}
const reg=/(?:^|&)([^&=]*)=?([^&]*?)(?=&|$)/y
let exec=reg.exec(str);
while(exec){
result[exec[1]]=exec[2];
exec=reg.exec(str);
}
return result;
}
console.log(execUrlParams('#'));// {}
console.log(execUrlParams('##'));//{'#':''}
console.log(execUrlParams('?q=3606&src=srp')); //{q: "3606", src: "srp"}
console.log(execUrlParams('test=a=b=c&&==&a='));//{test: "a=b=c", "": "=", a: ""}
1. dotAll模式(s选项)
这个特性已经在ECMAScript 2018正式发布了。
默认情况下,.可以匹配任意字符,除了换行符:
/foo.bar/u.test('foo\nbar'); // false
另外,.不能匹配Unicode字符,需要使用u选项启用Unicode模式才行。
ES2018引入了dotAll模式,通过s选项可以启用,这样,.就可以匹配换行符了。
/foo.bar/su.test('foo\nbar'); // true
2. Lookbehind断言
这个特性已经在ECMAScript 2018正式发布了。
ECMAScript目前仅支持lookahead断言。
下面示例是Positive lookahead,匹配字符串“42 dollars”中紧跟着是”dollars”的数字:
const pattern=/\d+(?=dollars)/u;
const result=pattern.exec('42 dollars');
console.log(result[0]); // 打印42
下面示例是Negative lookahead,匹配字符串“42 pesos”中紧跟着的不是”dollars”的数字:
const pattern=/\d+(?! dollars)/u;
const result=pattern.exec('42 pesos');
console.log(result[0]); // 打印42
ES2018添加了lookbehind断言。
下面示例是Positive lookbehind,匹配字符串“”中前面是”$”的数字:
const pattern=/(?<=\$)\d+/u;
const result=pattern.exec('$42');
console.log(result[0]); // 打印42
下面示例是Negative lookbehind,匹配字符串“”中前面不是是”$”的数字:
const pattern=/(?<!\$)\d+/u;
const result=pattern.exec('42');
console.log(result[0]); // 打印42
Fundebug专注于网页、微信小程序、微信小游戏,支付宝小程序,React Native,Node.js和Java线上BUG实时监控,欢迎免费试用
3. Named capture groups
这个特性已经在ECMAScript 2018正式发布了。
目前,正则表达式中小括号匹配的分组是通过数字编号的:
const pattern=/(\d{4})-(\d{2})-(\d{2})/u;
const result=pattern.exec('2017-01-25');
console.log(result[0]); // 打印"2017-01-25"
console.log(result[1]); // 打印"2017"
console.log(result[2]); // 打印"01"
console.log(result[3]); // 打印"25"
这样很方便,但是可读性很差,且不易维护。一旦正则表达式中小括号的顺序有变化时,我们就需要更新对应的数字编号。
ES2018添加named capture groups, 可以指定小括号中匹配内容的名称,这样可以提高代码的可读性,也便于维护。
const pattern=/(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/u;
const result=pattern.exec('2017-01-25');
console.log(result.groups.year); // 打印"2017"
console.log(result.groups.month); // 打印"01"
console.log(result.groups.day); // 打印"25"
4. Unicode property escapes
这个特性已经在ECMAScript 2018正式发布了。
Unicode标准为每一个字符分配了多个属性。比如,当你要匹配希腊语字符时,则可以搜索Script_Extensions属性为Greek的字符。
Unicode property escapes使得我们可以使用ECMAScript正则表达式直接匹配Unicode字符的属性:
const regexGreekSymbol=/\p{Script_Extensions=Greek}/u;
console.log(regexGreekSymbol.test('π')); // 打印true
5. String.prototype.matchAll
这个特性还处在Stage 3 Draft
g和y选项通常用于匹配一个字符串,然后遍历所有匹配的子串,包括小括号匹配的分组。String.prototype.matchAll让这个操作变得更加简单了。
const string='Magic hex numbers: DEADBEEF CAFE 8BADF00D';
const regex=/\b[0-9a-fA-F]+\b/g;
for (const match of string.matchAll(regex)) {
console.log(match);
}
每一个迭代所返回的match对象与regex.exec(string)所返回的结果相同:
// Iteration 1:
[
'DEADBEEF',
index: 19,
input: 'Magic hex numbers: DEADBEEF CAFE 8BADF00D'
]
// Iteration 2:
[
'CAFE',
index: 28,
input: 'Magic hex numbers: DEADBEEF CAFE 8BADF00D'
]
// Iteration 3:
[
'8BADF00D',
index: 33,
input: 'Magic hex numbers: DEADBEEF CAFE 8BADF00D'
]
注意,这个特性还处在Stage 3 Draft,因此还存在变化的可能性,示例代码是根据最新的提案写的。另外,浏览器也还没有支持这个特性。String.prototype.matchAll最快可以被加入到ECMAScript 2019中。
6. 规范RegExp遗留特性
这个提案还处在Stage 3 Draft
这个提案规范了RegExp的遗留特性,比如RegExp.prototype.compile方法以及它的静态属性从RegExp.到RegExp.。虽然这些特性已经弃用(deprecated)了,但是为了兼容性我们不能将他们去。因此,规范这些RegExp遗留特性是最好的方法。因此,这个提案有助于保证兼容性。
/**
* @param {string} path
* @returns {Boolean}
*/
export function isExternal(path) {
return /^(https?:|mailto:|tel:)/.test(path)
}
/**
* @param {string} str
* @returns {Boolean}
*/
export function validUsername(str) {
const valid_map=['admin', 'editor']
return valid_map.indexOf(str.trim()) >=0
}
/**
* @param {string} url
* @returns {Boolean}
*/
export function validURL(url) {
const reg=/^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/
return reg.test(url)
}
/**
* @param {string} str
* @returns {Boolean}
*/
export function validLowerCase(str) {
const reg=/^[a-z]+$/
return reg.test(str)
}
/**
* @param {string} str
* @returns {Boolean}
*/
export function validUpperCase(str) {
const reg=/^[A-Z]+$/
return reg.test(str)
}
/**
* @param {string} str
* @returns {Boolean}
*/
export function validAlphabets(str) {
const reg=/^[A-Za-z]+$/
return reg.test(str)
}
/**
* @param {string} email
* @returns {Boolean}
*/
export function validEmail(email) {
const reg=/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
return reg.test(email)
}
/**
* @param {string} str
* @returns {Boolean}
*/
export function isString(str) {
if (typeof str==='string' || str instanceof String) {
return true
}
return false
}
/**
* @param {Array} arg
* @returns {Boolean}
*/
export function isArray(arg) {
if (typeof Array.isArray==='undefined') {
return Object.prototype.toString.call(arg)==='[object Array]'
}
return Array.isArray(arg)
}
TS版
/**
* @param {string} path
* @returns {Boolean}
*/
export function isExternal(path) {
return /^(https?:|mailto:|tel:)/.test(path);
}
/**
* @param {string} str
* @returns {Boolean}
*/
export function validUsername(str) {
const valid_map=['admin', 'editor'];
return valid_map.indexOf(str.trim()) >=0;
}
/**
* @param {string} url
* @returns {Boolean}
*/
export function validURL(url) {
const reg=/^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/;
return reg.test(url);
}
/**
* @param {string} str
* @returns {Boolean}
*/
export function validLowerCase(str) {
const reg=/^[a-z]+$/;
return reg.test(str);
}
/**
* @param {string} str
* @returns {Boolean}
*/
export function validUpperCase(str) {
const reg=/^[A-Z]+$/;
return reg.test(str);
}
/**
* @param {string} str
* @returns {Boolean}
*/
export function validAlphabets(str) {
const reg=/^[A-Za-z]+$/;
return reg.test(str);
}
/**
* @param {string} email
* @returns {Boolean}
*/
export function validEmail(email) {
const reg=/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return reg.test(email);
}
/**
* @param {string} phone
* @returns {Boolean}
*/
export function validPhone(phone) {
const reg=/^1[3-9][0-9]{9}$/;
return reg.test(phone);
}
/**
* @param {string} str
* @returns {Boolean}
*/
export function isString(str) {
if (typeof str==='string' || str instanceof String) {
return true;
}
return false;
}
/**
* @param {Array} arg
* @returns {Boolean}
*/
export function isArray(arg) {
if (typeof Array.isArray==='undefined') {
return Object.prototype.toString.call(arg)==='[object Array]';
}
return Array.isArray(arg);
}
// [修改]-新增-开始
/**
* 英文验证
* @param min
* @param max
* @param value
*/
export function english(value: string, min=6, max=12): boolean {
return new RegExp('^[a-z|A-Z]{' + min + ',' + max + '}$').test(value);
}
/**
* 中文验证
* @param min
* @param max
* @param value
*/
export function chinese(value: string, min=2, max=12): boolean {
return new RegExp('^[\u4e00-\u9fa5]{' + min + ',' + max + '}$').test(value);
}
/**
* 非中文
* @param value 内容
* @returns boolean
*/
export function notChinese(value: string): boolean {
return !/[\u4e00-\u9fa5]/.test(value);
}
/**
* 必需数字
* @param min
* @param max
* @param value
*/
export function number(value: string, min=1, max=20): boolean {
return new RegExp('^d{' + min + ',' + max + '}$').test(value);
}
/**
* 必需小数点最大值
* @param min
* @param max
* @param value
*/
export function precision(value: string, max=8, precision=8): boolean {
return new RegExp(
'(^[0-9]{1,' + max + '}$)|(^[0-9]{1,' + max + '}[.]{1}[0-9]{1,' + precision + '}$)',
).test(value);
}
/**
* 复杂密码验证
* @param value
*/
export function pwd(value: string): boolean {
if (value && value.length > 15) {
const en=/[a-z]/.test(value);
const num=/[0-9]/.test(value);
const daxie=/[A-Z]/.test(value);
const teshu=/[~!@#$%^&*()_+=-\[\]\\,.\/;':{}]/.test(value);
return en && num && daxie && teshu;
}
return false;
}
// [修改]-新增-结束
给大家分享我收集整理的各种学习资料,前端小白交学习流程,入门教程等回答-下面是学习资料参考。
前端学习交流、自学、学习资料等推荐 - 知乎
*请认真填写需求信息,我们会在24小时内与您取得联系。