撸一个JS正则小工具
写完正则在浏览器上检测自己写得对不对实在是不方便，于是就撸了一个JS正则小demo出来。
demo
代码部分
首先把布局样式先写好。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js正则查找替换工具</title>
<link rel="stylesheet" type="text/css" href="./RegExp.css">
<script type="text/JavaScript" src="./RegExp.js"></script>
</head>
<body>
<form name="tester" action="" method="post" onSubmit="processRegex(this);return false">
<table border="1" cellpadding="4" cellspacing="0" width="550">
<tr>
<th class="Dialog">js正则查找替换工具</th>
</tr>
<tr>
<td class="Dialog">
<span class="header">请输入正则表达式:</span>
<br>
<input name="RegEx" type="text" size="62" style="font-size:13px">
<input type="checkbox" name="caseSensitive" id="caseSensitive" value="Yes">
<label for="caseSensitive">区分大小写</label>
<input type="radio" name="operation" id="operationFind" value="find" checked onClick="hideReplaceFields()">
<label for="OperationFind">查找</label>
<input type="radio" name="operation" id="operationReplace" value="replace" onClick="showReplaceFields()">
<label for="OperationReplace">替换</label>
<br>
<span class="header" id="replaceheader">请输入替换的正则表达式:</span>
<br>
<input id="RegExReplace" name="RegExReplace" type="text" size="62" style="font-size:13px">
<span class="header" style="margin-top: 3px;display: block;">填写你想查找或替换的文本:</span>
<textarea name="searchText" cols="70" rows="6"></textarea>
<img src="http://files.cnblogs.com/files/MuYunyun/pkq.gif" style="margin-left: 10px">
<br>
<input name="submit" type="submit" style="font-weight: bold" value="开始">
</td>
</tr>
</table>
</form><br>
<span id="output"></span>
<script language="JavaScript">
hideReplaceFields();
</script>
</body>
</html>
布局
body {
font-family: arial;
font-size: 12px;
}
input {
font-size: 11px;
}
textarea {
font-size: 11px;
}
th {
background:#8888FF;color:white;text-align:left
}
td {
background:#CCCC99;color:black;font-size:12px
}
.RowA {
background: #CCCC99
}
.RowB {
background: #EEEEBB
}
.header {font-weight: bold}
样式
接着就是用js分别构造查找和替换两个函数，用到了RegExp对象的一些属性，思路还是比较简单的。代码如下：
// 没选中替换则不能输入
function hideReplaceFields() {
document.getElementById('RegExReplace').disabled = true;
document.getElementById('replaceheader').disabled = true;
}
// 点击替换则能输入
function showReplaceFields() {
document.getElementById('RegExReplace').disabled = false;
document.getElementById('replaceheader').disabled = false;
}
// 查找
function processRegexFind(text, regex, flags) {
var reg = new RegExp(regex, flags);
var lastIdx = -1;
var iCount = 0;
var result = "";
var output = '<div style="height:200px;overflow-y:auto;width:550"><table border="0" cellpadding="2" cellspacing="0" width="550"><tr><th width="*">匹配内容</th><th>位置</th><th>长度</th></tr>'
// 循环
while (lastIdx != 0) {
var mtch = reg.exec(text);
if (reg.lastIndex !== 0) { //lastIndex属性存放一个整数，它声明的是上一次匹配文本之后的第一个字符的位置。
iCount++;
if (iCount % 2) {
style = "RowA"
} else style = "RowB";
// 输出
output += '<tr class="' + style + '"><td>' + RegExp.lastMatch + '</td><td>' + (reg.lastIndex - RegExp.lastMatch.length) + '</td><td>' + RegExp.lastMatch.length + '</td></tr>';
}
lastIdx = reg.lastIndex;
}
output += '</table></div>';
if (iCount !== 0) {
result = "匹配个数: " + iCount + output;
} else result = '未找到匹配的项';
return result;
}
// 替换
function processRegexReplace(text, regexfind, regexreplace, flags) {
var re = new RegExp(regexfind, flags);
var newstr = text.replace(re, regexreplace);
var result = '<div style="height:200px;overflow-y:auto;width:550"><table border="0" cellpadding="2" cellspacing="0" width="550"><tr><th>替换后：</th></tr><tr><td>' + newstr + '</td></tr>';
return result;
}
// 人口
function processRegex(form) {
var output = '';
var flags;
if (form.caseSensitive.checked) flags = "g";
else flags = "gi";
//判断是查找还是替换
if (form.operationFind.checked) {
output = processRegexFind(form.searchText.value, form.RegEx.value, flags);
} else if (form.operationReplace.checked) {
output = processRegexReplace(form.searchText.value, form.RegEx.value, form.RegExReplace.value, flags);
}
document.getElementById('output').innerHTML = output;
return false;
}
用这小工具学习js正则可以事半功倍哟。大家新年快乐！
撸一个JS正则小工具的更多相关文章
- 调用百度API写了一个js翻译小工具
目前还未完成的功能有:textarea高度自适应,移动端与pc端都写了.效果如图: html: <!DOCTYPE html> <html lang="en"&g ...
- 用 Python 制作一个艺术签名小工具，给自己设计一个优雅的签名
生活中有很多场景都需要我们签字(签名),如果是一些不重要的场景,我们的签名好坏基本无所谓了,但如果是一些比较重要的场景,如果我们的签名比较差的话,就有可能给别人留下不太好的印象了,俗话说字如其人嘛,本 ...
- 利用 Python 写一个颜值测试小工具
我们知道现在有一些利用照片来测试颜值的网站或软件,其实使用 Python 就可以实现这一功能,本文我们使用 Python 来写一个颜值测试小工具. 很多人学习python,不知道从何学起.很多人学习p ...
- 【翻译】要理解Ext JS 5小工具
原版的:Understanding Widgets in Ext JS 5 在Ext JS 5,引入了新的"widgetcolumn",支持在网格的单元格中放置组件. 同一时候,还 ...
- 两周撸一个掘金微信小程序
利益相关 无 声明 这并不是掘金官方小程序(貌似没有搜到掘金 APP 对应的官方小程序),完全为第三者开发者开发,仅用于学习交流,禁止用于其他用途.若要使用官方正版,可访问掘金 官方网站,或下载掘金官 ...
- 使用PyQt4制作一个正则表达式测试小工具
最近在做一些网络爬虫的时候,会经常用到正则表达式.为了写出正确的正则表达式,我经常在这个网站上进行测试:Regex Tester.这个页面上面一个输入框输入正则表达式,下面一个输入框输入测试数据,上面 ...
- Python学习之旅：用Python制作一个打字训练小工具
一.写在前面 说道程序员,你会想到什么呢?有人认为程序员象征着高薪,有人认为程序员都是死肥宅,还有人想到的则是996和 ICU. 别人眼中的程序员:飞快的敲击键盘.酷炫的切换屏幕.各种看不懂的字符代码 ...
- 快速入门PaddleOCR，并试用其开发一个搜题小工具
介绍 PaddleOCR 是一个基于百度飞桨的OCR工具库,包含总模型仅8.6M的超轻量级中文OCR,单模型支持中英文数字组合识别.竖排文本识别.长文本识别.同时支持多种文本检测.文本识别的训练算法. ...
- 2014第8周一JS正则小问题
今天解决一个关于JS正则表达式的小问题,需求是匹配6位或9位数字,我原来的写法是这样的/^(/d){6}|(/d){9}$/.test(val),但测试发现输入1234567时也返回成功,很郁闷搜索了 ...
随机推荐
- 测试php页面执行代码时间
//生命一个计算脚本运行时间的类 class Timer { private $startTime = 0; //保存脚本开始执行时的时间(以微秒的形式保存) private $stopTime = ...
- JS将搜索的关键字高亮显示实现代码
这篇文章介绍了JS将搜索的关键字高亮显示实现代码,有需要的朋友可以参考一下 用JS让文章内容指定的关键字加亮 是这样的.. 现在有这些关键字:美容,生活,购物 当在文章里头出现这些关键字,就把它加亮显 ...
- Mysql修改设置root密码的命令及方法
方法一:使用SQL语句命令UPDATE 需用到Mysql自带的加密函数PASSWORD(string),该函数对一个明文密码进行加密,但不能解密.专门用于mysql.user(用户权限表)中设置密码, ...
- Function Pointer in Delpni
program Project1; {$APPTYPE CONSOLE} {$R *.res} uses System.SysUtils; type TVoice = function(): Stri ...
- 普及下Oracle hints语法
普及下Oracle hints的语法:{DELETE|INSERT|SELECT|UPDATE} /*+ hint [text] [hint[text]]... */ 1.hint只能出现在诸如sel ...
- unidac连接FireBird数据库
dbconn: TUniConnection; with dbconn do begin if not Connected then begin ...
- sublime部署开发环境
安装nodejs 去官网下载安装,暂时不建议安装5.0以上版本. 命令行运行以下命令查看是否安装成功: 全局安装gulp $ npm install -g gulp 全局安装requirejs 压缩资 ...
- 计算几何模板 (bzoj 1336，poj 2451 ,poj3968)
poj 3968 (bzoj 2642) 二分+半平面交,每次不用排序,这是几个算几版综合. #include<iostream> #include<cstdio> #incl ...
- 在使用Ibatis查询数据返回时，报如下错误：java ibatis The error happened while setting a property on the result object
问题: 在使用Ibatis查询数据返回时,报如下错误: [com.show.add.proxy.SqlMapClientTemplateProxy]com.ibatis.common.jdbc.exc ...
- VC下载文件 + 显示进度条
在codeproject里找了许久,发现这样一个VC下载文件并显示进度条的源码,于是添加了些中文注释: 1.下载线程函数: UINT DownloadFile(LPVOID pParam) { CWn ...