JSFiddle - React, Tailwind, and code Playground

by OjisanSeiuchi

HTML

<form id="glossForm">
    <label for="lang1">Type sentence here in format:  LANG1(LANG2) </label>
    <br/>
    <textarea name="input" id="input"></textarea>
    <br/>
    <input type="submit"/>
    <input id="reset" type="reset"/>
</form>

<div id="rawHTMLDiv">
    <h2>Raw HTML</h2>
    <textarea id="rawHTML"></textarea>
</div>

<div id="rawCSSDiv">
    <h2>Raw CSS</h2>
    <textarea id="RawCSS">
        div.unit {
        float: left;
        margin-bottom: 1em;
        color: black;
        }
        p.l1 {
        margin:0;
        padding: 0em 0.5em;
        }
        p.l2 {
        margin:0;
        padding: 0em 0.5em;
        }
    </textarea>
</div>


<div id="previewDiv">
    <h2>Preview</h2>
    <p id="output" ></p>
</div>

CSS

div.unit {
    float: left;
    margin-bottom: 1em;
    color: black;
}
p.l1 {
    margin:0;
    padding: 0em 0.5em;
    font-size: 20px
}
p.l2 {
    margin:0;
    padding: 0em 0.5em;
    font-size: 20px;
    color: silver;
}

textarea{
    width:300px;
    height:100px;
}

#rawHTMLDiv{
    margin-top:1em;
    margin-bottom:1em;
}

#previewDiv{
    margin-top:1em;
    margin-bottom:1em;
}

#rawCSSDiv{
    margin-top:1em;
    margin-bottom:1em;
}

JavaScript

$("#input").text("οὕτως(such) γὰρ(for) ἠγάπησεν(loved) ὁ θεὸς(God) τὸν κόσμον(the world) ὥστε(that) τὸν υἱὸν τὸν μονογενῆ(the only-begotten son) ἔδωκεν(he gave) ἵνα(so that) πᾶς ὁ πιστεύων(all those who believe) εἰς αὐτὸν(in him) μὴ ἀπόληται(will not die) ἀλλ(but) ἔχῃ(will have) ζωὴν αἰώνιον(eternal life)");

$("#glossForm").submit(function(e) {
    e.preventDefault();
    var original = $("#input").val();
    var re = /([^\)]+)\(([^\)]+)\)/g;
    var match;
    $("#output").html("");
    $("#rawHTML").text("");
    while (match = re.exec(original)) {
        var currHTML = "<div class='unit'> <p class='l1'>" + match[1].trim() + "</p>" + "<p class='l2'>" + match[2].trim() + "</p></div>";
        $("#output").html($("#output").html() + currHTML);

        $("#rawHTML").text($("#rawHTML").text() + currHTML);

    };

});

$("#reset").click(function(e) {
    e.preventDefault();
    $("#input").text("");
    $("#output").html("");
    $("#rawHTML").text("");
});

String.prototype.trim = function() {
    return this.replace(/^\s*|\s*$/g, "");
}