JSFiddle - React, Tailwind, and code Playground

by Robbie Averill

HTML

<div id="preview"></div>

<textarea>Hello world!</textarea>

CSS

#preview {
    background-color: #ccc;
    width: 100%;
    height: 100px;
}

textarea {
    width: 100%;
    height: 100px;
}

JavaScript

// The array of regex patterns to look for
$format_search =  [
    /\[b\](.*?)\[\/b\]/ig,
    /\[i\](.*?)\[\/i\]/ig,
    /\[u\](.*?)\[\/u\]/ig
]; // note: NO comma after the last entry

// The matching array of strings to replace matches with
$format_replace = [
    '<strong>$1</strong>',
    '<em>$1</em>',
    '<span style="text-decoration: underline;">$1</span>'
];

$('textarea').on('keyup', function() {
    var preview = $(this).val().trim();
    // Perform the actual conversion
    for (var i = 0; i < $format_search.length; i++) {
        preview = preview.replace($format_search[i], $format_replace[i]);
    }
    $('#preview').html(preview);
        
});