如何使用 JavaScript 在从 textarea 提取的文本中保留换行符

Question

我使用<input type='textarea'>创建了一个评论输入框和一个显示评论的部分。 我创建了一个 javascript 程序，用于在单击提交时获取在 Textarea 中键入的文本并在审阅部分显示。 问题是显示的文本没有在 textarea 中给出的换行符。 我想在评论部分以完全相同的方式显示文本以及换行符。 Javascript 代码为：

function addcommentsFunc() {
let textarea=document.querySelector(".comment-textarea");
let commenttext = textarea.value;
commenttext= commenttext.replace("\r\n", "\\r\\n");
console.log(commenttext);
document.querySelector("#outer_review_container").innerHTML = `
  <div class="comments-container">
    <h3>Reviews</h3>
    <div class="posted-comments-container">
      <ul class="show-comments">
        <li><h4>By ${user_name}</h4>
            <div class="review-para-container">
              <p class="review-para" onclick="paraclamp(this)">${commenttext}</p>
            </div>
        </li>
      </ul>
    </div>
  </div>`;

}

输入是这样的：

输入文本的截图

一件事是，如果我使用console.log(commenttext); 我得到带有换行符的 output 但与 html 不同。 html output是这样的：

我也试过commenttext.replace("\r\n", "<br>")但它显示
就像在 web 页面上一样。

呈现的文本截图

我希望我清楚地描述了我的问题。 任何帮助将不胜感激

Answer 1

如果您使用innerText ，它似乎保留了空格。

 p.innerText = "Hello I have\nsome new\nlines\n\n:D";

 <p id="p"></p>

我建议避免使用innerHTML ，尤其是当您使用它来注入用户提供的内容时。