JavaScript Regex Testbed

A JavaScript Regex Test Bed

by Johnny Lee

HTML

<h1>本程式為「<a href="http://aspnet2share.blogspot.tw/2009/09/regex-regular-expression_22.html" target="_blank">[Regex] Regular Expression 詳論</a>」一文的範例程式, 若未獲授權, 禁止使用於任何商業行為</h1>
<p>Input:<br /><textarea rows="4" id="txtInput" onkeyup='trigger();' >02-12345678</textarea></p>
<p>Regex Pattern:<br />/<input type="Text" id="txtPattern" onkeyup='trigger();' value='0\d{1,2}-\d{6,8}' />/</p>
<p><input type="checkbox" id="chkIgnoreCase" value="i" onchange='trigger();'>Ignore Case</input><input type="checkbox" id="chkGlobal" value="g" onchange='trigger();'>Global</input><input type="checkbox" id="chkMultiline" value="m" onchange='trigger();'>Multiline</input></p>
<p>Replace with:<br /><input type="Text" id="txtReplace" onkeyup='trigger();' /></p>
<p><input type="checkbox" disabled readonly id="chkIsMatched" value="Matched?">Match?</input></p>
<p>Output:</p>
<p id="output">(EMPTY)</p>

CSS

body {
    font-family: Verdana, Arial;
    font-size: 0.8em;
}
h1 {
    font-family: 微軟正黑體, Verdana, Arial;
    font-size: 1.2em;
    background: Tan;
}
textarea, input[type='text'] {
    width: 90%;
    padding: 3px;
}
#output {
    width: 90%;
    padding: 3px;
    background: lightgray;
}

JavaScript

function trigger() {
    let strPattern = $('#txtPattern').val().trim();
    if (strPattern == '') return;
    let input = $('#txtInput').val();
    let replace = $('#txtReplace').val().trim();
    let chkIsMatched = $('#chkIsMatched');
    let opt = $('#chkIgnoreCase').prop("checked")? 'i' : '' +
    					$('#chkGlobal').prop("checked")? 'g' : '' +
    					$('#chkMultiline').prop("checked")? 'm' : '';
    try {
        let pattern = new RegExp(strPattern, opt);
        let isMatched = input.match(pattern) != null;
        chkIsMatched.prop("checked", isMatched);
        if (isMatched) {
            if (replace != '')
                $('#output').text(input.replace(pattern, replace));
            else {
                var matches = pattern.exec(input);
                var s = '';
                for (var l = 0; l < matches.length; l++)
                    s += 'Group[' + l + ']:' + 
                        matches[l] + '<br/>';
                $('#output').html(s);
            }
        }
        else
            $('#output').text('No match!');
    }
    catch(e) {
        chkIsMatched.prop("checked", false);
        $('#output').text(e);
    }
} trigger();