讲给后台程序员看的前端系列教程(39)——正则表达式
C语言自学完备手册(33篇)
Android多分辨率适配框架
HTML5前端开发实战系列教程
MySQL数据库实操教程(35篇图文版)
推翻自己和过往——自定义View系列教程(10篇)
走出思维困境，踏上精进之路——Android开发进阶精华录
讲给Android程序员看的前端系列教程(40集免费视频教程+源码)
版权声明
- 本文原创作者：谷哥的小弟
- 作者博客地址：http://blog.csdn.net/lfdfhl
正则表达式概述
正则表达式(Regular Expression,简称RegExp)是一种描述字符串结构的语法规则，是一个特定的文本模式，用于验证目标字符串是否匹配某种特征，进而实现文本查找、替换、截取内容等操作。正则表达式的应用范围非常之广泛，最初是由Unix普及开来的，后来在广泛运用于Scala 、PHP、C# 、Java、C++ 、Objective-c、Perl 、Swift、VBScript 、Javascript、Ruby以及Python等等。
RegExp对象
在JavaScript中我们经常使用RegExp对象实现正则表达式相关功能。在此，介绍RegExp两种常见的创建方式。
创建RegExp对象第一种方式
语法如下：
var regExpObj=/pattern/modifiers;
创建RegExp对象第二种方式
语法如下：
var regExpObj = new RegExp(pattern,modifiers);
RegExp语法
修饰符
修饰符用于执行区分大小写和全局匹配
- i 即ignore case表示执行对大小写不敏感的匹配。
- g 即global表示执行全局匹配(即查找所有匹配而非在找到第一个匹配后停止）
- m 即multiple lines执行多行匹配
方括号
方括号用于查找某个范围内的字符。
- [abc] 查找方括号之间的任何字符。
- [^abc] 查找任何不在方括号之间的字符。
- [0-9] 查找任何从 0 至 9 的数字。
- [a-z] 查找任何从小写 a 到小写 z 的字符。
- [A-Z] 查找任何从大写 A 到大写 Z 的字符。
- [A-z] 查找任何从大写 A 到小写 z 的字符。
- [adgk] 查找给定集合内的任何字符。
- [^adgk] 查找给定集合外的任何字符。
- (red|blue|green) 查找任何指定的选项。
元字符
元字符（Metacharacter）是拥有特殊含义的字符：
- . 单个字符
- \w 查找单词字符。
- \W 查找非单词字符。
- \d 查找数字。
- \D 查找非数字字符。
- \s 查找空白字符。
- \S 查找非空白字符。
- \b 匹配单词边界。
- \B 匹配非单词边界。
- \0 查找 NUL 字符。
- \n 查找换行符。
- \f 查找换页符。
- \r 查找回车符。
- \t 查找制表符。
- \v 查找垂直制表符。
- \xxx 查找以八进制数 xxx 规定的字符。
- \xdd 查找以十六进制数 dd 规定的字符。
- \uxxxx 查找以十六进制数 xxxx 规定的 Unicode 字符。
量词
- n+ 匹配任何包含至少一个 n 的字符串。
- n* 匹配任何包含零个或多个 n 的字符串。
- n? 匹配任何包含零个或一个 n 的字符串。
- n{X} 匹配包含 X 个 n 的序列的字符串。
- n{X,Y} 匹配包含 X 至 Y 个 n 的序列的字符串。
- n{X,} 匹配包含至少 X 个 n 的序列的字符串。
- n$ 匹配任何结尾为 n 的字符串。
- ^n 匹配任何开头为 n 的字符串。
- ?=n 匹配任何其后紧接指定字符串 n 的字符串。
- ?!n 匹配任何其后没有紧接指定字符串 n 的字符串。
易错知识点
在正则表达式中，关于^的使用容易搞混淆，请注意区分：
第一种情况
^出现在 [ ]中表示否定和非的意思。例如：
//查找任何不在方括号之间的字符
[^abc]
第二种情况
^与$联合使用用于限定开头和结尾，例如：
//由26个英文字母组成的字符串
"^[A-Za-z]+$"
JavaScript常用正则表达式
//由26个英文字母组成的字符串
"^[A-Za-z]+$"
//由26个英文字母的大写组成的字符串
"^[A-Z]+$"
//由26个英文字母的小写组成的字符串
"^[a-z]+$"
//由数字和26个英文字母组成的字符串
"^[A-Za-z0-9]+$"
//由数字、26个英文字母或者下划线组成的字符串
"^\\w+$"
//email地址
"^[\\w-]+(\\.[\\w-]+)*@[\\w-]+(\\.[\\w-]+)+$"
//非负整数（正整数 + 0）
"^\\d+$"
//正整数
"^[0-9]*[1-9][0-9]*$"
//非正整数（负整数 + 0）
"^((-\\d+)|(0+))$"
//负整数
"^-[0-9]*[1-9][0-9]*$"
//整数
"^-?\\d+$"
//非负浮点数（正浮点数 + 0）
"^\\d+(\\.\\d+)?$"
//正浮点数
"^(([0-9]+\\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\\.[0-9]+)|([0-9]*[1-9][0-9]*))$"
//非正浮点数（负浮点数 + 0）
"^((-\\d+(\\.\\d+)?)|(0+(\\.0+)?))$"
//负浮点数
"^(-(([0-9]+\\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\\.[0-9]+)|([0-9]*[1-9][0-9]*)))$"
//浮点数
"^(-?\\d+)(\\.\\d+)?$"
//url
"^[a-zA-z]+://(\\w+(-\\w+)*)(\\.(\\w+(-\\w+)*))*(\\?\\S*)?$"
RegExp对象常用方法
test( )方法
test( ) 方法用于检测字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false。
示例如下：
<html>
<head>
<meta charset="utf-8">
<title>RegExptitle>
head>
<body>
<script type="text/javascript">
var regExpObj = /hello/;
var result=regExpObj.test("hi,hello JavaScript");
//result=true
document.write("result="+result);
script>
body>
html>
exec( ) 方法
exec( )方法用于在目标字符串中搜索匹配。该方法返回一个数组存放匹配的结果。如果未找到相关匹配，则返回值为 null。
示例如下：
<html>
<head>
<meta charset="utf-8">
<title>RegExptitle>
head>
<body>
<script type="text/javascript">
var string="ABC9527abc9528"
var regExpObj = /abc/i;
var result=regExpObj.exec(string);
console.log(result);
script>
body>
html>
结果如下：
从exec()方法的返回结果中可以看出：该数组保存的第1个元素ABC表示匹配到的字符串； 第2个元素index表示匹配到的字符位于目标字符串中的索引值；第3个参数 input表示目标字符串即ABC9527abc9528。
compile( ) 方法
compile() 方法用于改变和编译正则表达式。
语法如下：
regExpObj.compile(regexp,modifier)
参数含义：
- regexp：正则表达式。
- modifier：该参数为可选项表示修饰符。常用修饰符：“g” 用于全局匹配，“i” 用于区分大小写，“gi” 用于全局区分大小写的匹配。
示例如下：
<html>
<head>
<meta charset="utf-8">
<title>RegExptitle>
head>
<body>
<script type="text/javascript">
var string="We love JavaScript";
var regExp = new RegExp("e");
//true
document.write(regExp.test(string)+"
");
regExp.compile("z");
//false
document.write(regExp.test(string)+"
");
script>
body>
html>
String 对象支持正则表达式的方法
match( ) 方法
match( ) 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。在使用match( ) 方法时：如果regexp没有标志 g，那么 match( ) 方法只能在字符串对象中执行一次匹配；如果regexp有标志 g，那么 match( ) 方法可执行多次匹配。
示例如下：
<html>
<head>
<meta charset="utf-8">
<title>RegExptitle>
head>
<body>
<script type="text/javascript">
var string = "hello world,hello JavaScript";
var regExpObj=/hello/;
var result=string.match(regExpObj);
//result=hello
document.write("result="+result);
script>
body>
html>
示例如下：
<html>
<head>
<meta charset="utf-8">
<title>RegExptitle>
head>
<body>
<script type="text/javascript">
var string = "hello world,hello JavaScript";
var regExpObj=/hello/g;
var result=string.match(regExpObj);
for(var i=0;i<result.length;i++){
document.write("result["+i+"]="+result[i]+"
");
}
script>
body>
html>
结果如下：
示例如下：
<html>
<head>
<meta charset="utf-8">
<title>RegExptitle>
head>
<body>
<script type="text/javascript">
var string = "4 plus 5 equal 9";
var regExpObj=/\d+/g;
var result=string.match(regExpObj);
for(var i=0;i<result.length;i++){
document.write("result["+i+"]="+result[i]+"
");
}
script>
body>
html>
结果如下：
search( ) 方法
search( ) 方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串。找到时返回子串对应的索引值，否则返回 -1。
示例如下：
<html>
<head>
<meta charset="utf-8">
<title>RegExptitle>
head>
<body>
<p id="tipsdiv">查找子串的位置p>
<button onclick="buttonClick()">Click Mebutton>
<script>
function buttonClick() {
var string = "hello world";
var index = string.search("ell");
document.getElementById("tipsdiv").innerHTML = index;
}
script>
body>
html>
replace( ) 方法
replace( ) 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
示例如下：
<html>
<head>
<meta charset="utf-8">
<title>RegExptitle>
head>
<body>
<script>
var string = "Mr Blue has a green house and a green car";
var regExp=/green/g;
var result = string.replace(regExp, "white");
document.write(result);
script>
body>
html>
split( ) 方法
split( ) 方法用于把字符串分割成字符串数组。
示例如下：
<html>
<head>
<meta charset="utf-8">
<title>RegExptitle>
head>
<body>
<script>
var string = "Where are you?";
var resultArray = string.split(" ");
for (var i = 0; i < resultArray.length; i++) {
document.write(resultArray[i] + "
");
}
script>
body>
html>
正则表达式综合练习
综合练习1
示例如下：
<html>
<head>
<meta charset="UTF-8">
<title>利用正则表达式限定输入内容title>
<style type="text/css">
input[type=text] {
width: 40px;
border-color: #bbb;
height: 25px;
font-size: 14px;
border-radius: 2px;
outline: 0;
border: #ccc 1px solid;
padding: 0 10px;
-webkit-transition: box-shadow .5s;
margin-bottom: 15px;
}
input[type=text]:hover,
input[type=text]:focus,
input[type=submit]:hover {
border: 1px solid #56b4ef;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, .05), 0 0 8px rgba(82, 168, 236, .6);
-webkit-transition: box-shadow .5s;
}
input::-webkit-input-placeholder {
color: #999;
-webkit-transition: color .5s;
}
input:focus::-webkit-input-placeholder,
input:hover::-webkit-input-placeholder {
color: #c2c2c2;
-webkit-transition: color .5s;
}
input[type=submit] {
height: 30px;
width: 80px;
background: #4393C9;
border: 1px solid #fff;
color: #fff;
font: 14px bolder;
}
style>
head>
<body>
<form id="form">
年 份 <input type="text" name="year">
月 份 <input type="text" name="month">
<input type="submit" value="提交">
form>
<div id="tipsDiv">div>
<script>
var form = document.getElementById('form');
var tipsDiv = document.getElementById('tipsDiv');
var inputs = document.getElementsByTagName('input');
//表单提交事件
form.onsubmit = function() {
return checkYear(inputs.year) && checkMonth(inputs.month);
};
//输入框获得焦点事件
inputs.year.onfocus = function() {
this.style.borderColor = '';
};
//输入框获得焦点事件
inputs.month.onfocus = function() {
this.style.borderColor = '';
};
//输入框失去焦点事件
inputs.year.onblur = function() {
this.value = this.value.trim();
checkYear(this);
};
//输入框失去焦点事件
inputs.month.onblur = function() {
this.value = this.value.trim();
checkMonth(this);
};
//校验年份
function checkYear(obj) {
var yearRegExp = /^\d{4}$/;
if (!obj.value.match(yearRegExp)) {
obj.style.borderColor = 'red';
tipsDiv.innerHTML = '输入错误,请您重新输入；年份应为4位整数';
return false;
}
tipsDiv.innerHTML = '';
return true;
}
//校验月份
function checkMonth(obj) {
var monthRegExp = /^((0?[1-9])|(1[012]))$/;
if (!obj.value.match(monthRegExp)) {
obj.style.borderColor = 'red';
tipsDiv.innerHTML = '输入错误,请您重新输入；月份应为1-12';
return false;
}
tipsDiv.innerHTML = '';
return true;
}
script>
body>
html>
效果如下：
综合练习2
示例如下：
<html>
<head>
<meta charset="UTF-8">
<title>利用正则表达式实现文本替换title>
<style type="text/css">
div {
float: left;
}
input {
margin: 0 20px;
}
style>
head>
<body>
<div>过滤前内容:<br>
<textarea id="before" rows="10" cols="40">textarea>
<input id="filter" type="button" value="过滤">
div>
<div>过滤后内容:<br>
<textarea id="after" rows="10" cols="40">textarea>
div>
<script>
document.getElementById('filter').onclick = function() {
// 将bad替换为***
var regExp = /bad/gi;
var content = document.getElementById('before').value;
var result = content.replace(regExp, '***');
document.getElementById('after').innerHTML = result;
};
script>
body>
html>
效果如下：
综合练习3
示例如下：
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>利用正则表达式进行表单验证title>
<script type="text/javascript">
function validateInfo() {
var emailRegExp = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
var telephoneNumberRegExp = /^[1][3,4,5,7,8][0-9]{9}$/;
var passwordRegExp = /^[a-zA-Z0-9]{6,18}$/;
var email = document.getElementById("email").value;
var telephoneNumber = document.getElementById("telephoneNumber").value;
var password = document.getElementById("password").value;
if(emailRegExp.test(email)){
alert("邮箱地址正确");
}else{
alert("邮箱地址错误");
return false;
}
if(telephoneNumberRegExp.test(telephoneNumber)){
alert("电话号码正确");
}else{
alert("电话号码错误");
return false;
}
if(passwordRegExp.test(password)){
alert("用户密码正确");
}else{
alert("用户密码错误");
return false;
}
return true;
}
script>
head>
<body>
<form>
邮箱地址：<input id="email" type="text" placeholder="请输入邮箱">
<br />
<br />
电话号码：<input id="telephoneNumber" type="text" placeholder="13,14,15,17,18开头的手机号">
<br />
<br />
用户密码：<input id="password" type="password" placeholder="由字母和数字组成(6-18位)">
<br />
<br />
<input type="submit" value="提 交" id="btn" onclick="return validateInfo()">
form>
body>
html>
效果如下：
综合练习4
示例如下：
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>利用正则表达式进行表单验证title>
<script type="text/javascript">
function checkEmail(){
var emailRegExp = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
var email = document.getElementById("email").value;
if(emailRegExp.test(email)){
alert("邮箱地址正确");
}else{
alert("邮箱地址错误");
}
}
function checkTelephoneNumber(){
var telephoneNumberRegExp = /^[1][3,4,5,7,8][0-9]{9}$/;
var telephoneNumber = document.getElementById("telephoneNumber").value;
if(telephoneNumberRegExp.test(telephoneNumber)){
alert("电话号码正确");
}else{
alert("电话号码错误");
}
}
function checkPassword() {
var passwordRegExp = /^[a-zA-Z0-9]{6,18}$/;
var password = document.getElementById("password").value;
if(passwordRegExp.test(password)){
alert("用户密码正确");
}else{
alert("用户密码错误");
}
}
script>
head>
<body>
<form>
邮箱地址：<input id="email" type="text" placeholder="请输入邮箱" onchange="checkEmail()">
<br />
<br />
电话号码：<input id="telephoneNumber" type="text" placeholder="13,14,15,17,18开头的手机号" onchange="checkTelephoneNumber()">
<br />
<br />
用户密码：<input id="password" type="password" placeholder="由字母和数字组成(6-18位)" onchange="checkPassword()">
<br />
<br />
<input type="submit" value="提 交" id="btn">
form>
body>
html>
效果如下：
综合练习5
示例如下：
html页面
<html>
<head>
<meta charset="UTF-8">
<title>利用正则表达式实现表单验证title>
<link rel="stylesheet" href="css/register.css">
head>
<body>
<div class="box">
<div class="box-head">注 册 页 面div>
<div class="box-body">
<form>
<table>
<tr>
<th>用户名称：th>
<td><input type="text" name="username" placeholder="长度4~12，英文大小写字母">td>
<td><div>div>td>
tr>
<tr>
<th>密 码：th>
<td><input type="password" name="password" placeholder="长度6~20，大小写字母、数字或下划线">td>
<td><div>div>td>
tr>
<tr>
<th>确认密码：th>
<td><input type="password" name="repassword" placeholder="请再次输入密码进行确认">td>
<td><div>div>td>
tr>
<tr>
<th>手机号码：th>
<td><input type="text" name="telephoneNumber" placeholder="以13、14、15、17、18开头的11位手机号">td>
<td><div>div>td>
tr>
<tr>
<th>电子邮箱：th>
<td><input type="text" name="email" placeholder="用户名@域名(域名后缀至少2个字符)">td>
<td><div>div>td>
tr>
<tr>
<td colspan="3"><input type="submit" value="注册">td>
tr>
table>
form>
div>
div>
<script src="js/register.js">script>
body>
html>
css代码：
body{margin-top:20px;}
.box{font-size:13px;margin:0 auto; width: 80%;}
.box-head{padding:15px 20px;font-size:14px; text-align: center; font-size:24px; font:bolder;}
.box-body{padding:10px 20px;}
.box-body th{font-weight:normal;vertical-align:top;padding-top:12px;}
.box-body tr:last-child{ text-align: center;}
.box-body input{vertical-align:middle;font-family:Tahoma,simsun;font-size:12px;}
.box-body input[type=text],.box-body input[type=password]{border-color: #bbb;height: 38px;font-size: 14px;border-radius: 2px;outline: 0;border: #ccc 1px solid;padding: 0 10px; width: 350px;-webkit-transition: box-shadow .5s;margin-bottom: 15px;}
.box-body input[type=text]:hover, .box-body input[type=text]:focus, .box-body input[type=password]:hover, .box-body input[type=password]:focus {border: 1px solid #56b4ef; box-shadow: inset 0 1px 3px rgba(0,0,0,.05),0 0 8px rgba(82,168,236,.6); -webkit-transition: box-shadow .5s;}
.box-body input::-webkit-input-placeholder {color: #999; -webkit-transition: color .5s;}
.box-body input:focus::-webkit-input-placeholder, input:hover::-webkit-input-placeholder {color: #c2c2c2; -webkit-transition: color .5s;}
.box-body input[type=submit]{padding:4px 15px;cursor:pointer; width:120px; height:40px; background: #4393C9; border:1px solid #fff; color: #fff;font:16px bolder;}
.box-body .error{border:1px solid #FF3300; background: #FFF2E5; font-size:10px; height: 30px; line-height: 30px;margin-bottom:10px; padding:0 10px;}
.box-body .success{border:1px solid #01BE00; background: #E6FEE4; font-size:10px; height: 30px; line-height: 30px;margin-bottom:10px; padding:0 10px;}
JavaScript代码：
// 获取所有input输入框
var inputs = document.getElementsByTagName('input');
// 为每个input框添加失去焦点事件
for (var i = 0; i < inputs.length - 1; i++) {
inputs[i].onblur = inputBlur;
}
//失去焦点事件监听
function inputBlur() {
// 获取输入框的name值
var name = this.name;
// 获取输入框的value值
var value = this.value;
// 获取输入框中的提示信息
var tips = this.placeholder;
// 获取提示信息显示的div元素对象
var tips_obj = this.parentNode.nextElementSibling.firstChild;
// 去掉两端的空白字符
value = value.trim();
// 若文本框内容为空，给出提示信息
if (!value) {
error(tips_obj, '输入框不能为空');
return false;
}
// 获取正则匹配规则和提示信息
var reg_msg = getRegMsg(name, tips);
// 校验是否与正则匹配
if (reg_msg['reg'].test(value)) {
// 匹配成功，显示成功的提示信息
success(tips_obj, reg_msg['msg']['success']);
} else {
// 匹配失败，显示失败的提示信息
error(tips_obj, reg_msg['msg']['error']);
}
}
// 根据input的name值，设置正则规则及提示信息
function getRegMsg(name, tips) {
var reg = '';
var msg = '';
switch (name) {
case 'username':
reg = /^[a-zA-Z]{4,12}$/;
msg = {
'success': '用户名输入正确',
'error': tips
};
break;
case 'password':
reg = /^\w{6,20}$/;
msg = {
'success': '密码输入正确',
'error': tips
};
break;
case 'repassword':
var con = document.getElementsByTagName('input')[1].value;
reg = RegExp("^" + con + "$");
msg = {
'success': '两次密码输入正确',
'error': '两次输入的密码不一致'
};
break;
case 'telephoneNumber':
reg = /^1[34578]\d{9}$/;
msg = {
'success': '手机号码输入正确',
'error': tips
};
break;
case 'email':
reg = /^(\w+(\_|\-|\.)*)+@(\w+(\-)?)+(\.\w{2,})+$/;
msg = {
'success': '邮箱输入正确',
'error': tips
};
break;
}
return {
'reg': reg,
'msg': msg
};
}
// 成功
function success(obj, msg) {
obj.className = 'success';
obj.innerHTML = msg;
}
// 失败
function error(obj, msg) {
obj.className = 'error';
obj.innerHTML = msg + '，请重新输入';
}
效果如下：
