Как я могу сделать предварительный просмотр вопроса из textarea, как на переполнение стека

Question

У меня есть форма, похожая на ту, в которой я сейчас пишу:

<form>
  <div class="form-group">
      <label for="body">Body</label>
      <textarea name="body" id="body" cols="30" rows="10" class="form-control" placeholder="Your question body here"></textarea>
   </div>
</form>

И у меня есть блок html, который отображает предварительный просмотр текста:

<code><div class="question-preview border-top border-bottom pt-3 pb-3" id="question-preview">
<!--  <p>Default text question</p> -->
<!--  <pre class="prettyprint">var a = 5

->

Как я могу генерировать html в режиме реального времени из textarea # body в div # question-preview? Комментарии в блоке предварительного просмотра являются примером переноса текста и кода по умолчанию. Я не могу понять, как распознать текст по умолчанию из кода. Я думал, что могу различить guish по 4 интервалам, но мой код не работает, я пытаюсь что-то вроде этого:

<code>bodyTextarea.addEventListener('keyup', function (e) {
       e.preventDefault();
       const lines = this.value.split(/\n/);

       let code = lines
            .filter((line) => {
                if (/\s{4}/.test(line)) {
                    return line;
                 }
             })
             .reduce((accumulator, current) => {
                 return accumulator + current;
              }, '');

         // FIXME
        if (!/\s{4}/.test(lines[lines.length - 1])) {
             if (previewQuestionArea.querySelector('p')) {
                    previewQuestionArea.querySelector('p').replaceWith(`<p>${lines[lines.length - 1]}</p>`);
             } else {
                 previewQuestionArea.innerHTML = `<p>${lines[lines.length - 1]}</p>`;
               }
             } else {
                if (code !== '') {
                    previewQuestionArea.innerHTML += `<pre class="prettyprint">${code}

`; }}});

Есть идеи?

Answer 1

Использование jQuery Мы можем определить шаблон Regex и применить определенный стиль c к этому коду, когда мы найдем совпадение. В этом примере я ожидаю в качестве разделителя 3 кавычки: "" "

Для расширенного использования подсветки синтаксиса лучше выбрать библиотеку, например выделение. js или Google Prettify

$('textarea').bind('keyup change', function() {
                
var oldHtml = $(this).val();
var newHtml = oldHtml.replace(/"""(.*?)"""/g,"<span class='highlight'>$1</span>");                

$(".question-preview").empty().html(newHtml);       

            });

.highlight{
color:#B0BF1A;
background-color:#000;
}

  
      Body
            
   



<!--  <p>Default text question -->
<!--  <pre class="prettyprint">var a = 5

->