网页测试正则是否正确.资料收集过来的.比较实用.非原创
代码粘贴至html页面即可使用
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<style>
* { margin:0;padding:0;}
.frame { margin:0 auto; width:960px;}
div { margin:auto; padding:auto;}
label {display:block;}
li label {display:inline;}
h3 { font-weight:normal;}
ul { padding:0px; display:block; list-style:none;}
#actions {margin:10px 0 0 0;border-bottom:1px solid #000;}
li { display:inline;}
#actions a {color:#000;font-family:"宋体";font-size:12px;text-decoration:none;border:1px solid #000;border-bottom:none;padding:3px 8px 0 8px; border-bottom:none; background:#ccc; margin-right:-1px;}
#actions a:hover { background: red;}
#actions a.current {background:#fff;padding-bottom:1px;}
#options {border:1px solid #000;border-top:none; margin:0; padding:10px;clear:both;background:#fff;clear:both;}
</style>
</head>
<body>
<div class="frame">
<div>
<ul id="actions">
</ul>
</div>
<div id="options">
<p><label for="txtRegex">正则表达式:</label><textarea id="txtRegex" cols="80" rows="3"></textarea></p>
<p><label for="txtContent">内 容:</label><textarea id="txtContent" cols="80" rows="10"></textarea></p>
<div><h3>选项</h3>
<ul>
<li><input type="checkbox" name="cblOptions" id="cbIgnoreCase" value="i" /><label for="cbIgnoreCase">IgnoreCase</label></li>
<li><input type="checkbox" name="cblOptions" id="cbMultiline" value="m" /><label for="cbMultiline">Multiline</label></li>
<li><input type="checkbox" name="cblOptions" id="cbGlobal" value="g" /><label for="cbGlobal">Global</label></li>
</ul>
</div>
<p id="replaceTo"><label for="txtReplaceTo">替换为:</label><textarea id="txtReplaceTo" cols="80" rows="3"></textarea></p>
<div>
<ul>
<li><input type="button" id="btnSubmit" value="替换" /></li>
</ul>
</div>
<p><label for="txtResult">结果:</label><textarea id="txtResult" cols="80" rows="10"></textarea></p>
</div>
</div>
<script>
function StringBuilder(value) {
this.strings = new Array("");
this.append(value);
}
// Appends the given value to the end of this instance.
StringBuilder.prototype.append = function(value) {
if (value) {
this.strings.push(value);
}
}
// Clears the string buffer
StringBuilder.prototype.clear = function() {
this.strings.length = 1;
}
// Converts this instance to a String.
StringBuilder.prototype.toString = function() {
return this.strings.join("");
}
localElements = {
actions:document.getElementById("actions"),
regex: document.getElementById("txtRegex"),
options: document.getElementsByName("cblOptions"),
content: document.getElementById("txtContent"),
replaceTo: document.getElementById("txtReplaceTo"),
result: document.getElementById("txtResult"),
eleReplaceTo: document.getElementById("replaceTo"),
submit: document.getElementById("btnSubmit"),
getOptions: function() {
var strOptions = "";
for (var i = 0; i < this.options.length; i++) {
if (this.options[i].checked) strOptions += this.options[i].value;
}
return strOptions;
},
getRegex: function() {
return new RegExp(this.regex.value, this.getOptions());
},
setResult: function(value) {
this.result.value = value;
}
};
//begin providers
function ReplaceProvider(elements){
this.elements = elements;
}
ReplaceProvider.prototype = {
name: "替换",
display: function() {
this.elements.eleReplaceTo.style.display = "";
},
execute: function() {
var re = this.elements.getRegex();
this.elements.setResult(this.elements.content.value.replace(re, this.elements.replaceTo.value));
}
}
function MatchProvider(elements) {
this.elements = elements;
}
MatchProvider.prototype = {
name: "匹配",
display: function() {
this.elements.eleReplaceTo.style.display = "none";
},
execute: function() {
var re = this.elements.getRegex();
var matchs = this.elements.content.value.match(re);
var sb = new StringBuilder();
sb.append("共找到" + matchs.length + "个匹配项\r\n");
sb.append(matchs.join("\r\n"));
this.elements.setResult(sb.toString());
}
}
function TestProvider(elements) {
this.elements = elements;
}
TestProvider.prototype = {
name: "验证",
display: function() {
this.elements.eleReplaceTo.style.display = "none";
},
execute: function() {
var re = this.elements.getRegex();
this.elements.setResult(re.test(this.elements.content.value));
}
}
function ExecProvider(elements) {
this.elements = elements;
}
ExecProvider.prototype = {
name: " Exec ",
display: function() {
this.elements.eleReplaceTo.style.display = "none";
},
execute: function() {
if (this.elements.regex.value == "") return;
var re = this.elements.getRegex();
var sb = new StringBuilder();
while((arr = re.exec(this.elements.content.value))) {
sb.append("匹配到的字符串为: " + arr[0] + "\r\n");
for (var i = 1; i < arr.length; i++) {
sb.append("\t第" + i + "个子匹配:\t" + arr[i]+"\r\n");
}
}
this.elements.setResult(sb.toString());
}
}
function SearchProvider(elements) {
this.elements = elements;
}
SearchProvider.prototype = {
name: "搜索",
display: function() {
this.elements.eleReplaceTo.style.display = "none";
},
execute: function() {
var re = this.elements.getRegex();
this.elements.setResult("第一个匹配到的index为:\t" + this.elements.content.value.search(re));
}
}
function SplitProvider(elements) {
this.elements = elements;
}
SplitProvider.prototype = {
name: "分隔",
display: function() {
this.elements.eleReplaceTo.style.display = "none";
},
execute: function() {
var re = this.elements.getRegex();
this.elements.setResult(this.elements.content.value.split(re).join("\r\n"));
}
}
providers = [
new ReplaceProvider(window.localElements),
new MatchProvider(window.localElements),
new ExecProvider(window.localElements),
new TestProvider(window.localElements),
new SplitProvider(window.localElements),
new SearchProvider(window.localElements)
];
// end providers
var defaultAction = null;
for (var i = 0; i < window.providers.length; i++) {
var provider = window.providers[i];
var li = document.createElement("li");
var link = document.createElement("a");
link.href = "#";
link.provider = provider;
link.onfocus = function() {
this.blur();
}
link.onclick = toggle;
link.innerHTML = provider.name;
li.appendChild(link);
window.localElements.actions.appendChild(li);
if (i == 0) {
toggleAction(link, provider);
}
}
function toggle() {
toggleAction(this, this["provider"]);
return false;
}
function toggleAction(obj, provider) {
var links = window.localElements.actions.getElementsByTagName("a");
for (var i = 0; i < links.length; i++) {
links[i].className = "";
}
obj.className = "current";
window.localElements.submit.value = provider.name;
provider.display();
window.localElements.submit.onclick = function(){
provider.execute();
}
}
</script>
</body>
</html>
