JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head lang="pl">
    <meta charset="UTF-8">
    <title></title>
    <link type="text/css" href="css/bootstrap.min.css" rel="stylesheet">
    <link type="text/css" href="css/main.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
    <div class="popover-title">
        <p class="h1"> Dzielenie wyrazów na listy. </p>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="col-md-6">
            <p class="h3">Podaj tekst do podzielenia: </p>
            <form>
                <textarea id="input" placeholder="Wpisz tekst..." class="form-control" rows="10"></textarea>
                <button class="btn-lg btn">Konwertuj</button>
                <div class="checkbox checkbox-inline">
                    <label>
                        <input type="checkbox" id="space" value=" ">Spacja
                    </label>
                    <label>
                        <input type="checkbox" id="comma" value=",">Przecinek
                    </label>
                    <label>
                        <input type="checkbox" id="dot" value="." checked>Kropka
                    </label>
                </div>
            </form>
        </div>
        <div class="col-md-6">
            <div>
                <p class="h2">Rezultat: </p>
                <form>
                <textarea readonly id="result"></textarea>
                </form>
            </div>
        </div>
    </div>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>

CSS

#result {
    height: 200px;
    width: 100%;
    display: block;
    padding: 9.5px;
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.42857143;
    color: #333;
    word-break: break-all;
    word-wrap: break-word;
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    border-radius: 4px;
}
textarea {
    resize: none;
}
.btn {
    float: right;
    margin-top: -50px;
    margin-right: 5px;
}

JavaScript

/**
 * Created by mati on 2015-02-02.
 */
var list;
var text;
var start = function () {
    'use strict';
    $('.btn').on('click', function (e) {
        e.preventDefault();
        list = [];
        text = $('#input').val();
        var result = '';
        $('.checkbox > label > *').each(function(index,item){
            if($(item).is(':checked')){
                list.push(item.value);
            }
        });
        for (var i = 0; i < list.length; i++) {
            var arg = new RegExp((list[i]), 'g');
            text = split(text, arg);
        }
        $('#result').text(text);
    });
    $('#result').on('click', function () {
        $(this).select();
    });
};
var split = function (text, arg) {
    'use strict';
        return text.replace(arg, '\n');
};
$(document).ready(start());