如何将 PHP 解析器实现为 .html() jQuery 以获取实时预览输入文本

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>

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

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></b>',
        '<em></em>',
        '<u></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);

如何将 PHP 解析器实现为 .html() jQuery 以获取实时预览输入文本

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

php

html

jquery

parsing

html-parsing