Bagaimana cara menambahkan jeda baris ke teks HTML?

Saya sedang mengedit <textarea>dengan JavaScript. Masalahnya adalah ketika saya membuat jeda baris di dalamnya, mereka tidak akan ditampilkan. Bagaimana saya bisa melakukan ini?

Saya mendapatkan nilai untuk menulis fungsi, tetapi tidak akan memberikan jeda baris.

Masalah berasal dari fakta bahwa pemecah baris ( \n\r?) Tidak sama dengan <br/>tag HTML

var text = document.forms[0].txt.value;
text = text.replace(/\r?\n/g, '<br />');

MEMPERBARUI

Karena banyak komentar dan pengalaman saya sendiri telah menunjukkan kepada saya bahwa <br> solusi ini tidak berfungsi seperti yang diharapkan di sini adalah contoh cara menambahkan baris baru ke textareapenggunaan '\ r \ n'

function log(text) {
    var txtArea ;

    txtArea = document.getElementById("txtDebug") ;
    txtArea.value +=  text + '\r\n';
}

Saya memutuskan untuk melakukan edit ini, dan bukan sebagai pertanyaan baru karena ini jawaban yang terlalu populer untuk salah atau tidak lengkap.

jika Anda menggunakan skrip java umum dan Anda perlu menetapkan string ke nilai area teks kemudian

 document.getElementById("textareaid").value='texthere\\\ntexttext'.

Anda perlu mengganti \natau < br >ke\\\n

jika tidak, itu memberi Uncaught SyntaxError: Unexpected token ILLEGALdi semua browser.

Mungkin seseorang menemukan ini berguna:

Saya punya masalah dengan jeda baris yang diteruskan dari variabel server ke variabel javascript, dan kemudian javascript menulisnya ke textarea (menggunakan binding nilai knockout.js).

solusinya adalah keluar dari jalur baru:

orginal.Replace("\r\n", "\\r\\n")

di sisi server, karena hanya dengan javascript melarikan diri tunggal tidak parsing.

Anda perlu menggunakannya \nuntuk linebreaksbagian dalamtextarea

Jika Anda ingin menampilkan teks di dalam halaman Anda sendiri, Anda dapat menggunakan <pre>tag.

document.querySelector('textarea').addEventListener('keyup', function() {
  document.querySelector('pre').innerText = this.value;
});

<textarea placeholder="type text here"></textarea>
<pre style="font-family: inherits">
The
new lines will
be respected
      and spaces too
</pre>

Baris baru hanyalah spasi putih untuk browser dan tidak akan diperlakukan berbeda dengan ruang normal (""). Untuk mendapatkan baris baru, Anda harus memasukkan <BR />elemen.

Upaya lain untuk memecahkan masalah: Ketikkan teks ke dalam textarea dan kemudian tambahkan beberapa JavaScript di balik tombol untuk mengubah karakter yang tidak terlihat menjadi sesuatu yang dapat dibaca dan membuang hasilnya ke a DIV. Itu akan memberi tahu Anda apa yang diinginkan browser Anda.

Saya memiliki textarea dengan id is #infoartist follow:

<textarea id="infoartist" ng-show="dForm" style="width: 100%;" placeholder="Tell your contacts and collectors about yourself."></textarea>

Dalam kode javascript, saya akan mendapatkan nilai textarea dan mengganti escaping baris baru (\ n \ r) dengan <br />tag, seperti:

var text = document.getElementById("infoartist").value;
text = text.replace(/\r?\n/g, '<br />');

Jadi, jika Anda menggunakan jquery (seperti saya):

var text = $("#infoartist").val();
text = text.replace(/\r?\n/g, '<br />');

Semoga ini bisa membantu Anda. :-)

Jika Anda hanya perlu mengirim nilai testarea ke server dengan jeda baris gunakan nl2br

di sini adalah hal yang saya lakukan untuk masalah yang sama yang saya miliki.

ketika saya meneruskan teks ke halaman berikutnya dalam jsp, saya membacanya sebagai textarea bukannya membaca sesuatu seperti

jadi output datang seperti yang Anda inginkan. dan untuk properti lainnya, Anda bisa menggunakan seperti di bawah ini.

<textarea style="background-color: white; border: none; width:660px;font-family: Arial, Helvetica, sans-serif; font-size:1.0em; resize:none;" name="text" cols="75" rows="15" readonly="readonly" ><s:property value="%{text}"/></textarea>