文章目录
一.概述
正则表达式(regular expression)描述了一种字符串匹配的模式（pattern），可以用来检查一个串是否含有某种子串、将匹配的子串替换或者从某个串中取出符合某个条件的子串等。
二.常见的正则表达式
. 匹配除了换行符以外的所有字符。
\w 匹配字母或数字或下划线或者汉字
\s 匹配任意的空白字符
\d 匹配数字
\b匹配单词的开始或者结束
^ 匹配字符串的开始
$ 匹配字符串的结束
* 重复0次或者更多次
+ 重复一次或者更多次
？ 重复0次或者1次
{n}重复n次
{n,}重复n次或者更多次
{n,m}重复n次到m次
\W 匹配不是字母或数字或下划线或者汉字
\S 匹配不是空白字符
\D 匹配不是数字
\B 匹配不是单词的开始或者结束
{^x} 匹配除了x以外的任意字符
{^aeiou}匹配除了aeiou外的字符
[0-9] 表示0-9之间的数字
[a-z] 表示a-z之间的字母
[A-Za-z0-9] 表示A-Za-z0-9中的任意一个字符
三.创建正则表达式对象
第一种创建方式
var regExp = /正则表达式/flags;
第二种创建方式—使用内置支持类RegExp
var regExp = new RegExp("正则表达式","flags");
flags是修饰符
四.实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
window.onload = function(){
document.getElementById("button1").onclick = function(){
var Elt = document.getElementById("text").value;
var regExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
var ok = regExp.test(Elt);
if(!ok){
document.getElementById("error").innerText = "邮箱地址不合法";
}
else{
document.getElementById("error").innerText = "邮箱地址合法";
}
}
}
</script>
<input type = "text" id = "text"/>
<span style = "color:red ; font-size:12px" id = "error"></span>
<br/>
<input type = "button" id = "button1" value = "emailButton"/>
</body>
</html>
我们可以改进一下，当鼠标在文本框中要输入时，不会出现提示按钮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
window.onload = function(){
document.getElementById("button1").onclick = function(){
var Elt = document.getElementById("text").value;
var regExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
var ok = regExp.test(Elt);
if(!ok){
document.getElementById("error").innerText = "邮箱地址不合法";
}
else{
document.getElementById("error").innerText = "邮箱地址合法";
}
document.getElementById("text").onfocus = function(){
document.getElementById("error").innerText = "";
}
}
}
</script>
<input type = "text" id = "text"/>
<span style = "color:red ; font-size:12px" id = "error"></span>
<br/>
<input type = "button" id = "button1" value = "emailButton"/>
</body>
</html>
五.扩展字符串
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
window.onload = function(){
document.getElementById("button1").onclick = function(){
var textvalue = document.getElementById("text1").value;
var textvalue1 = textvalue.trim();
document.getElementById("text1").onclick = alert("--->" + textvalue1 + "<---");
}
}
</script>
<input type = "text" id = "text1"/>
<input type = "button" value = "button" id = "button1"/>
</body>
</html>
虽然现在的浏览器一般都可以兼容trim（）函数，但是一些版本较低的浏览器没有trim()函数，于是我们想到能不能我们自己写一个这样的函数。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
String.prototype.trim = function(){
return this.replace(/^\s+/,"").replace(/\s+$/,"");
}
window.onload = function(){
document.getElementById("button1").onclick = function(){
var textValue = document.getElementById("text1").value;
var textValue1 = textValue.trim();
document.getElementById("text1").onclick = alert("--->" + textValue1 + "<---");
}
}
</script>
<input type = "text" id = "text1"/>
<input type = "button" value = "button" id = "button1"/>
</body>
</html>
我们发现重写后，与原函数有同样的效果。