Bagaimana cara menambahkan jeda baris ke teks HTML?


156

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.


Demo Codepen dengan regex dan <pre></pre>solusi yang ditampilkan di sini: codepen.io/a-guerrero/pen/grgVBo
a.guerrero.g87

Jawaban:


265

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.


7
Ini juga berfungsi untuk saya. Di jQuery Anda dapat melakukan sesuatu seperti ini: $ ('# caption'). Html ($ ('# caption'). Text (). Ganti (/ \ n \ r? / G, '<br />')) ;
DavGarcia

2
Break baris Regexp harus berupa /(\r\n|\n|\r)/gm textfixer.com/tutorials/javascript-line-breaks.php
tothemario

3
Regex yang tepat adalah /\r\n?|\n/gtanpa penangkapan, tidak ada multiline.
aMarCruz

5
Tersangka <br>salah. Untuk jeda baris universal dalam teks yang Anda inginkan \r\n. Misalnya, Peramban UC mengabaikan Situs dan \ dalam textareas. Lihat Menambahkan linebreak di area teks HTML .
Bob Stein

2
Menggunakan <br> di dalam textarea tidak berfungsi. Setidaknya tidak di Chrome, tempat saya diuji. Menggunakan \ n tampaknya berhasil. Gunakan <br> jika Anda bermaksud menyisipkan teks sebagai html murni, yaitu di luar elemen input apa pun.
Snorvarg

24

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.


18

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.


menggunakan "\\ n" bekerja untuk saya di Windows dan saya menganggap itu akan berfungsi dengan baik di sistem Linux.
Samih A


6

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>


3

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.


3

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. :-)


0

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


0

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>
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.