Online notes favinavi - online bookmark

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

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

Demo

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

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

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

CSSCopy codes

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;
}

htmlCopy codes

<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>

javascriptCopy codes

$=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('✖');
}

2201

favinavi - for heavy web user Online notes

网页图片CSS进阶篇——优化图片，提升网页加载速度
说到提升网页中图片加载速度，一般立即想到的是给图片瘦身，比如减小图片尺寸，或者通过工具降低图片文件大小，比如png图片，可以利用在线压缩PNG图片网页工具，一般...
现在还有哪些好用的网络收藏夹？
看到几年前有人问过这个问题，上网搜索一下，大概能找到以下几家，目前貌似都还能访问： 1、当然有这里—— favii人性化网络收藏夹，不过最近favii升级新版...
使用基于Cookie-Free域名加载CSS时，解决字体文件无法加载的问题
当使用基于Cookie-Free域名加载CSS时，字体文件无法加载的问题通常是因为浏览器政策所导致的。这个问题与字体文件资源和浏览器的同源策略有关。在Web...
CSS3特效“喜欢/Like”动态按钮，一颗会跳动的心脏
纯css+svg实现，鼠标移上去心脏会有节律地跳动，适合用来做点赞按钮参考，或者学习css动画技巧。
为什么会做favinavi网络收藏夹网站？记录一下心路历程
记得最早是在2007年，那时工作需要，经常用浏览器上网查资料、访问工作网站等等。经常遇到一个问题，就是白天工作时看到一个网站的某篇文章很有用，在浏览器设为了书签...
favinavi人性化网络收藏夹与pinbox跨平台收藏工具的简单对比
简体中文世界里的网络收藏夹类网站，我个人观点：pinbox是做得非常用心的一个，看得出来背后有一个专业团队在开发和运营，人数多少不知道，但肯定是比favinav...