正则表达式测试工具

 <script src=" https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>

<link href=" https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">

<style>

body{margin-top:30px} .label{margin:0px 3px;}

</style>

<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="Text">

</div>

<label for="inputRegex">正则表达式</label>

<div class="input-group">

<input type="text" class="form-control" id="input-regex" placeholder="Regex">

<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>

({

init: function() {

this.textbox = $("#input-text");

this.regexbox = $("#input-regex");

this.alertbox = $("#alert-box");

this.resultsbox = $("#results-box");

this.testBtn = $("#test-button");

this.testBtn.click(function() {

this.clearResultAndErrors();

var text = this.textbox.val();

var regex = this.regexbox.val();

if (text == "") {

this.err("请输入测试文本")

} else if (regex == "") {

this.err("请输入正则表达式");

} else {

regex = this.createRegex(regex);

if (!regex) return;

var results = this.getMatches(regex, text);

if (results.length > 0) {

var html = this.getMatchesCountString(results);

html += this.getResultsString(results, text);

this.resultsbox.html(html);

} else {

this.resultsbox.text("没有匹配"); 

}

}

}.bind(this));

},

clearResultAndErrors: function() {

this.resultsbox.text("");

this.alertbox.addClass("hide").text("");

},

err: function(text) {

this.alertbox.removeClass("hide").text(text);

},

createRegex: function(regex) {

try {

if (regex.charAt(0) == "/") {

regex = regex.split("/");

regex.shift();

var flags = regex.pop();

regex = regex.join("/");

regex = new RegExp(regex, flags);

} else {

regex = new RegExp(regex, "g");

}

return regex;

} catch(e) {

this.err("无效的正则表达式");

return false;

}

},

getMatches:function(regex, text) {

var results = [];

var result;

if (regex.global) {

while((result = regex.exec(text)) !== null) {

results.push(result);

}

} else {

results.push(regex.exec(text));

}

return results;

},

getMatchesCountString: function(results) {

return "<p>匹配到" + results.length + "个</p>"

},

getResultsString: function(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>";

}

}).init();

</script>

代码注意点：
1.createRegex函数中，注意join的参数是"/"，并用try catch来判断正则是否有效
2.getMatches函数中，通过正则对象的global属性来判断修饰符是否为g。并用exec方法来获取匹配内容
3.getResultsString函数中，拼接html字符串，for循环必须逆序，因为要保证之前匹配到的index不受影响