JSFiddle - React, Tailwind, and code Playground

by rajeshpillai

HTML

<link rel="stylesheet" href="https://dl.dropbox.com/u/2026291/regexp/css/gumby.css">
<script src="https://dl.dropbox.com/u/2026291/regexp/autoGrowInput.js"></script>
<script src="https://dl.dropbox.com/u/2026291/regexp/highlight.js"></script>
<script src="https://dl.dropbox.com/u/2026291/regexp/jquery.alphanum.js"></script>
<script src="https://dl.dropbox.com/u/2026291/regexp/jquery-autogrow-textarea.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/json3/3.2.4/json3.min.js"></script>
<div class="info alert">string & regular expression pattern:</div>

<div style="text-align:center;margin-bottom:20px;">
<table cellspacing="0" cellpadding="0" border="1">
	<tr align="center" valign="middle">
		<td>"</td>
        <td><textarea id="string" class="input textarea">Dogs go to doggy parks!</textarea></td>
		<td><strong>"</strong>.match(<strong>/</strong></td>
        <td><textarea id="pattern" class="input textarea" >dog</textarea></td>
        <td><strong>/</strong></td>
        <td><input id="flag" class="text input narrow" type="text" value="" /></td>
		<td>);</td>
	</tr>
</table>
</div>
    
<div class="info alert">result of match():</div>
<div class="field" id="result"></div>

<div class="info alert">matches (yellow highlight indicates the matches found by the pattern):</div>
<p id="matches"></p>

CSS

html {
    margin:10px;  
}
body{
    max-width:700px;
}
body,p,label,input{
    font-size:12px !important;
    line-height:1.7em !important;
}

label strong{
    font-size:14px;
}

.highlight {
    background:yellow;
    font-weight:bold;
}

.info.alert{
    font-size:12px !important;
    color:#323232;
    background-color: #F3F3F3;
    border:1px solid #C2C2C2;
}

#string,#pattern{
    text-align:center;
    min-width:270px;
    padding: 0px 5px;
    height:36px;
    margin-top:5px;
}

#flag,#string,#pattern{
    border-radius:4px;
    padding:8px 5px;
    border:1px solid #ccc;
    font-family: "Open Sans";
font-weight: 400;
font-size: 12px;
    color:#555;
}

#result{
    word-wrap: break-word;
}

#flag{
    width:20px;
    padding:7px 5px;
}

.bogus{
    color:red;
    font-weight:bold;
}

JavaScript

var $flag = $('#flag');
var $pattern = $('#pattern');
var $matches = $('#matches');
var $string = $('#string');

$flag.autoGrowInput({
    comfortZone: 0
})
.trigger('blur')
.alpha({
    disallow: 'abcdefhjklnopqrstuvwxyz',
    allowUpper: false
});

$string.autoGrowInput({
    comfortZone: 0
})
.autoGrowTextArea()
.trigger('blur');

$pattern.autoGrowInput({
    comfortZone: 0
})
.autoGrowTextArea()
.trigger('blur');

$('#pattern,#flag').on('keyup', function() {
    var re;
    try {
        re = new RegExp($('#pattern').val(), $('#flag').val());
    } catch (e) {
        $('#result').html('<span class="bogus">' + e + '</span>');
        $('#matches').highlightRegex();
        return false;
    }

    $('#matches').highlightRegex().highlightRegex(re, {
        globalOn: new RegExp(/g/).test($('#flag').val())
    });

    var matches = re.toString() !== "/(?:)/g" ? $('#string').val().match(re) : false;
    $('#result').html(matches ? JSON.stringify(matches) : '<span class="bogus">That Regexp is bogus! No matches!</span>');
})
.trigger('keyup');

$string.on('keyup', function() {
    $('#matches').text($(this).val());
    $('#pattern,#flag').trigger('keyup');
})
.trigger('keyup');