写完正则在浏览器上检测自己写得对不对实在是不方便，于是就撸了一个JS正则小demo出来。

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正则小工具的更多相关文章

  1. 调用百度API写了一个js翻译小工具

    目前还未完成的功能有:textarea高度自适应,移动端与pc端都写了.效果如图: html: <!DOCTYPE html> <html lang="en"&g ...

  2. 用 Python 制作一个艺术签名小工具，给自己设计一个优雅的签名

    生活中有很多场景都需要我们签字(签名),如果是一些不重要的场景,我们的签名好坏基本无所谓了,但如果是一些比较重要的场景,如果我们的签名比较差的话,就有可能给别人留下不太好的印象了,俗话说字如其人嘛,本 ...

  3. 利用 Python 写一个颜值测试小工具

    我们知道现在有一些利用照片来测试颜值的网站或软件,其实使用 Python 就可以实现这一功能,本文我们使用 Python 来写一个颜值测试小工具. 很多人学习python,不知道从何学起.很多人学习p ...

  4. 【翻译】要理解Ext JS 5小工具

    原版的:Understanding Widgets in Ext JS 5 在Ext JS 5,引入了新的"widgetcolumn",支持在网格的单元格中放置组件. 同一时候,还 ...

  5. 两周撸一个掘金微信小程序

    利益相关 无 声明 这并不是掘金官方小程序(貌似没有搜到掘金 APP 对应的官方小程序),完全为第三者开发者开发,仅用于学习交流,禁止用于其他用途.若要使用官方正版,可访问掘金 官方网站,或下载掘金官 ...

  6. 使用PyQt4制作一个正则表达式测试小工具

    最近在做一些网络爬虫的时候,会经常用到正则表达式.为了写出正确的正则表达式,我经常在这个网站上进行测试:Regex Tester.这个页面上面一个输入框输入正则表达式,下面一个输入框输入测试数据,上面 ...

  7. Python学习之旅：用Python制作一个打字训练小工具

    一.写在前面 说道程序员,你会想到什么呢?有人认为程序员象征着高薪,有人认为程序员都是死肥宅,还有人想到的则是996和 ICU. 别人眼中的程序员:飞快的敲击键盘.酷炫的切换屏幕.各种看不懂的字符代码 ...

  8. 快速入门PaddleOCR，并试用其开发一个搜题小工具

    介绍 PaddleOCR 是一个基于百度飞桨的OCR工具库,包含总模型仅8.6M的超轻量级中文OCR,单模型支持中英文数字组合识别.竖排文本识别.长文本识别.同时支持多种文本检测.文本识别的训练算法. ...

  9. 2014第8周一JS正则小问题

    今天解决一个关于JS正则表达式的小问题,需求是匹配6位或9位数字,我原来的写法是这样的/^(/d){6}|(/d){9}$/.test(val),但测试发现输入1234567时也返回成功,很郁闷搜索了 ...

随机推荐

  1. 『奇葩问题集锦』Fedora ubuntu 下使用gulp 报错 Error: watch ENOSPC 解决方案

    用gulp启动,错误如下 Error: watch ENOSPC at exports._errnoException (util.js:746:11) at FSWatcher.start (fs. ...

  2. hadoop1中mapreduce原理详解

    剖析Mapreduce作业运行机制:原理如下图: 原理图的解释的可以分为以下几个部分 1.客户端提交一个mapreduce的jar包给JobClient 2.JocClient通过RPC和JobTra ...

  3. NodeJS加MongoDB应用入门

    OS:Windows 7 1.下载安装MongoDB:http://www.mongodb.org/downloads 2.下载安装NodeJS:http://nodejs.org/ 3.运行Mong ...

  4. SWD模式和JTAG模式

    一.功能 SWD模式:仿真 下载 JTAG模式:仿真 下载 二.接口 1.J-link JTAG/SWD接口 2.开发板接口电路 ①SWD模式 4根线(包片机) ②JTAG模式 20脚JTAG(网络) ...

  5. POJ 1442 Black Box 堆

    题目: http://poj.org/problem?id=1442 开始用二叉排序树写的,TLE了,改成优先队列,过了.. 两个版本都贴一下吧,赚稿费.. #include <stdio.h& ...

  6. gulp解决RequireJS

    gulp解决RequireJS项目前端缓存问题(二)   前言 这一节,我们主要解决在上一节<使用gulp解决RequireJSs项目前端缓存问题(一)>末尾提到的几个问题: 对通过req ...

  7. 单片微机原理P0：80C51结构原理

    本来我真的不想让51的东西出现在我的博客上的,因为51这种东西真的太low了,学了最多就所谓的垃圾科创利用一下,但是想一下这门课我也要考试,还是写一点东西顺便放博客上吧. 这一系列主要参考<单片 ...

  8. 三菱plc编程电缆通讯端口设置方法(转载)

    三菱plc编程电缆通讯端口如何设置?三菱plc编程电缆通讯端口设置方法 时间:2015-10-21 05:09:20编辑:电工栏目:三菱plc 导读:三菱plc编程电缆通讯端口的设置方法,三菱plc上 ...

  9. [转]JAVA环境变量JAVA_HOME、CLASSPATH、PATH设置详解

    [转] JAVA环境变量JAVA_HOME.CLASSPATH.PATH设置详解 - dreamman的日志 - 网易博客http://blog.163.com/dreamman_yx/blog/st ...

  10. python之---类和实例

    类和实例: 面向对象最重要的概念就是类(Class)和实例(Instance),必须牢记类是抽象的模板,比如Student类,而实例是根据类创建出来的一个个具体的“对象”,每个对象都拥有相同的方法,但 ...