JavaScript正则表达式学习打卡

最新推荐文章于 2024-07-15 14:11:16 发布

gegejiawei

最新推荐文章于 2024-07-15 14:11:16 发布

阅读量173

点赞数

分类专栏： Web组件化结构开发文章标签： javascript

本文链接：https://blog.csdn.net/gegejiawei/article/details/106623869

版权

Web组件化结构开发专栏收录该内容

16 篇文章 0 订阅

订阅专栏

思维导图

在这里插入图片描述

正则表达式的模式匹配

模式：规则
匹配：作比较 / 查找
正则表达式都是操作字符串的

什么是正则表达式

1、普通字符（例如26个英文字母，数字等）
2、特殊字符（有特殊含义的，例如\ . 等）

创建正则表达式

1、字面量或者直接量来创建
2、通过构造函数创建

正则表达式的模式修饰符

1、i ignoreCase – 表示忽略大小写
2、g global – 表示全局匹配
3、m multiline – 表示对行匹配

项目：正则表达式测试工具

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>项目：正则表达式测试工具</title>
	<style type="text/css">
		#regexp{
			width: 650px;
			margin: 100px auto;
			font-size: 14px;
		}
		.title{
			color: #777;
			font-size: 24px;
			text-align: center;
		}
		.textbox{
			width: 638px;
			height: 150px;
			border: 1px solid #ccc;
			border-radius: 5px;
			padding: 5px;
			resize: none;
		}
		#matchingBtn{
			border-radius: 5px;
			color: white;
			background-color: #1E90FF;
			padding: 2px 5px;
			cursor: pointer;
			margin-left: 10px;
		}
	</style>
</head>
<body>
	<div id="regexp">
		<h1 class="title">正则表达式测试工具</h1>
		<textarea id="userText" class="textbox" placeholder="在此处输入待匹配的文字"></textarea>
		<p>
			正则表达式：
			<input type="text" id="userRegExp" class="textfield" placeholder="在此处输入正则表达式">
			<label><input type="checkbox" name="userModifier" value="i">忽略大小写</label>
			<label><input type="checkbox" name="userModifier" value="g">全局匹配</label>
			<label><input type="checkbox" name="userModifier" value="m">多行匹配</label>
			<input type="button" id="matchingBtn" value="测试匹配">
		</p>
		匹配结果：
		<textarea id="matchingResult" class="textbox" disabled="disabled"></textarea>
	</div>
</body>
<script type="text/javascript">
	// 此处定义全局变量
	var userText = document.getElementById('userText'),
		userRegExp = document.getElementById('userRegExp'),
		userModifier = document.getElementsByName('userModifier'),
		matchingBtn = document.getElementById('matchingBtn'),
		matchingResult = document.getElementById('matchingResult');
	var pattern,
		modifier = '';

	// 设置复选框点击操作
	for(var i=0;i<userModifier.length;i++){
		userModifier[i].onclick = function(){
			// 每次点击之前清空上次的干扰数据
			modifier='';
			for(var j=0;j<userModifier.length;j++){
				if (userModifier[j].checked) {
					// 用字符串拼接把value连起来
					modifier += userModifier[j].value;
				}
			}
		}
	}

	// 设置按钮点击事件
	matchingBtn.onclick = function(){
		// 判断文本框是否为空
		if (!userText.value) {
			alert('请输入待匹配文本！');
			userText.focus();
			return;
		}
		// 判断正则表达式是否为空
		if (!userRegExp.value) {
			alert('请输入正则表达式！');
			userRegExp.focus();
			return;
		}
		// 创建正则表达式
		pattern = new RegExp(userRegExp.value);
		matchingResult.value = pattern.exec(userText.value) || '没有匹配';
	}
</script>
</html>

正则表达式总结

修饰符

在这里插入图片描述

方括号

方括号用于查找某个范围内的字符
在这里插入图片描述

元字符

元字符（Metacharacter）是拥有特殊含义的字符
在这里插入图片描述

量词

在这里插入图片描述

RegExp 对象属性

在这里插入图片描述

RegExp 对象方法

在这里插入图片描述

支持正则表达式的 String 对象的方法

在这里插入图片描述

gegejiawei

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript正则表达式学习打卡

正则表达式的模式匹配模式：规则匹配：作比较 / 查找正则表达式都是操作字符串的什么是正则表达式1、普通字符（例如26个英文字母，数字等）2、特殊字符（有特殊含义的，例如\ . 等）创建正则表达式1、字面量或者直接量来创建2、通过构造函数创建正则表达式的模式修饰符1、i ignoreCase – 表示忽略大小写2、g global – 表示全局匹配3、m multiline – 表示对行匹配项目：正则表达式测试工具...
复制链接

扫一扫