<div id="regexp">
<h1 class="title">正则表达式测试工具</h1>
<textarea id="userTags" class="textbox" placeholder="在此输入带匹配的文本"></textarea>
<p>
正则表达式:<input type="text" id="useRegExp" class="textfiled" placeholder="在此输入正则表达式" />
<input type="checkbox" name="userModifier" value="i" /> 忽略大小写
<input type="checkbox" name="userModifier" value="m" /> 多行匹配
<input type="checkbox" name="userModifier" value="g" /> 全局匹配
<input type="button" value="测试匹配" id="matchingBtn" class="matchbtn" />
</p>
<h3>匹配结果:</h3>
<div id="matchingResult" class="textbox readonly"></div>
<p>
替换文本:<input type="text" id="useReplaceText" class="textfiled" placeholder="在此输入替换文本" />
<input type="button" value="替换" id="replaceBtn" />
</p>
<h3>替换结果:</h3>
<div id="replaceResult" class="textbox readonly"></div>
</div>

<script>
var userTags = document.getElementById('userTags');
var useRegExp = document.getElementById('useRegExp');
//数组
var userModifiers = document.getElementsByName('userModifier');
var matchingBtn = document.getElementById('matchingBtn');
var matchingResult = document.getElementById('matchingResult');
var useReplaceText = document.getElementById('useReplaceText');
var replaceBtn = document.getElementById('replaceBtn');
var replaceResult = document.getElementById('replaceResult');
var pattern;
var modifier = '';

for (var i = 0; i < userModifiers.length; i++) {
userModifiers[i].onclick = function () {
//每次点击清空
modifier = '';
//每一次点击都要循环匹配
for (var j = 0; j < userModifiers.length; j++) {
if (userModifiers[j].checked) {
modifier += userModifiers[j].value;
}
}
}
}

matchingBtn.onclick = function () {
matchingResult.innerHTML = options('regexp');
}

replaceBtn.onclick = function () {
replaceResult.innerHTML = options('replace');
}

var options = (function () {
function options(name) {
if (!userTags.value) {
alert('请输入待匹配待文本');
userTags.focus();
return '';
}
if (!useRegExp.value) {
alert('请输入正则');
useRegExp.focus();
return '';
}
if (name==='replace') {
if (!useReplaceText.value) {
alert('请输入替换关键字');
useReplaceText.focus();
return '';
}
}
pattern = new RegExp('(' + useRegExp.value + ')', modifier);
return opt[name](pattern);
}
var opt = {
regexp: function (pattern) {
return pattern.exec(userTags.value) ? userTags.value.replace(pattern, '<span style="background-color:yellow;">$1</span>') : "(没有匹配)";
},
replace: function (pattern) {
var result = userTags.value.replace(pattern, '<span style="color:red;">' + useReplaceText.value + '</span>');
return result;
},
addOpt:function(name,pattern,fn){
if(!opt[name]){
opt[name] = fn;
}
return opt;
}
}
options.addOpt = opt.addOpt;
return options;
})();
</script>
</body>