JSFiddle - React, Tailwind, and code Playground

by gilly3

HTML

<form method="GET">
    <div>Put some values in the querystring so we can parse them</div>
    <div><label>Name: <input name="name" value="Fred Flintstone" /></label></div>
    <div><label>Location: <input name="location" value="Bedrock" /></label></div>
    <div><label>Likes: <textarea name="likes">Wilma
Pebbles
Barney
Bowling
Brontosaurus Steaks</textarea></label></div>
    <div><input type="Submit" value="submit" /></div>
</form>
<div id="result">
    <div><a id="showForm" href="#">Show form</a></div>
    <div>
        <b>Query string to parse:</b>
        <div id="qs"></div>
    </div>
    <div>Look up a query string value</div>
    <div>
        <label for="nameLookup">Name: <span>(valid values are <i>name</i>, <i>location</i>, and <i>likes</i>)</span></label>
        <br />
        <input id="nameLookup" value="name" />
        <button id="parseButton">Parse Querystring</button>
    </div>
    <div>
        <b>Value:</b>
        <div id="parsedValue"></div>
    </div>
</div>

CSS

body { font-family: sans-serif; font-size: 13px; }
form, #qs { margin-bottom: 15px; }
#result { display: none; }
label { font-size: 12px; font-weight: bold; }
form label { display: inline-block; width: 210px; font-size: 12px; font-weight: bold; }
input, textarea { width: 200px; margin-right: 5px; }
textarea { height: 120px; vertical-align: top; font-family: sans-serif; }
div { margin-bottom: 7px; }
#parsedValue { white-space: pre-wrap; }
label span { font-weight: normal; margin-left: 3px; }
label i { background-color: #ddd; padding: 1px 2px; }

JavaScript

function qs(key) {
    key = key.replace(/[*+?^$.\[\]{}()|\\\/]/g, "\\$&"); // escape RegEx control chars
    var match = location.search.match(new RegExp("[?&]" + key + "=([^&]+)(&|$)"));
    return match && decodeURIComponent(match[1].replace(/\+/g, " "));
}

$(function() {
    if (location.search) {
        $("form").hide();
        $("#result").show();
        $("#showForm").click(function(e){
            $(this).remove();
            $("form").show();
            return false;
        });
        $("#qs").text(location.search);
        $("#parseButton").click(function(e){
            e.preventDefault();
            $("#parsedValue").text(qs($("#nameLookup").val()));
        });
        $("#nameLookup").keypress(function(e){
            if (e.keyCode == 13) {
                e.preventDefault();
                $("#parseButton").click();
            }
        });
    }
});