JSFiddle - React, Tailwind, and code Playground

by Daedalus

HTML

<table>
    <tbody>
        <tr>
            <td>
                <textarea id="itemList" cols="60" rows="10" data-original-title="" placeholder="blah blah2 blah3
blah4 blah5 blah6
                "></textarea>
            </td>
            <td>
                <textarea id="itemFormat" rows="10" data-original-title="" placeholder="Name: {0}
Cost: {1}
Skill level {2}

                "></textarea>
            </td>
            <td align="left">
                <textarea id="itm_header" rows="5" data-original-title="" placeholder="header"></textarea>
                <br>
                <br>
                <textarea id="itm_footer" rows="5" data-original-title="" placeholder="footer"></textarea>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <br>
                <input type="checkbox" id="chkRef" data-original-title="">
                <label for="chkRef">Re</label>
                <br>
                <input type="button" id="but1" value="Format" onclick="formatList();" data-original-title="">
                <br>
                <input type="button" value="Select all(below)" onclick="document.getElementById('itemResult').select();" data-original-title="">
                <br> Horizontal delimiter:
                <input type="text" id="hor_delim" value="\t" size="2" data-original-title="">
                <br> Line spacing:
                <input type="text" id="ln_spc" value="2" size="2" data-original-title="">
                <br> </td>
        </tr>
        <tr>
            <td>
                <textarea id="itemResult" cols="60" rows="15" data-original-title="" placeholder="Name: blah
Cost: blah2
Skill level: blah3
    
Name: blah4
Cost: blah5
Skill level: blah6



    


                "></textarea>
            </td>
            <td valign="top" colspan="2">Instructions:
                <br>
                <br> First box: Tab-delimited list of items, each item separated by lines.
                <br>
           ...

JavaScript

function formatList() {
    var result = '';
    var check = document.getElementById('chkRef').checked;
    if (check == false) {
        var List = document.getElementById('itemList').value.split("\n");
    } else {
        var List = document.getElementById('itemList').value.split("\n\n");
    }
    var spacing_amt = Number(document.getElementById('ln_spc').value);
    if (document.getElementById('itm_header').value != '') {
        result += document.getElementById('itm_header').value + '\n';
    }
    for (i = 0; i < List.length; i++) {
        if (check == false) {
            var split = String(document.getElementById('hor_delim').value);
            var split = split.replace("\\t", "\t");
        } else {
            var split = "\n";
        }
        var field = List[i].split(split);
        var format = document.getElementById('itemFormat').value;
        var regrep = format;
        var patt1 = /\{(\d*)\}/g;
        for (i2 = 0; i2 < format.match(patt1).length; i2++) {
            //var patt3 = new RegExp("\\{" + i2 + "\\}","g");
            regrep = regrep.replace(patt1, function(match, $1) {
                return field[$1]
            });
        }
        spacing = str_repeat('\n', spacing_amt);
        result += regrep + spacing;
    }
    if (document.getElementById('itm_footer').value != '') {
        result += document.getElementById('itm_footer').value;
    }
    document.getElementById('itemResult').value = result;
}

if (document.getElementById('chkRef').addEventListener) {
    document.getElementById('chkRef').addEventListener("click", function() {
        if (this.checked) {
            document.getElementById('hor_delim').disabled = true;
        } else {
            document.getElementById('hor_delim').disabled = false;
        }
    });
} else {
    document.getElementById('chkRef').attachEvent('onclick', function() {
        if (this.checked) {
            document.getElementById('hor_delim').disabled = true;
        } else {
         ...