找回密码
当前位置：前端开发者 > 教程 > 正文

前端开发正则表达式测试工具

2018-11-27 分类：教程 阅读(607) 评论(0)
前端用什么开发工具
游戏前端开发工具
web前端 开发工具

具体代码如下：
html 代码

<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 ‘匹配到’ + 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浏览器前端开发工具
赞(0)
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论