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:x0;
    padding: 0em 0.5em;
    font-size: 20px
}
p.l2 {
    margin:x 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("По(по) словам(слово) представителей(представитель) спецслужб(спецслужба) США(США) и(и) Европы(Европа), Кабаева(Кабаев) проводила(проводить) много(много) времени(время) в(в) Швейцарии(Швейцария). Американские(американский) чиновники(чиновник), осведомленные(осведомленный) о(о) передвижениях(передвижение) гимнастки(гимнастка), утверждают(утверждать), что(что) она(она) жила(жить) в(в) особняке(особняк), окруженном(окрузить) высокими(высокий) стенами(стена), недалеко(недалеко) от(от) Женевы.(Женева)");

$("#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, "");
}