Bagaimana cara mempertahankan jeda baris saat mendapatkan teks dari textarea?

Saya mendapatkan nilai di textarea saat pengguna mengklik kirim. Saya kemudian mengambil nilai ini dan meletakkannya di tempat lain di halaman. Namun, ketika saya melakukan ini, karakter baris baru hilang sehingga hasilnya cukup jelek.

Berikut textarea yang saya akses:

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

Berikut adalah kode JavaScript yang mengakses posting dan menyalinnya.

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);

Ketika inputnya seperti:

Jadwal Grup:

Latihan Selasa @ lantai 5 (8 malam - 11 malam)

Latihan Kamis @ lantai 5 (8 malam - 11 malam)

Latihan Minggu @ (9 malam - 12 pagi)

Outputnya adalah:

Jadwal Kelompok: Latihan Selasa @ lantai 5 (8 malam - 11 malam) Latihan Kamis @ lantai 5 (8 malam - 11 malam) Latihan Minggu @ (9 malam - 12 pagi)

Jadi, apakah ada cara untuk mempertahankan jeda baris?

Solusi termudah adalah dengan hanya memberi gaya pada elemen tempat Anda memasukkan teks dengan properti CSS berikut:

white-space: pre-wrap;

Properti ini menyebabkan spasi dan baris baru di dalam elemen yang cocok diperlakukan dengan cara yang sama seperti di dalam a <textarea>. Artinya, spasi berurutan tidak diciutkan, dan garis diputus pada baris baru yang eksplisit (tetapi juga dibungkus secara otomatis jika melebihi lebar elemen).

Mengingat bahwa beberapa jawaban yang diposting di sini sejauh ini rentan terhadap injeksi HTML (misalnya karena mereka menetapkan masukan pengguna yang tidak lolos innerHTML) atau buggy, izinkan saya memberikan contoh cara melakukannya dengan aman dan benar, berdasarkan kode asli Anda:

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>

Perhatikan bahwa, seperti kode asli Anda, cuplikan di atas menggunakan append()dan prepend(). Sampai tulisan ini dibuat, fungsi-fungsi tersebut masih dianggap eksperimental dan tidak didukung sepenuhnya oleh semua browser. Jika Anda ingin aman dan tetap kompatibel dengan browser lama, Anda dapat menggantinya dengan mudah seperti berikut:

• element.append(otherElement)bisa diganti dengan element.appendChild(otherElement);
• element.prepend(otherElement)bisa diganti dengan element.insertBefore(otherElement, element.firstChild);
• element.append(stringOfText)bisa diganti dengan element.appendChild(document.createTextNode(stringOfText));
• element.prepend(stringOfText)bisa diganti dengan element.insertBefore(document.createTextNode(stringOfText), element.firstChild);
• sebagai kasus khusus, jika elementkosong, keduanya element.append(stringOfText)dan element.prepend(stringOfText)dapat dengan mudah diganti element.textContent = stringOfText.

Berikut cuplikan yang sama seperti di atas, tetapi tanpa menggunakan append()atau 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. Jika Anda benar-benar ingin melakukan ini tanpa menggunakan white-spaceproperti CSS , solusi alternatifnya adalah mengganti secara eksplisit karakter baris baru apa pun dalam teks dengan <br>tag HTML. Bagian yang sulit adalah, untuk menghindari munculnya bug halus dan potensi celah keamanan, Anda harus terlebih dahulu keluar dari semua karakter meta HTML (minimal, &dan <) dalam teks sebelum Anda melakukan penggantian ini.

Mungkin cara termudah dan teraman untuk melakukannya adalah dengan membiarkan browser menangani pelolosan HTML untuk Anda, seperti ini:

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>

Perhatikan bahwa, meskipun ini akan memperbaiki jeda baris, ini tidak akan mencegah spasi kosong yang berurutan diciutkan oleh perender HTML. Dimungkinkan untuk (semacam) meniru itu dengan mengganti beberapa spasi putih dalam teks dengan spasi non-breaking, tapi sejujurnya, itu menjadi agak rumit untuk sesuatu yang dapat diselesaikan dengan mudah dengan satu baris CSS.

Penampung target harus memiliki white-space:pregaya. Coba di bawah ini.

<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>

Anda dapat membagi baris textarea menjadi array:

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

Kemudian gunakan untuk menghasilkan, mungkin, lebih banyak tag p ...

Berikut ini idenya karena Anda mungkin memiliki beberapa baris baru di kotak teks:

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

Nilai HTML ini akan mempertahankan baris baru. Semoga ini membantu.

Anda bisa mengatur widthdiv menggunakan Javascript dan menambahkan white-space:pre-wrapuntuk p tag, istirahat ini konten textarea Anda di akhir setiap baris.

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>

Saya kira Anda tidak ingin konten textarea Anda diurai sebagai HTML. Dalam kasus ini, Anda dapat mengaturnya sebagai teks biasa sehingga browser tidak memperlakukannya sebagai HTML dan tidak menghapus baris baru. Tidak diperlukan CSS atau praproses.

<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>

Pertanyaan serupa ada di sini

mendeteksi jeda baris di input area teks

mendeteksi jeda baris di area teks

Anda dapat mencoba ini:

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;akan mendapatkan konten teks dari textarea dan textContent.replace(/\n/g, '<br/>')akan menemukan semua karakter baris baru dalam kode sumber/\n/g di konten dan menggantinya dengan baris baru html <br/>.

Pilihan lainnya adalah menggunakan <pre> tag html . Lihat demo di bawah ini

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>