JSFiddle - React, Tailwind, and code Playground

by Kehoru

HTML

<textarea name="" id="textareainput" cols="30" rows="10"><strong>Bienvenue</strong> [b]Welcome[/b]<br />
[code][b]Bienvenue[/b] <strong>welcome</strong>[/code]<br />
d
e
[code]let's [b]test[/b] <em>something</em>[/code]
seems to work
[code]let's [i]try[/i] <strong>again</strong>[/code]
</textarea>

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

<div class="preview"></div>
<div class="rawpreview" style="display: none;"></div>

CSS

test {
  background-color: blue;
  border: 1px dotted red;
  padding: 3px;
}

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);
x = 0;
var code = $('.rawpreview').text().match(/\[code](.*)\[\/code\]/);
var el = $(code);

$('.preview test').each(function() {
$(this).eq(0 + x).text(el[1 + x]);
x = x + 1;
});

});