如何在.html()jQuery中实现PHP Parser以获得实时预览输入文本

Question

我正试图为我创建的文本编辑器创建一个实时预览，但我还没能想出一种方法来解析预览div中的文本，这样它就可以将BBCodes标记(如[b][/b](更改为HTML标记。

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:我需要的是将在文本区域(#ECEditor(中输入的文本转换为HTML，该文本后来被放置在div(.prreviewDocument文本(中。我已经有了一个PHP函数(称为"BBCode2HTML(("(它将BBCode转换为HTML(如[b]Hi[/b]->Hi(，但我不知道如何将该函数实现到创建"；实时预览输入"(

Answer 1

我们可以用HTML和替换那些BBCodes标签

$('#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>

第二种方法是通过ajax将输入的值发送到后端，并使用PHPpreg_replace。

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