写完正则在浏览器上检测自己写得对不对实在是不方便，于是就撸了一个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" rel="external nofollow" > <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正则可以事半功倍哟。大家新年快乐！
