文章目录
6.3 正则表达式
正则表达式(Regular Expression):主要用在字符串格式匹配方面
6.3.1 常用正则表达式符号
符号 | 功能 |
---|---|
. | 匹配除换行符以外的任意字符 |
\w | 匹配字母或数字或下划线或汉字 |
\s | 匹配任意的空白符 |
\d | 匹配数字 |
\b | 匹配单词的开始或结束 |
^ | 匹配字符串的开始 |
$ | 匹配字符串的结束 |
6.3.2 常用限定符符号
符号 | 功能 |
---|---|
* | 重复零次或更多次 |
+ | 重复一次或更多次 |
? | 重复零次或一次 |
{n} | 重复n次 |
{n,} | 重复n次或更多次 |
{n,m} | 重复n到m次 |
6.3.3 常用的反义代码
符号 | 功能 |
---|---|
\W | 匹配任意不是字母,数字,下划线,汉字的字符 |
\S | 匹配任意不是空白符的字符 |
\D | 匹配任意非数字的字符 |
\B | 匹配不是单词开头或结束的位置 |
[^x] | 匹配除了x以外的任意字符 |
[^aeiou] | 匹配除了aeiou这几个字母以外的任意字符 |
- 正则表达式当中的小括号()优先级较高。
- [1-9] 表示1到9的任意1个数字(次数是1次。)
- [A-Za-z0-9] 表示A-Z、a-z、0-9中的任意1个字符
- [A-Za-z0-9-] 表示A-Z、a-z、0-9、- ,以上所有字符中的任意1个字符
- 简单的正则表达式要会写
- QQ号的正则表达式:1[0-9]{4,}$
- email正则:^\w+([-+.]\w+)@\w+([-.]\w+).\w+([-.]\w+)*$
6.3.4 创建表达式对象以及调用方式
创建方式:
- 第一种创建方式:
var regExp = /正则表达式/flags; - 第二种创建方式:使用内置支持类RegExp
var regExp = new RegExp(“正则表达式”,“flags”);
关于flag后面的参数:
- g:全局匹配
- i:忽略大小写
- m:多行搜索(ES规范制定之后才支持m)
- 当前面是正则表达式的时候,m不能用
- 只有前面是普通字符串的时候,m才可以使用
调用方式:
正则表达式对象的test()方法
true / false = 正则表达式对象.test(用户填写的字符串);
- true : 字符串格式匹配成功
- false: 字符串格式匹配失败
6.3.5 验证邮箱格式
1.代码示例验证邮箱是否正确
光标如果回去需要将验证正确与否剔除
<body>
<script type="text/javascript">
window.onload = function(){
// 给按钮绑定click
document.getElementById("btn").onclick = function(){
var email = document.getElementById("email").value;
var emailRegExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
var ok = emailRegExp.test(email);
if(ok){
//合法
document.getElementById("emailError").innerText = "邮箱地址合法";
}else{
// 不合法
document.getElementById("emailError").innerText = "邮箱地址不合法";
}
}
// 给文本框绑定focus
document.getElementById("email").onfocus = function(){
document.getElementById("emailError").innerText = "";
}
}
</script>
<input type="text" id="email" />
<span id="emailError" style="color: red; font-size: 12px;"></span>
<br>
<input type="button" value="验证邮箱" id="btn" />
</body>
输入邮箱验证成功
如果光标回去文本框 需要清除右边那个提示,则需要绑定其他
// 给文本框绑定focus
document.getElementById("email").onfocus = function(){
document.getElementById("emailError").innerText = "";
}
6.3.6扩展字符串trim函数
去除字符串的前后空白trim
<body>
<script type="text/javascript">
window.onload = function(){
document.getElementById("btn").onclick = function(){
// 获取用户名
var username = document.getElementById("username").value;
// 去除前后空白
username = username.trim();
// 测试
alert("--->" + username + "<----");
}
}
</script>
<input type="text" id="username" />
<input type="button" value="获取用户名" id="btn" />
</body>
- 低版本的IE浏览器不支持字符串的trim()函数,
- 解决办法:对String类扩展一个全新的trim()函数,重写覆盖新的tim函数,在trim函数中写正则表达式
String.prototype.trim = function(){
// 去除当前字符串的前后空白
// 在当前的方法中的this代表的就是当前字符串.
//return this.replace(/^\s+/, "").replace(/\s+$/, "");
return this.replace(/^\s+|\s+$/g, "");
}
return this.replace(/^\s+/, "").replace(/\s+$/, "");
这行代码第一个replace是前空格字符串,后一个replace是后空格字符串,
/ 字符串/ ,^是开头,$是结尾,\s是空白字符串,+1个到多个字符串。
prototype可以扩展属性
1-9 ↩︎