JavaScript第十一章 DOM编程之正则表达式

最新推荐文章于 2024-10-05 18:07:19 发布

原创最新推荐文章于 2024-10-05 18:07:19 发布 · 253 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#正则表达式 #js #javascript

JavaScript学习路线专栏收录该内容

22 篇文章

订阅专栏

这篇博客深入探讨JavaScript中的DOM编程，重点关注正则表达式。文章介绍了常见的正则表达式符号，展示了创建正则表达式的方法，包括直接量形式和使用RegExp构造函数，并详细解释了正则表达式的标志如g、i和m。此外，还讲解了正则表达式方法test()的使用，通过测试用例解释其如何判断字符串是否符合特定的正则模式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JavaScript自我学习路线

DOM编程之正则表达式

DOM编程之正则表达式

正则表达式即Regular Expression，正则表达式主要用在字符串格式匹配方面

一、常见的正则表达式符号

. 匹配除换行符以外的任意字符
\w 匹配字母或数字或下划线或汉字
\s 匹配任意的空白符
\d 匹配数字
\b 匹配单词的开始或结束
^ 匹配字符串的开始
$ 匹配字符串的结束
	
* 重复零次或更多次
+ 重复一次或更多次
? 重复零次或一次
{n} 重复n次
{n,} 重复n次或更多次
{n,m} 重复n到m次

\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个字符

三、创建正则表达式

第一种方式

var regExp = /正则表达式/flags;

第二种方式（使用内置支持类RegExp）

var regExp = new RegExp("正则表达式","flags");

关于flags：
g：全局匹配
i：忽略大小写
m：多行搜索（ES规范指定之后才支持m）
如果flags前面是正则表达式，则m必须省略，如果flags前面是字符串，m才可以使用

四、正则表达式方法之test()

语法

正则表达式对象.test(用户填写的字符串);

true：字符串格式匹配成功
false：字符串格式匹配失败

测试用例（邮箱的正则表达式）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>邮箱地址</title>
		<script type="text/javascript">
			window.onload = function(){
				document.getElementById("btn").onclick = function(){
					var email = document.getElementById("email").value;
					var emailRegExp = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
					if(emailRegExp.test(email)){
						// alert("邮箱合法");
						document.getElementById("emailError").innerText = "邮箱地址合法";
					} else{
						// alert("邮箱不合法");
						document.getElementById("emailError").innerText = "邮箱地址不合法";
					}
				}
				// 给文本框绑定focus事件（文本框获得焦点后，不显示之前的正则表达式结果）
				document.getElementById("email").onfocus = function() {
					document.getElementById("emailError").innerText = "";
				}
			}
		</script>
	</head>
	<body>
		<input type="text" id="email" />
		<span id="emailError" style="color: red; font-size: 12px;"></span>
		<br>
		<input type="button" id="btn" value="验证邮箱" />
	</body>
</html>