目录
一、JS正则表达式简介
JavaScript 正则表达式
以下主要内容来自W3school教程
正则表达式是构成搜索模式的字符序列。
该搜索模式可用于文本搜索和文本替换操作。
1.1 什么是正则表达式?
正则表达式是构成搜索模式(search pattern)的字符序列。
当您搜索文本中的数据时,您可使用搜索模式来描述您搜索的内容。
正则表达式可以是单字符,或者更复杂的模式。
正则表达式可用于执行所有类型的文本搜索和文本替换操作。
语法
/pattern/modifiers;
实例
var patt = /w3school/i;
例子解释:
/w3school/i 是一个正则表达式。
w3school 是模式(pattern)(在搜索中使用)。
i 是修饰符(把搜索修改为大小写不敏感)。
1.2 使用字符串方法
在 JavaScript 中,正则表达式常用于两个字符串方法:search() 和 replace()。
search() 方法使用表达式来搜索匹配,然后返回匹配的位置。
replace() 方法返回模式被替换处修改后的字符串。
在字符串方法 search() 中使用正则表达式
实例
使用正则表达式执行搜索字符串中 “w3school” 的大小写不敏感的搜索:
var str = "Visit W3School";
var n = str.search(/w3school/i);
n 中的结果将是: 6
在字符串方法 replace() 中使用正则表达式
实例
使用大小写不明的正则表达式以 W3school 来替换字符串中的 Microsoft:
var str = "Visit Microsoft!";
var res = str.replace(/microsoft/i, "W3School");
res 的结果将是:
Visit W3School!
1.3 正则表达式修饰符
修饰符可用于大小写不敏感的更全局的搜素:
1.4 正则表达式模式
括号用于查找一定范围的字符串:
元字符(Metacharacter)是拥有特殊含义的字符:
Quantifiers 定义量词:
1.5 使用正则表达式的途径
二、JS正则表达式匹配与搜索
举例:通过两种途径,实现字符串匹配、搜索。实现多个模式测试
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript中的正则表达式</title>
</head>
<body>
<h1>JavaScript中的正则表达式</h1>
</body>
<script>
//正则的使用
var str = "wert45678yuiytrew";
//使用正则匹配子串str中的数字
console.log(str.match(/[0-9]+/));
//使用RegExp创建一个正则对象
var pat = new RegExp("[0-9]+");
console.log(str.match(pat));
console.log(pat.exec(str));
//以上三个返回结果一致:["45678", index: 4, input: "wert45678yuiytrew", groups: undefined]
console.log("==============================");
//正则搜索
console.log(str.search(/[0-9]+/)); //4 返回首次匹配位置 ,没有返回-1
console.log(str.search(pat)); //4 返回首次匹配位置 ,没有返回-1
console.log(pat.test(str)); //true 返回是否匹配
//匹配多个
console.log("==============================");
var str = "wert45678yui456ytr678ew";
console.log(str.match(/[0-9]+/)); //默认只匹配一次
console.log(str.match(/[0-9]+/g)); //(3) ["45678", "456", "678"] 使用g修饰符 匹配所有
</script>
</html>
三、JS正则表达式语法
3.1 修饰符
3.2 方括号
方括号用于查找某个范围内的字符:
3.3 元字符
元字符(Metacharacter)是拥有特殊含义的字符:
3.4 量词
^$搭配表示前后不能有其他字符
3.5 RegExp 对象属性
3.6 RegExp 对象方法
3.7 支持正则表达式的 String 对象的方法
举例:列举常用的正则表达式方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript中的正则表达式</title>
</head>
<body>
<h1>JavaScript中的正则表达式</h1>
</body>
<script>
//正则的使用
var str = "wer245ty4d56fg78hj987k";
//使用正则匹配子串str中的数字
//console.log(str.match(/[0-9]/g)); //匹配任意一位数字
//console.log(str.match(/[0-9][0-9]/g)); //匹配任意两位数字
//console.log(str.match(/[0-9]{2}/g)); //匹配任意两位数字
//console.log(str.match(/[0-9][0-9][0-9]/g)); //匹配任意三位数字
//console.log(str.match(/[0-9]{3}/g)); //匹配任意三位数字
//console.log(str.match(/[0-9]{2,3}/g)); //匹配任意两位或三位数字
//console.log(str.match(/\d{2,3}/g)); //匹配任意两位或三位数字
console.log(str.match(/\d+/g)); //匹配至少一位数字
console.log(str.match(/\d{1,}/g)); //匹配至少一位数字
console.log(str.match(/[0-9]{1,}/g)); //匹配至少一位数字
// \d{1,} [0-9]{1,} \d+ [0-9]+ 都表示至少一位的数字
//精确匹配
var pat = new RegExp("[0-9]+");// 至少一位数字
console.log(pat.test("er2567thj")); //true 匹配子串中是否含有数字
var pat = new RegExp("^[0-9]+");
console.log(pat.test("er2567thj")); //false 匹配子串中是否是以数字开头
console.log(pat.test("2567thj")); //true 匹配子串中是否是以数字开头
var pat = new RegExp("[0-9]+$");
console.log(pat.test("er2567thj")); //false 匹配子串中是否是以数字结尾
console.log(pat.test("wer2567")); //true 匹配子串中是否是以数字结尾
var pat = new RegExp("^[0-9]+$");
console.log(pat.test("2567thj")); //false 匹配子串中是否是纯数字
console.log(pat.test("wer2567")); //false 匹配子串中是否是纯数字
console.log(pat.test("2567")); //true 匹配子串中是否是纯数字
var pat2 = new RegExp("^[0-9]{6}$"); //精确匹配任意6位数字
</script>
</html>
四、JS正则表达式替换与分割
字符串分隔:
五、JS正则表达式表单验证
验证账号:
验证邮箱:
示例代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript中的正则表达式</title>
</head>
<body>
<h1>JavaScript中的正则表达式在表单验证中的实例</h1>
<form action="js03.html" name="myform" onsubmit="return doSubmit()" method="post">
<!-- onblur失去鼠标焦点事件 -->
账号:<input type="text" name="uname" onblur="checkUname()" /><br/><br/>
邮箱:<input type="text" name="email" onblur="checkEmail()"/><br/><br/>
<input type="submit" value="提交"/>
</form>
</body>
<script>
//验证账号函数
function checkUname(){
//获取账号信息
var uname = document.myform.uname.value;
//执行验证
//if(uname.match(/^[0-9A-Za-z_]{8,16}$/) == null){
// \w相当于字母、数字、下划线
if(uname.match(/^\w{8,16}$/) == null){
alert("请输入8~16位的账号信息!");
return false;
}
return true;
}
//验证邮箱函数
function checkEmail(){
//获取账号信息
var email = document.myform.email.value;
//执行验证
if(email.match(/^\w+@\w+(\.\w+){1,2}$/) == null){
alert("请输入正确的Email信息!");
return false;
}
return true;
}
//表单提交
function doSubmit(){
return checkUname() && checkEmail();
}
</script>
</html>