Блог

Я пытаюсь создать предварительный просмотр в реальном времени для текстового редактора, который я создал, но я не смог придумать способ синтаксического анализа текста внутри 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-text), в HTML. У меня уже есть функция PHP (называемая «BBCode2HTML ()»), которая преобразует BBCode в HTML (например, [b] Hi [/b] —> Hi), но я не знаю, как реализовать эту функцию в jQuery, которая создает форму «ввода предварительного просмотра в реальном времени».:(

Мы можем заменить эти теги BBCodes тегами HTML

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