1、RegExp对象:描述字符串模式的对象
正则表达式(英语:Regular Expression,在代码中常简写为regex、regexp或RE)用于对字符串模式匹配以及检索替换,是对字符串执行模式匹配的强大工具。
语法:
var patt = new RegExp(pattern,modifiers); 或 var patt = /pattern/modifiers;
pattern(模式)描述了表达式的模式
modiffiers(修饰符)用于指定全局匹配,区分大小写的匹配和多行匹配
说明:对于需要判定某变量的正则表达式,只能用构造函数版。简写版本会把变量的表达式理解成需要判断的字符串。
exp:测试str字符串中,是否包含字母 e
var patt = new RegExp("e"); // 相当于 var patt = /e/;
var str="abcde";
alert(patt.test(str)); //测试str中,是否匹配正则表达式patt,如果匹配 则返回true
2、常用正则表达式语法
2.1 方括号[ ] 用于查找某个范围内的字符
表达式描述[abc]查找方括号之间的任何字符。允许[a-z] [A-Z]这种简写[0-9]查找任何从0-9的任何数字exp:var patt = new RegExp("[abc]"); // 相当于 var patt = /[abc]/;
说明:只要包含,a、b、c中的其中之一,就返回true
2.2 元字符 拥有特殊含义的字符
元字符描述\w (最常用的元字符)用于查找单词字符。单词字符包括字母(a-z、A-Z)、数字(0-9),以及下划线 包含 _字符\W (与\w相反)用于查找非单词字符
exp: var patt = /\w/; //表示要求字符串是否包含单词字符,即字母,数字,下划线
2.3量词
量词描述n+匹配任何包含至少一个 n 的字符串。n*匹配任何包含零个 或 多个 n 的字符串。☆包含指最小条件满足,就停止检查n?匹配任何包含零个 或 一个 n 的字符串。n{x}匹配任何包含连续x个n的字符串。(但由于包含,x个以上都返回true,和下面的看似没区别)n{x,}匹配任何包含至少x个n的字符串n{x,y}匹配任何包含 至少x个 之多y个 n 的字符串
n$匹配任何结尾n的字符串 和^n搭配就可以实现全匹配,不停止检查^n匹配任何以a开头的字符串 和n$搭配就可以实现全匹配,不停止检查
综合:^n$字符串从头到尾必须完全匹配,不会停止检查
exp:var patt = /a+/; //表示要求,字符串中是否包含至少一个a
var patt =/a*/; //(12344a3) 1个a 但会返回true,因为第一个数字之前,0个a,就满足0个a,就停止检查了
var patt =/a?/; //(123aaa3)3个a了,但会返回true,因为还是“包含” 满足0个a和1个a了,就停止检查
var patt =/a{3,5}/;
说明:(12aaaaaaa23)超过5个a了,但会返回true,还是因为“包含”,满足最小条件(至少)就不检查后面了,那最多什么时候有意义呢?
var patt =/a$/; //表示字符串必须以a结尾
var patt = /^a/;//表示字符串必须以a开头
var patt =/^a{3,5}$/; //表示必须完全匹配至少3个 之多5个 a 的字符串。此时(12aaaaaaa23)返回false
需求:当用户点击了校验按钮,要获取输入框中的内容,然后验证其是否合法。验证规则:必须由字母,数字,下划线组成,并且长度是5到12位 正则表达式 /^\w{5,12}$/
<script type="text/javascript">
function onclickFun(){
var usernameObj=document.getElementById("username"); //获取标签对象
var usernameText=usernameObj.value; //获取标签的内容,即输入内容
var patt=/^\w{5,12}$/; //定义验证规则
var usernameSpanObj=document.getElementById("usernameSpan"); //获取span标签
alert("usernameSpanObj.innerHTML"); //显示span标签的内容,innerHTML表示起始标签和结束标签里的内容
/* 注意:innerHTML允许直接赋值,即可以usernameSpanObj.innerHTML="xxxxx" xxx也可以是html标签内容*/
if(patt.test(usernameText)){ //用正则表达式测试用户输入的字符串,test()方法,匹配则返回true
usernameSpanObj.innerHTML="用户输入合法";
}else {
usernameSpanObj.innerHTML="用户输入不合法";
}
</script>
</head>
<body>
用户名:<input type="text" id="username" value="雄风"/>
<span id="usernameSpan" style="color:red;"></span>