码迷,mamicode.com
首页 > 其他好文 > 详细

正则表达式测试

时间:2021-02-20 12:01:53      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:NPU   +=   --   orm   regex   rip   cat   global   string   

<!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>发现&nbsp;" + results.length + "&nbsp;个匹配</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>

正则表达式测试

标签:NPU   +=   --   orm   regex   rip   cat   global   string   

原文地址:https://www.cnblogs.com/Dewumu/p/14414790.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!