<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>正则表达式测试</title>
<link rel="stylesheet" href="bootstrap.min.css" type="text/css">
<script src="jquery.min.js" type="text/javascript">
</script>
<style type="text/css">
body {
margin-top: 30px;
}
.label {
margin: 0px 3px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="alert alert-danger hide" id="alert-box"></div>
<div class="form-group">
<label for="input-text">文本</label>
<input type="text" class="form-control" id="input-text"
placeholder="待匹配文本">
</div>
<label for="inputRegex">表达式</label>
<div class="input-group">
<input type="text" class="form-control" id="input-regex"
placeholder="'表达式' 或 '/表达式/选项'">
<span class="input-group-btn">
<button class="btn btn-default" id="test-button"
type="button">测试!</button>
</span>
</div>
</div>
</div>
<div class="row">
<h3>匹配结果</h3>
<div class="col-sm-12">
<div class="well well-lg" id="results-box"></div>
</div>
</div>
</div>
<script type="text/javascript">
var textbox = $("#input-text");
var regexbox = $("#input-regex");
var alertbox = $("#alert-box");
var resultsbox = $("#results-box");
$("#test-button").click(function () {
clearResultsAndErrors();
var text = textbox.val();
var regex = regexbox.val();
if ("" === text) {
err("需要输入匹配的文本!");
} else if ("" === regex) {
err("没正则表达式怎么玩?");
} else {
regex = createRegex(regex);
if (!regex) {
return;
}
var results = getMatches(regex, text);
if (results.length>0 && null!==results[0]) {
var html = getMatchesCountString(results);
html += getResultsString(results, text);
resultsbox.html(html);
} else {
resultsbox.text("无匹配!");
}
}
});
function clearResultsAndErrors() {
resultsbox.text("");
alertbox.addClass("hide").text("");
}
function err(str) {
alertbox.removeClass("hide").text(str);
}
function createRegex(regex) {
var rc = false;
try {
if ("/" === regex.charAt(0)) {
var rgx = regex.split("/");
if (rgx.length != 3) {
throw SyntaxError("确认表达式的格式对了么?");
}
rgx.shift();
var flags = rgx.pop();
rc = new RegExp(rgx, flags);
} else {
rc = new RegExp(regex, "g");
}
} catch (e) {
err("表达式写对了么或检查选项?");
}
return rc;
}
function getMatches(regex, text) {
var results = [];
var result = null;
if (regex.global) {
while (1) {
result = regex.exec(text);
if (null === result) {
break;
}
results.push(result);
}
} else {
results.push(regex.exec(text));
}
return results;
}
function getMatchesCountString(results) {
return "<p>发现 " + results.length + " 个匹配</p>";
}
function getResultsString(results, text) {
for (var i = results.length-1; i>=0; i--) {
var result = results[i];
var match = result.toString();
var prefix = text.substr(0, result.index);
var suffix = text.substr(result.index + match.length);
text = prefix + '<span class="label label-info">' + match
+ '</span>' + suffix;
}
return "<h4>" + text + "</h4>";
}
</script>
</body>
</html>