JSFiddle - React, Tailwind, and code Playground

by Kehoru

HTML

<textarea name="" id="textareainput" cols="30" rows="10"><strong>Bienvenue</strong> [b]Welcome[/b]
[code][b]Bienvenue[/b] <strong>welcome</strong>[/code]
</textarea>

<button id="button">
test
</button>

<div class="preview"></div>
<div class="rawpreview">

</div>

JavaScript

$('#button').click(function() {
$('.preview').html( $('#textareainput').val() );
$('.rawpreview').text( $('#textareainput').val() );

var bbcodeh = $('.preview:not(test)').html().
  replace(/(\[((\/?)(b|u|i|s|sub|sup))\])/gi, '<$2>').
  replace(/\n/g, "<br />").
  replace(/(\[code\])/gi, "<test>").
  replace(/(\[\/code\])/gi, "</test>");

$('.preview').html(bbcodeh);

    var content = $('p').html().split("\[code\]$2\[\/code\]");
    var firstPart = $(this).remove(content[0]);
    var secondPart = $(this).remove(content[1]);
    $('.rawpreview').text((content + firstPart + secondPart));
});