如何在 .html（） jQuery 中实现 PHP 解析器以获取实时预览输入文本-解网

问：

我正在尝试为我创建的文本编辑器创建实时预览，但我无法想出一种方法来解析预览 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>

编辑：我需要的是将文本区域（#ECEditor）中输入的文本转换为 HTML，然后将其放置在 div （.previewDocument-text）中。我已经有一个PHP函数（称为“BBCode2HTML（）”），可以将BBCode转换为HTML（如[b]Hi[/b]--->Hi），但我不知道如何将该函数实现到jQuery中，以创建“实时预览输入”的形式。:(

php jquery 解析 html-parsing

$('#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将输入的值发送到后端，并使用PHP的 preg_replace。

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

上一个：将以@符号开头的单词替换为jQuery

下一个：这个 Ruby 错别字解析是什么？

如何在 .html（） jQuery 中实现 PHP 解析器以获取实时预览输入文本

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

评论