在线笔记 favinavi - 人性化网络收藏夹

自用小工具：正则表达式测试是否能匹配字符串

分类标签：全部 CSS html javascript php/other IT

by: fanshome 2023-05-29 14:54(UTC)

正则表达式写起来不难，但是要做到准确无误却是一个不小的挑战，经常因为一个小疏忽，导致貌似正常而实际上却有bug。

尤其是域名或url相关的，特别容易出错，出错的主要原因是没有考虑到实际情况下的url参数中可能也包含域名。

所以自己做一个小工具，用来测试和检测写的正则表达式是否准确有效。

CSS复制代码

body{text-align: center;}
input,button{
	width: 96%;
	height: 30px;
	line-height: 30px;
	font-size: 24px;
	font-family:Consolas,monospace;
}
button{
	margin-top: 30px;
	padding: 8px;
	height: 46px;
	background: #098;
	color: #fff;
	border: 0;
	cursor: pointer;
}
.result{
	font-size: 24px;
	line-height: 30px;
}
.output{
	width: 30px;
	overflow: hidden;
	display: inline-block;
}

html复制代码

<h2>待检测字符串</h2>
<input type='text' name='str' id='str' />
<h2>正则表达式pattern</h2>
<input type='text' name='reg' id='reg' /><br/>
<p class='result'>测试结果：
	<span class='output' id='output'></span>
</p>
<button class='' onclick='check()'>测试</button>

javascript复制代码

$=mdui.$;
function check(){
	var s=$('#str').val(),r=$('#reg').val();
	if(s=='' || r==''){$('#output').text('');return;}
	var flags = r.replace(/.*\/([gimy]*)$/, '$1');
	var pattern = r.replace(new RegExp('^/(.*?)/'+flags+'$'), '$1');
	var regex = new RegExp(pattern, flags);
	if(regex.test(s))$('#output').text('✔');
	else $('#output').text('✖');
}

2198

favinavi - 重度网络用户必备在线笔记

A PHP method for determining whether a browser supports AVIF images
The latest generation of image compression format AVIF is very good, the effect ...
使用CSS让大背景图片适应不同大小屏幕又一例
这个示例网页使用了一个较大的背景图片，并使用CSS的background-size属性和@media查询来确保这个图片在不同尺寸的终端屏幕上都能够自适应。在小于...
你的网站会有不请自来的访客吗？
做网站，做SEO，就是希望别人来访问，最欢迎的当然是真实用户，其次是各大搜索引擎的蜘蛛。但是，假如你是个站长，你真的了解都有谁来造访你的网站吗？有不请自来的吗？...
使用Goodsync同步工具遭遇无法解决冲突的状况一例
Goodsync是一个非常好用的同步工具，适用于需要经常同步文件的人，比如程序员，或者业余开发者等等。尤其是其“自动同步”功能，可以说大大地提高了生产率，比以前...
CSS学习心得：多行文本两端对齐，同时溢出部分自动截断并添加省略号...
在卡片列表式页面展示文章内容时，除文章标题外，经常需要显示文章简介。简单粗暴的做法就是只显示文章的开始部分内容，这时就会要求简介部分固定高度，不能超出，同时尤其...
网站的页面访问量以及搜索引擎爬虫访问量的统计方法
统计页面访问量的方法有无数种，这里介绍我的“低级”方法： 1、当然是先用数据库建立一张访问统计表，每个需要统计的页面单独需要建一个字段，比如首页就用“index...