JAVAEE笔记——前端技术之正则表达式
JS正则表达式匹配与搜索
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript的正则表达式</title>
</head>
<body>
<h1>JavaScript中的正则表达式</h1>
</body>
<script>
//正则的使用
var str = "wert45678yuiyertw";
//使用字符串的match()方法来正则匹配字符串str中的数字
console.log(str.match(/[0-9]/)); // +表示匹配多个字符
//使用RegExp创建一个正则对象
var pat = new RegExp("[0-9]+");
console.log(str.match(pat));
console.log(pat.exec(str)); //使用正则对象的pat方法进行匹配
//以上三个返回结果一致,即["45678", index: 4, input: "wert45678yuiyertw", groups: undefined]
console.log("=======================");
//正则搜索
console.log(str.search(/[0-9]+/)); //返回首次匹配位置，没有则返回-1
console.log(str.search(pat)); //返回首次匹配位置，没有则返回-1
console.log(pat.test(str)); //true 返回是否匹配
//匹配多个
console.log("=======================");
var str = "wert45678yu456iye678rtw";
console.log(str.match(/[0-9]+/)); //默认只匹配一次
console.log(str.match(/[0-9]+/g)); // (3) ["45678", "456", "678"] 使用g修饰符，匹配所有信息。
</script>
</html>
修饰符
方括号
方括号内表示的都是或的意思，^表示取反，非。小括号内表示匹配多个
量词
元字符
大写字母表示小写字母意义的取反
正则表达式语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript的正则表达式</title>
</head>
<body>
<h1>JavaScript的正则表达式</h1>
</body>
<script>
//正则的使用
var str = "wert455rbr5253geg6gerg78gee89yuitrew";
//使用正则匹配字符串str中的数字
console.log(str.match(/[0-9]/g));//匹配任意一位数字
console.log(str.match(/[0-9][0-9]/g));//匹配任意2位数字
console.log(str.match(/[0-9]{3}/g));//[0-9]{n}:匹配任意n位数字
console.log(str.match(/\d{2,3}/g));//[0-9]{2,3}:匹配任意2位或3位数字 \d:使用元字符来匹配数字
// \d{1,} [0-9]{1,} \d+ [0-9]+ 都表示至少一位数字
//精确匹配
var pat = new RegExp("[0-9]+");
console.log(pat.test("dehfeuf2567fefef")); //true 匹配字符串中是否含有数字
var pat = new RegExp("^[0-9]+");
console.log(pat.test("dehfeuf2567fefef")); //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("er2567thj")); //false 匹配字符串中是否是纯数字
console.log(pat.test("wer2567")); //false 匹配字符串中是否是纯数字
console.log(pat.test("2567")); //true 匹配字符串中是否是纯数字
var pat2 = new RegExp("^[0-9]{6}$"); //精确匹配任意6位数字
</script>
</html>
正则表达式替换与分割
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript的正则表达式</title>
</head>
<body>
<h1>JavaScript的正则表达式分割与替换</h1>
</body>
<script>
var str = "23:45:67:89:76";
console.log(str.split(":")); //使用字符串拆分
var str = "23:45;67!89#76";
console.log(str.split(/^[0-9]/)); //使用正则表达式进行分割，即利用数字进行分割
var str = "23:45;67!89#76";
//将上面字符串的分隔符统一替换成逗号
console.log(str.replace(/[^0-9]/g,",")); //23,45,67,89,76
str = "<b>aaa</b><b>bbb</b><b>ccc</b>"
//将上面字符串中的<b></b>标签替换成<i></i>
console.log(str.replace(/<b>(.*?)<\/b>/g,"<i>$1</i>"));
//.代表任意字符，*代表任意数量 .*是一种贪婪匹配（最大） .*？是拒绝贪婪匹配(最小匹配) $1表示重复正则中第一个小括号里面的内容
console.log("=========================");
str = "04/28/2020"; //西方日期格式，请使用正则替换成中国的[年月日]格式
console.log(str.replace(/(\d{2})\/(\d{2})\/(\d{4})/,"$3-$1-$2"));
//其中$1,$2,$3 表示重复正则中第一第二第三个小括号中内容
</script>
</html>
正则表达式表单验证
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript的正则表达式</title>
</head>
<body>
<h1>JavaScript的正则表达式在表单验证中的实例</h1>
<form action="gammar.html" name="myform" οnsubmit="return doSubmit()" method="post">
帐号：<input type="text" name="uname" οnblur="checkUname()"/><br/><br/>
邮箱：<input type="text" name="email" οnblur="checkEmail()"/><br/><br/>
<input type="submit" value="提交">
</form>
</body>
<script>
//验证帐号函数
function checkUname() {
//获取账号信息
var uname = document.myform.uname.value; //获取输入框的信息
//执行验证
if (uname.match(/^\w{8,16}$/)==null){ //n$:以n为结尾的字符串
alert("请输入8~16位的帐号信息！")
return false;
}
return true;
}
//验证邮箱函数
function checkEmail() {
//获取帐号信息
var email = document.myform.email.value;
//执行验证
if(email.match(/^\[email protected]\w+(\.\w+){1,2}$/) == null){
alert("请输入正确的Email信息！");
return false;
}
return true;
}
//表单提交
function doSubmit() {
return checkUname()&&checkEmail();
}
</script>
</html>
表单验证作业示例
尚未未完成的功能：文字，按钮的间隔优化,密码的屏蔽，下拉框的是否有输入的判断。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>个人信息登记表</title>
<style>
form{
width: 700px;
margin: 50px auto;
padding: 20px;
}
div{
padding: 5px 0;
}
label{
display: inline-block;
width: 100px;
margin-right: 40px;
text-align: right;
}
span{
color: #ddd;
font-size:12px
}
.inputText{
display: inline-block;
width: 260px;
margin-right: 20px;
}
</style>
</head>
<body>
<h1>个人信息登记表</h1>
<form name="myform" method="post" οnsubmit="return dosubmit()" >
<div>
<label>登录帐号:</label>
<input type="text" class="inputText" name="uaccount" οnblur="checkAccount()"/>
<span id="accSpan">要求6-18位有效字符(字母、数字、下划线)</span>
<br><br>
</div>
<div>
<label>登录密码：</label>
<input type="text" class="inputText" name="upassword" οnblur="checkPassword()"/>
<span id="pwSpan">6-18位任意字符</span>
<br><br>
</div>
<div>
<label>重复密码：</label>
<input type="text" class="inputText" name="rePassword" οnblur="repeatPassword()"/>
<span id="repwSpan">重复密码与登录密码一致</span>
<br><br>
</div>
<div>
<label> 性 别：</label>
<input type="radio" name="sex" value="男"/>男
<input type="radio" name="sex" value="女"/>女
<span id="sex">必须选择一个</span>
<br><br>
</div>
<div>
<label>年 龄：</label>
<input type="text" class="inputText" name="age" οnblur="checkAge()"/>
<span id="ageSpan">大于0的任意两位整数</span>
<br><br>
</div>
<div>
<label>手机号码：</label>
<input type="text" class="inputText" name="cellPhone" οnblur="checkedPhone()"/>
<span id="cellphoneSpan">由1开头的11位整数</span>
<br><br>
</div>
<div>
<label>邮 箱：</label>
<input type="text" class="inputText" name="email" οnblur="checkEmail()"/>
<span id="emailSpan">有效的Email地址</span>
<br><br>
</div>
<div>
<label>学 历：</label>
<select>
<option value="0">请选择</option>
<option value="1">大专</option>
<option value="2">本科</option>
<option value="3">硕士</option>
<option value="4">博士</option>
</select>
<span id="education">必须选择一个学历选项</span>
<br><br>
</div>
<span> <input type="submit" value="提交"> <button type="reset" class="button">重置</button></span>
</form>
</body>
<script>
//帐号验证函数
//提示框style样式设置函数
function spanColor(colors) {
document.getElementById(colors).style.color="red";
}
function checkAccount() {
red = spanColor('accSpan');
//获取信息
var account = document.myform.uaccount.value;
var re = /^[0-9A-Za-z_]{6,18}$/;
if(account ==""){
document.getElementById('accSpan').innerText="请输入帐号";
red;
return false;
}
else if(account.length < 6 ||account.length > 18){
console.log(account);
document.getElementById('accSpan').innerText="格式错误,长度应为6-18个字符";
red;
return false;
}
else if (!re.test(account)){
document.getElementById("accSpan").innerText="格式错误,只能包含数字,英文字母和下划线";
red;
return false;
}
else {
document.getElementById('accSpan').innerText ="";
return true;
}
}
//密码验证信息
function checkPassword() {
var password = document.myform.upassword.value;
var re = /^.{6,18}$/;
red = spanColor('pwSpan');
if(password ==""){
document.getElementById('pwSpan').innerText="请输入密码";
red;
return false;
}
else if (password.length < 6 ||password.length > 18){
console.log(password);
document.getElementById('pwSpan').innerText="格式错误,长度应为6-18个字符";
red;
return false;
}
else if (re.test(password)){
document.getElementById('pwSpan').innerText ="";
return true;
}
}
//核对重复密码
function repeatPassword() {
red = spanColor('repwSpan');
var password = document.myform.upassword.value;
var repassword = document.myform.rePassword.value;
if(repassword==""){
document.getElementById('repwSpan').innerText="请输入重复密码";
red ;
return false;
}
else if(password != repassword){
document.getElementById('repwSpan').innerText="两次密码输入不一致";
red ;
return false;
}
else {
document.getElementById('repwSpan').innerText ="";
return true;
}
}
//核对年龄
function checkAge() {
red = spanColor('ageSpan');
var age = document.myform.age.value;
re = /^\d{1,3}$/;
if(age==""){
document.getElementById('ageSpan').innerText="请输入您的年龄信息";
red ;
return false;
}
else if(age<0||age>120){
document.getElementById('ageSpan').innerText="请输入正确的年龄";
red ;
return false;
}
else if (!re.test(age)){
document.getElementById('ageSpan').innerText="请输入数字";
red ;
return false;
}
else {
document.getElementById('ageSpan').innerText ="";
return true;
}
}
//核对手机号
function checkedPhone() {
red = spanColor('cellphoneSpan');
var phoneNumber = document.myform.cellPhone.value;
re = /^1\d{10}$/
if(phoneNumber==""){
document.getElementById('cellphoneSpan').innerText="请输入您的手机号码";
red;
return false;
}
else if(!re.test(phoneNumber)){
document.getElementById('cellphoneSpan').innerText="请输入正确的手机号";
red;
return false;
}
else{
document.getElementById('cellphoneSpan').innerText="";
return true;
}
}
//核对邮箱
function checkEmail() {
red = spanColor("emailSpan");
var email = document.myform.email.value;
re = /^\[email protected]\w+(\.\w+){1,2}$/;
if(email==""){
document.getElementById('emailSpan').innerText="请输入您的邮箱地址";
red;
return false;
}
else if(!re.test(email)){
document.getElementById('emailSpan').innerText="请输入正确的邮箱地址";
red;
return false;
}
else{
document.getElementById('emailSpan').innerText="";
return true;
}
}
//表单提交
function dosubmit() {
flag = checkAccount()&&checkPassword()&&repeatPassword()&&checkAge()&&checkedPhone()&&checkEmail();
if (flag){
alert("表单提交成功！")
return true;
}
alert("请确认输入的信息是否有误");
return false;
}
/*//表单重置
function doReset() {
document.getElementById("myform").reset();
}*/
</script>
</html>