Làm cách nào để giữ ngắt dòng khi nhận văn bản từ một vùng văn bản?

Tôi đang nhận được giá trị trong một vùng văn bản khi người dùng nhấn gửi. Sau đó, tôi lấy giá trị này và đặt nó ở nơi khác trên trang. Tuy nhiên, khi tôi làm điều này, nó làm mất các ký tự dòng mới khiến đầu ra khá xấu.

Đây là văn bản mà tôi đang truy cập:

<textarea id="post-text" class="form-control" rows="3" placeholder="What's up?" required></textarea>

Đây là mã JavaScript truy cập bài đăng và phiên âm nó.

var post = document.createElement('p');
var postText = document.getElementById('post-text').value;
post.append(postText);
var card = document.createElement('div');
card.append(post);
var cardStack = document.getElementById('#card-stack');
cardStack.prepend(card);

Khi đầu vào là một cái gì đó như:

Lịch trình nhóm:

Thứ Ba thực hành @ Tầng 5 (8 giờ tối - 11 giờ tối)

Thứ 5 tập tại tầng 5 (8 giờ tối - 11 giờ tối)

Chủ nhật thực hành @ (9 giờ tối - 12 giờ sáng)

Đầu ra là:

Lịch học nhóm: Thứ 3 tập @ Tầng 5 (8 giờ tối - 11 giờ tối) Thứ 5 luyện tập @ Tầng 5 (8 giờ tối - 11 giờ tối) Chủ nhật luyện tập @ (9 giờ tối - 12 giờ sáng)

Vậy có cách nào để bảo toàn ngắt dòng không?

Giải pháp đơn giản nhất là chỉ cần tạo kiểu cho phần tử bạn đang chèn văn bản vào bằng thuộc tính CSS sau:

white-space: pre-wrap;

Thuộc tính này làm cho khoảng trắng và dòng mới trong các phần tử phù hợp được xử lý giống như bên trong a <textarea>. Nghĩa là, khoảng trắng liên tiếp không được thu gọn và các dòng bị ngắt ở các dòng mới rõ ràng (nhưng cũng được bao bọc tự động nếu chúng vượt quá chiều rộng của phần tử).

Do một số câu trả lời được đăng ở đây cho đến nay dễ bị chèn HTML (ví dụ: vì họ gán đầu vào của người dùng không thoát cho innerHTML) hoặc có lỗi, hãy để tôi đưa ra một ví dụ về cách thực hiện điều này một cách an toàn và chính xác, dựa trên mã gốc của bạn:

document.getElementById('post-button').addEventListener('click', function () {
  var post = document.createElement('p');
  var postText = document.getElementById('post-text').value;
  post.append(postText);
  var card = document.createElement('div');
  card.append(post);
  var cardStack = document.getElementById('card-stack');
  cardStack.prepend(card);
});

#card-stack p {
  background: #ddd;
  white-space: pre-wrap;  /* <-- THIS PRESERVES THE LINE BREAKS */
}
textarea {
  width: 100%;
}

<textarea id="post-text" class="form-control" rows="8" placeholder="What's up?" required>Group Schedule:

Tuesday practice @ 5th floor (8pm - 11 pm)

Thursday practice @ 5th floor (8pm - 11 pm)

Sunday practice @ (9pm - 12 am)</textarea><br>
<input type="button" id="post-button" value="Post!">
<div id="card-stack"></div>

Lưu ý rằng, giống như mã gốc của bạn, đoạn mã ở trên sử dụng append()và prepend(). Tại thời điểm viết bài này, những chức năng đó vẫn được coi là thử nghiệm và không được hỗ trợ đầy đủ bởi tất cả các trình duyệt. Nếu bạn muốn an toàn và vẫn tương thích với các trình duyệt cũ hơn, bạn có thể thay thế chúng khá dễ dàng như sau:

• element.append(otherElement)có thể được thay thế bằng element.appendChild(otherElement);
• element.prepend(otherElement)có thể được thay thế bằng element.insertBefore(otherElement, element.firstChild);
• element.append(stringOfText)có thể được thay thế bằng element.appendChild(document.createTextNode(stringOfText));
• element.prepend(stringOfText)có thể được thay thế bằng element.insertBefore(document.createTextNode(stringOfText), element.firstChild);
• như một trường hợp đặc biệt, nếu elementtrống, cả hai element.append(stringOfText)và element.prepend(stringOfText)chỉ có thể được thay thế bằng element.textContent = stringOfText.

Đây là đoạn mã tương tự như trên, nhưng không sử dụng append()hoặc prepend():

document.getElementById('post-button').addEventListener('click', function () {
  var post = document.createElement('p');
  var postText = document.getElementById('post-text').value;
  post.textContent = postText;
  var card = document.createElement('div');
  card.appendChild(post);
  var cardStack = document.getElementById('card-stack');
  cardStack.insertBefore(card, cardStack.firstChild);
});

#card-stack p {
  background: #ddd;
  white-space: pre-wrap;  /* <-- THIS PRESERVES THE LINE BREAKS */
}
textarea {
  width: 100%;
}

<textarea id="post-text" class="form-control" rows="8" placeholder="What's up?" required>Group Schedule:

Tuesday practice @ 5th floor (8pm - 11 pm)

Thursday practice @ 5th floor (8pm - 11 pm)

Sunday practice @ (9pm - 12 am)</textarea><br>
<input type="button" id="post-button" value="Post!">
<div id="card-stack"></div>

Ps. Nếu bạn thực sự muốn làm điều này mà không sử dụng thuộc tính CSS white-space, một giải pháp thay thế sẽ là thay thế rõ ràng bất kỳ ký tự dòng mới nào trong văn bản bằng <br>các thẻ HTML. Phần khó khăn là, để tránh đưa vào các lỗi tinh vi và các lỗ hổng bảo mật tiềm ẩn, trước tiên bạn phải thoát khỏi bất kỳ siêu ký tự HTML nào (tối thiểu &và <) trong văn bản trước khi thực hiện thay thế này.

Có lẽ cách đơn giản và an toàn nhất để làm điều đó là để trình duyệt xử lý việc thoát HTML cho bạn, như sau:

var post = document.createElement('p');
post.textContent = postText;
post.innerHTML = post.innerHTML.replace(/\n/g, '<br>\n');

document.getElementById('post-button').addEventListener('click', function () {
  var post = document.createElement('p');
  var postText = document.getElementById('post-text').value;
  post.textContent = postText;
  post.innerHTML = post.innerHTML.replace(/\n/g, '<br>\n');  // <-- THIS FIXES THE LINE BREAKS
  var card = document.createElement('div');
  card.appendChild(post);
  var cardStack = document.getElementById('card-stack');
  cardStack.insertBefore(card, cardStack.firstChild);
});

#card-stack p {
  background: #ddd;
}
textarea {
  width: 100%;
}

<textarea id="post-text" class="form-control" rows="8" placeholder="What's up?" required>Group Schedule:

Tuesday practice @ 5th floor (8pm - 11 pm)

Thursday practice @ 5th floor (8pm - 11 pm)

Sunday practice @ (9pm - 12 am)</textarea><br>
<input type="button" id="post-button" value="Post!">
<div id="card-stack"></div>

Lưu ý rằng, mặc dù điều này sẽ sửa lỗi ngắt dòng, nhưng nó sẽ không ngăn các khoảng trắng liên tiếp bị thu gọn bởi trình kết xuất HTML. Có thể (đại loại) mô phỏng điều đó bằng cách thay thế một số khoảng trắng trong văn bản bằng các khoảng trắng không ngắt, nhưng thành thật mà nói, điều đó trở nên khá phức tạp đối với một thứ có thể được giải quyết bằng một dòng CSS.

Vùng chứa đích phải có white-space:prekiểu dáng. Hãy thử nó dưới đây.

<script>
function copycontent(){
 var content = document.getElementById('ta').value;
 document.getElementById('target').innerText = content;
}
</script>
<textarea id='ta' rows='3'>
  line 1
  line 2
  line 3
</textarea>
<button id='btn' onclick='copycontent();'>
Copy
</button>
<p id='target' style='white-space:pre'>

</p>

function get() {
  var arrayOfRows = document.getElementById("ta").value.split("\n");
  var docfrag = document.createDocumentFragment();
  
  var p = document.getElementById("result");
  while (p.firstChild) {
    p.removeChild(p.firstChild);
  }
  
  arrayOfRows.forEach(function(row, index, array) {
    var span = document.createElement("span");
    span.textContent = row;
    docfrag.appendChild(span);
    if(index < array.length - 1) {
      docfrag.appendChild(document.createElement("br"));
    }
  });

  p.appendChild(docfrag);
}

<textarea id="ta" rows=3></textarea><br>
<button onclick="get()">get</button>
<p id="result"></p>

Bạn có thể chia các hàng textarea thành mảng:

var arrayOfRows = postText.value.split("\n");

Sau đó, sử dụng nó để tạo, có thể, nhiều thẻ p hơn ...

Đây là một ý tưởng vì bạn có thể có nhiều dòng mới trong một hộp văn bản:

 var text=document.getElementById('post-text').value.split('\n');
 var html = text.join('<br />');

Giá trị HTML này sẽ giữ nguyên dòng mới. Hi vọng điêu nay co ich.

Bạn có thể đặt widthdiv bằng cách sử dụng Javascript và thêm white-space:pre-wrapvào p tag, điều này sẽ ngắt nội dung textarea của bạn ở cuối mỗi dòng.

document.querySelector("button").onclick = function gt(){
var card = document.createElement('div');
card.style.width = "160px";
card.style.background = "#eee";
var post = document.createElement('p');
var postText = document.getElementById('post-text').value;
post.style.whiteSpace = "pre-wrap";
card.append(post);
post.append(postText);
document.body.append(card);
}

<textarea id="post-text" class="form-control" rows="3" placeholder="What's up?" required>
Group Schedule:

Tuesday practice @ 5th floor (8pm - 11 pm)

Thursday practice @ 5th floor (8pm - 11 pm)

Sunday practice @ (9pm - 12 am)</textarea>
<br><br>
<button>Copy!!</button>

Tôi cho rằng bạn không muốn nội dung văn bản của mình được phân tích cú pháp dưới dạng HTML. Trong trường hợp này, bạn chỉ có thể đặt nó là văn bản rõ ràng để trình duyệt không coi nó là HTML và không xóa các dòng mới Không cần CSS hoặc xử lý trước.

<script>
function copycontent(){
 var content = document.getElementById('ta').value;
 document.getElementById('target').innerText = content;
}
</script>
<textarea id='ta' rows='3'>
  line 1
  line 2
  line 3
</textarea>
<button id='btn' onclick='copycontent();'>
Copy
</button>
<p id='target'></p>

Các câu hỏi tương tự ở đây

phát hiện ngắt dòng trong đầu vào vùng văn bản

phát hiện ngắt dòng trong vùng văn bản

Bạn có thể thử điều này:

var submit = document.getElementById('submit');

submit.addEventListener('click', function(){
var textContent = document.querySelector('textarea').value;
  
document.getElementById('output').innerHTML = textContent.replace(/\n/g, '<br/>');
  

});

<textarea cols=30 rows=10 >This is some text
this is another text

Another text again and again</textarea>
<input type='submit' id='submit'>


<p id='output'></p>

document.querySelector('textarea').value;sẽ lấy nội dung văn bản của vùng văn bản và textContent.replace(/\n/g, '<br/>')sẽ tìm tất cả các ký tự dòng mới trong mã nguồn /\n/gtrong nội dung và thay thế nó bằng dấu ngắt dòng html <br/>.

Một tùy chọn khác là sử dụng <pre> thẻ html . Xem bản demo bên dưới

var submit = document.getElementById('submit');

submit.addEventListener('click', function(){

  var content = '<pre>';
  
  var textContent = document.querySelector('textarea').value;
  
  content += textContent;
  
  content += '</pre>';

  document.getElementById('output').innerHTML = content;

});

<textarea cols=30 rows=10>This is some text
this is another text

Another text again and again </textarea>
<input type='submit' id='submit'>

<div id='output'> </div>