如何使用 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 ，尤其是當您使用它來注入用戶提供的內容時。