JavaScript - 在特定条件下更新 <textarea> 值并将其附加到 <div>

Question

我p在 a 后面附加了一个 pagaraph ( ) div，它显示了<textarea>值，并且效果很好。

它<textarea>应该是页面的一部分，允许用户向文本内容添加新行，就像我们<br>在textarea.
但由于他们不知道该怎么做，我试图通过以下方式让他们变得容易：

（输入加号两次 ++或按键盘上的 Enter）

两者都<br>应该在键入时自动添加标签(onkeyup)...

var textarea = document.getElementById('textarea');
var textareaPreview = document.querySelector('.textarea-preview');
var currentText;

textarea.onkeyup = function(){
    currentText = textarea.value;
    var previewAsString = "<p class='p-preview'>" + currentText + "</p>" 
    textareaPreview.innerHTML = previewAsString;
};

textarea {
  width: 300px;
  height: 80px;
  resize: vertical;
}

<div class="block">
    <textarea id="textarea" placeholder="Type here.."></textarea>
</div>

<div class="block">
    <div class="textarea-preview"></div>
</div>

Answer 1

听起来您所需要的只是将++换行符替换为<br>：

var textarea = document.getElementById('textarea');
var textareaPreview = document.querySelector('.textarea-preview');
var currentText;

textarea.onkeyup = function(){
    currentText = textarea.value;
    var previewAsString = "<p class='p-preview'>" + currentText.replace(/\+\+|\n/g, '<br>') + "</p>" 
    textareaPreview.innerHTML = previewAsString;
};

textarea {
  width: 300px;
  height: 80px;
  resize: vertical;
}

<div class="block">
    <textarea id="textarea" placeholder="Type here.."></textarea>
</div>

<div class="block">
    <div class="textarea-preview"></div>
</div>