How to implement PHP Parser into .html() jQuery for a live preview input text

Question

I'm trying to create a live preview for the text editor I've create, but I haven't being able to come up with a way to parser the text inside the preview div so it would change BBCodes tags (like [b][/b]) into HTML ones.

https://jsfiddle.net/ElenaMcDowell/5hzndj7v/3/

<div class="previewDocument-box">
    <h1>Preview</h1>
    <div class="previewDocument-text"></div>
</div>

<textarea id="ECEditor" class="editor-textarea" style="height: 200px;" name="editor-text"></textarea>

<script>
    $('#ECEditor').on('input', function() {
        var ECEtext = $(this).val();
        $('.previewDocument-text').html(ECEtext);
    });
</script>

EDIT: What I need is to convert the text entered in the textarea (#ECEditor), and which is later placed in a div (.previewDocument-text), into HTML. I have already a PHP function ( called "BBCode2HTML()" ) that converts BBCode to HTML (Like [b]Hi[/b] ---> Hi), but I don't know how to implement that function into the jQuery that creates a form of "live preview input". :(

Answer 1

We can replace those BBCodes tags with HTML ones

$('#ECEditor').on('input', function() {
     var text = $(this).val();
     var bb =  [
        /\[b\](.*?)\[\/b\]/ig,
        /\[i\](.*?)\[\/i\]/ig,
        /\[u\](.*?)\[\/u\]/ig
    ];
    
    var bb_html = [
        '<b>$1</b>',
        '<em>$1</em>',
        '<u>$1</u>'
    ];
 
    for (var i =0;i<bb.length;i++) {
      text = text.replace(bb[i], bb_html[i]);
    }
     $('.previewDocument-text').html(text);
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="previewDocument-box">
    <h1>Preview</h1>
    <div class="previewDocument-text"></div>
</div>
<textarea id="ECEditor" class="editor-textarea" style="height: 200px;" name="editor-text"></textarea>

Second method will be to send the entered value to backend through ajax and use PHP's preg_replace.

preg_replace(['/[b]/i', '/[\/b]/i'], ['<b>', '</b>'], $text);