JSFiddle - React, Tailwind, and code Playground

by octavioamu

HTML

<form action="#" method="post">
    <fieldset>
        <label for="text">Enter a comment, and a YouTube URL</label>
        <textarea id="text" name="text" placeholder="Like so: 'blah blah http://www.youtube.com/watch?v=PLs5HN7FS0w blah blah'"></textarea>
    </fieldset>
    <fieldset>
        <input type="submit" value="Submit" />
    </fieldset>
</form>

CSS

label {
    display: inline-block;
    width: 80%;
    margin: 0 auto;
}
textarea {
    display: block;
    width: 80%;
    min-height: 5em;
    margin: 0 auto;
    white-space: wrap;
}

JavaScript

$('form').submit(

function() {
    var text = $('#text').val().split(' ');
    for (i = 0; i < text.length; i++) {
        var test = text[i].indexOf('http://www.youtube.com/watch');
        if (test === 0) {
            text[i] = '[youtube=' + text[i] + ']';
        }
    }
    text = text.join(' ').trim();
    $('#text').val(text);
    return false;
});