random-javascript-goodies/arrayMethods.html at master · Kevin-Kayser/random-javascript-goodies · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<html>
<head></head>
<body>
    <h2>Comma seperated list</h2>
    <p></p>
    <div class="split-grid">
        <fieldset>
            <legend>Seperator</legend>
            <input type="radio" name="seperator" value="newLine" checked="checked"> New Line<br>
            <input type="radio" name="seperator" value=";"> Semi-colon ;<br>
            <input type="radio" name="seperator" value="_"> Underscore _

        </fieldset>
        <fieldset>
            <legend>Surround with</legend>
            <input type="radio" name="surroundWith" value="Nothing" checked="checked"> Nothing<br>
            <input type="radio" name="surroundWith" value="'"> 'Single Quote'<br>
            <input type="radio" name="surroundWith" value="&quot;"> "Double Quote"

        </fieldset>

    </div>

    <div class="split-grid">
    <div>
        <h3>Enter your list</h3>
        <textarea name="ListToCommaList" id="ListToCommaList" cols="30" rows="10">
            554563
            554568
            554578
            554572
            554567
            554562
            554580
            554584
            554832
            554844
            554838
            554819
            554581
            554850
            554846
            554849
            554585
            554564
            554569
            554575
            554828
            554573
            554816
            554848
        </textarea>
    </div>
    <div>
        <h3>Results</h3>
        <textarea Id="ListToCommaListResults" readonly rows="10"></textarea>
    </div>

</div>


    <hr />

</body>
<script>
function listToCommaListString(stringList, seperator, joinWith, surroundWith) {
    if(seperator === 'newLine') {
        seperator = '\n';
    }

    if(surroundWith === 'Nothing') {
        surroundWith = '';
    }
    var splitAndTrim = stringList
                        .split(seperator)
                        .map(s => `${surroundWith}${s.trim()}${surroundWith}`)
    var redoArray = splitAndTrim.join(joinWith);
    var reduceToSingleString = redoArray;

    return `${reduceToSingleString}`;
}

function initializeListToCommaListEvent(event) {
    if (event.isComposing || event.keyCode === 229) {
            return;
        }

        var listToCommaListResults = document.getElementById('ListToCommaListResults');
        var selectedSeperator = document.querySelector('input[name="seperator"]:checked').value;
        var surroundWith = document.querySelector('input[name="surroundWith"]:checked').value;

        listToCommaListResults.value = listToCommaListString(event.srcElement.value, selectedSeperator, ',', surroundWith);
}

(function() {
    var listToCommaList = document.getElementById('ListToCommaList');

    listToCommaList.addEventListener('keyup', initializeListToCommaListEvent);
})();

</script>

<style>
.split-grid {
    display: grid;
    grid-template-columns: auto auto;
}

.split-grid > div > textarea {
    width: 100%;
}


</style>

</html>