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

【问题标题】：JavaScript - updating <textarea> value under certian conditions and append it to a <div>JavaScript - 在特定条件下更新 <textarea> 值并将其附加到 <div>
【发布时间】：2020-11-04 22:53:29
【问题描述】：

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

<textarea> 应该是页面的一部分，允许用户在文本内容中添加新行，就像我们在 textarea 中键入 <br> 的新行一样。
但由于他们不知道该怎么做，我试图通过以下方式让他们轻松：

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

两者都应该在输入(onkeyup)时自动添加<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 + "</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>

【问题讨论】：

标签： javascript html css

【解决方案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>

【讨论】：

非常感谢！所以我在想如果我有更多的条件？就像两个开始之间的文本是粗体等... Lke 如何在 Stackoverflow 上提出问题，仅针对基本内容，3 4 个功能：新行、文本粗体、斜体、em。
它有同样的东西，只是逻辑复杂得多。查看 Markdown 解析：google.com/search?q=markdown+parsing