JSFiddle - React, Tailwind, and code Playground

by secretgspot

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>
<div class="info alert">regular expression pattern:</div>      
<div class="field" style="text-align:center">
            <strong>/</strong><input id="pattern" class="text input narrow" type="text" value="dog" style="margin:0 2%;width:0%;"><strong>/</strong><input id="flag" class="text input narrow" type="text" value="g" style="margin:0 2%;width:0%;">
         </div>
            <div class="info alert">String:</div>
    <div class="field" style="text-align:center">
<textarea class="input textarea" rows="1">My Dog goes doggy crazy because he has so much dogma!</textarea>
         </div>
    <div class="info alert">Matches:</div>
            <p id="string">My Dog goes doggy crazy because he has so much dogma!</p>

CSS

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

label strong{
    font-size:16px;
}
.highlight {
    background:yellow;
    font-weight:bold;
}

input:focus, textarea:focus{
    border:1px solid #457BBE !important;
}

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

#string,textarea{
    text-align:center;
}

textarea{
    padding:12px !important;
}

JavaScript

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

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

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

$('input').on('keyup', function () {
    $('#string').highlightRegex();
    $('#string').highlightRegex(new RegExp($('#pattern').val(), $('#flag').val()), {
        globalOn: new RegExp(/g/).test($('#flag').val())
    });
})
.trigger('keyup');

$('textarea').autoGrowTextArea().on('keyup',function(){
    $string.text($(this).val());
    $('input').trigger('keyup');
});