前端开发正则表达式测试工具
摘要： 前端用什么开发工具 游戏前端开发工具 web前端 开发工具 具体代码如下： html 代码 <script src=”https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js”></script> <lin……
| 前端用什么开发工具 |
| 游戏前端开发工具 |
| web前端 开发工具 |
具体代码如下：
html 代码
<link
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)
} 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 ‘匹配到’ + results.length + ‘个’
},
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不受影响
| nodejs前端开发工具 |
| 前端集成开发工具 |
| 前端 可视化 开发工具 |
| safari浏览器前端开发工具 |
» 本文来自：前端开发者 » 《前端开发正则表达式测试工具》
» 本文链接地址：https://www.rokub.com/6810.html
» 您也可以订阅本站：https://www.rokub.com
近期评论