撸一个JS正则小工具

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

demo

demo展示

项目地址

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正则可以事半功倍哟。大家新年快乐！