JSFiddle - React, Tailwind, and code Playground

HTML

<div class="row">
    <textarea id="content"></textarea>
    Content
</div>
<div class="row">
    <input id="message" type="text" />
    Message
</div>
<br />
<div class="row">
    <textarea id="result"></textarea>
    Result
</div>
<div class="row">
    <input id="rest" type="text" />
    Rest
</div>
<br />
<div class="row">
    <button id="test">Test</button>
</div>

CSS

* {
    font-family:Arial;
    font-size:12px;
}

div.row {
    overflow:hidden;
}

textarea, input {
    width:512px;
    min-width:512px;
    max-width:512px;
    border:1px #ccc solid;
    outline:0 none;
    float:left;
    margin-right:8px;
}

textarea {
    height:128px;
    min-height:128px;
}

button {
    width:128px;
    height:32px;
}

JavaScript

$('#test').click(function() {
    var text = $('#content').val();
    var message = $('#message').val().split(' ').join('');
    var offset = -1;
    $('#result').val('');

    for (var c = 0; c < message.length; ++c) {
        var pos = text.toLowerCase().indexOf(message[c].toLowerCase(), offset + 1);
        if (pos >= 0) {
            $('#result').val($('#result').val() + text.substring(offset + 1, pos));
            $('#result').val($('#result').val() + '[i]' + text.substring(pos, pos + 1) + '[/i]');
            offset = pos;
        } else {
            $('#rest').val(message.substring(c, message.length));
            break;
        }
    }

    $('#result').val($('#result').val() + text.substring(offset + 1, text.length));
});