正则表达式测试工具模仿

最新推荐文章于 2025-03-05 22:54:40 发布

兮梦源

最新推荐文章于 2025-03-05 22:54:40 发布

阅读量208

点赞数

分类专栏：知识库

本文链接：https://blog.youkuaiyun.com/limengyu_xmy/article/details/108179500

版权

知识库专栏收录该内容

19 篇文章

订阅专栏

这篇博客讲述了作者仿写在线正则表达式测试工具的过程，包括HTML表单和CSS样式的设定，JavaScript部分涉及获取document、正则表达式验证、模式修饰符的添加以及空输入的错误提示。主要步骤涵盖了从界面设计到功能实现的各个环节。

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

学习进入下个阶段，对在线正则表达式测试工具进行仿写.
原版链接如下：正则表达式 – 开源中国测试工具

一、HTML表单格式及CSS样式

详细略

关键点1

HTML结构及ID、class、value名称设置

<div id="regexp">
		<h1 class="">XXXXXX</h1>
		<textarea id="" class="" placeholder=""></textarea>
		<p>
			XXXXXX<input type="" id="" class="" placeholder="XXXXXX"/>
			<input type="checkbox" name="" value="i"/>XXXXX
			<input type="checkbox" name="" value="g"/>XXXXX
			<input type="checkbox" name="" value="m"/>XXXXX
			<input type="button" id="" value="XXXXX"/>
		</p>
		XXXXXXX
		<textarea id="" class="" disabled="disabled" ></textarea>
	</div>

关键点2

CSS样式中，有关固定对话框大小，不能拖动鼠标改变大小的设置

resize:none；

二、JavaScript

1、定义获取document

详细略

2、添加正则表达式

定义变量，效验正则表达式userRegExp.value是否匹配

var pattern;
//在点击按钮执行函数：
matchingBtn.onclick = function(){
	//效验正则表达式userRegExp.value是否匹配
	pattern = new RegExp(userRegExp.value,modifier);
	//如果待匹配的文本userText.value中有匹配的，在matchingResult.value中显示匹配，否则matchingResult.value中显示为“没有匹配”
	matchingResult.value = pattern.exec(userText.value) || '没有匹配';	
		}

以上整个正则表达式测试工具的主体已经完成，现在已经可以进行查找了，下面进行正则表达式igm的添加

3、添加模式修饰符

通过复对选框添加点击事件来添加模式修饰符，现在进行循环设置。

var	modifier='';
for (var i = 0;i < userModifier.length;i++){
	 userModifier[i].onclick = function(){
	 //每次循环之前都要清空，需要重新计算，否则会循环累加
		  modifier = '';
		  //每次被点击都需要再循环，判断3个是否被选中
		  for (var j = 0; j < userModifier.length;j++){
			   if(userModifier[j].checked){
			   //ture是已经被勾上的情况下，需累加到模式修饰符上去
				    modifier+=userModifier[j].value;
			   }
		  }
	 }
}

现在全部设计已经完成，整个页面只要添加一点修饰就可以

4、为空报错

验证输入框中的内容是否为空，为空时报错

if(!userText.value){
		//userText.value是不存在的情况下
		alert('请输入待匹配的文本！');
		userText.focus();
		return;
}
if(!userRegExp.value){
		//userRegExp.value是不存在的情况下
		alert('请输入待匹配的文本正则表达式！');
		userRegExp.focus();
		return;
}

以上完成