在线笔记 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('✖');
}

2202

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

https协议下javascript复制内容到剪贴板
JavaScript复制内容到剪贴板（clipboard）网上教程比较多，大部分使用document.execCommand('copy')...
一个纯CSS的最小干扰的渐变色彩虹loading bar
Loading图标，又称“加载中”图标，以往是用gif格式动图来实现。但是gif有一个比较明显的问题，不易调整大小，然后图片一般比较粗糙，颗粒感严重。现在流...
An example of increasing productivity with the Favinavi web favorites sharing feature
Favinavi’s humanized network favorites provides a sharing function, that is, u...
CSS实现在普通可滚动容器元素内的类似position:fixed悬浮固定按钮效果
有时候，我们需要在某个可滚动（scroll）的元素内实现悬浮固定按钮效果，按钮不能随着鼠标滚动而变化。在全可视窗口实现这个效果（比如顶部的悬浮菜单）比较简单，只...
网页图片CSS进阶篇——优化图片，提升网页加载速度
说到提升网页中图片加载速度，一般立即想到的是给图片瘦身，比如减小图片尺寸，或者通过工具降低图片文件大小，比如png图片，可以利用在线压缩PNG图片网页工具，一般...
为什么会做favinavi网络收藏夹网站？记录一下心路历程
记得最早是在2007年，那时工作需要，经常用浏览器上网查资料、访问工作网站等等。经常遇到一个问题，就是白天工作时看到一个网站的某篇文章很有用，在浏览器设为了书签...