Javascript cara membagi baris baru

102

Saya menggunakan jquery, dan saya memiliki textarea. Ketika saya mengirimkan dengan tombol saya, saya akan memberi tahu setiap teks yang dipisahkan oleh baris baru. Bagaimana cara membagi teks saya ketika ada baris baru?

  var ks = $('#keywords').val().split("\n");
  (function($){
     $(document).ready(function(){
        $('#data').submit(function(e){
           e.preventDefault();
           alert(ks[0]);
           $.each(ks, function(k){
              alert(k);
           });
        });
     });
  })(jQuery);

contoh masukan:

Hello
There

Hasil yang saya inginkan adalah:

alert(Hello); and
alert(There)
oknoorap
sumber

Jawaban:

89

Coba inisialisasi ksvariabel di dalam fungsi submit Anda.

  (function($){
     $(document).ready(function(){
        $('#data').submit(function(e){
           var ks = $('#keywords').val().split("\n");
           e.preventDefault();
           alert(ks[0]);
           $.each(ks, function(k){
              alert(k);
           });
        });
     });
  })(jQuery);
John Hartsock
sumber
2
alert (k) hanya memberi tahu nomor urut, bukan nilainya. Anda harus waspada (ks [k])
HBlackorby
2
@hblackorby Komentar Anda, meskipun relevan, agak tidak terdengar karena masalah utama OP di sini adalah ruang lingkup dan inisialisasi variabelnya "ks"
John Hartsock
90

Anda harus mengurai baris baru apa pun platformnya (sistem operasi) Pemisahan ini bersifat universal dengan ekspresi reguler. Anda dapat mempertimbangkan untuk menggunakan ini:

var ks = $('#keywords').val().split(/\r?\n/);

Misalnya

"a\nb\r\nc\r\nlala".split(/\r?\n/) // ["a", "b", "c", "lala"]
Adi Azarya
sumber
49

Harus

yadayada.val.split(/\n/)

Anda mengirimkan string literal ke perintah split, bukan regex.

Marc B
sumber
4
"\n"dan /\n/dua hal yang SEPENUHNYA berbeda di JS. "= string, /= regex.
Marc B
25
Ya, tapi apa perbedaan efektifnya? Jangan "\n"dan /\n/cocokkan hal yang sama?
Scott Stafford
22
Baik "\ n" dan / \ n / akan bekerja hampir sama, tetapi bergantung pada sumber yang Anda pisahkan, sesuatu seperti val.split (/ [\ r \ n] + /) mungkin lebih baik. Jika sumber Anda memiliki pemisah baris "\ r \ n" maka pemisahan pada "\ n" meninggalkan "\ r" di akhir yang dapat menyebabkan masalah.
xtempore
30

Karena Anda sedang menggunakan textarea, Anda mungkin menemukan \ n atau \ r (atau \ r \ n) untuk jeda baris. Jadi, yang berikut ini disarankan:

$('#keywords').val().split(/\r|\n/)

ref: periksa apakah string berisi jeda baris

Raptor
sumber
29
atau, lebih khusus lagi, /\r?\n/... Saya pikir menggunakan |(atau) akan menyisipkan hasil kosong untuk akhiran baris CRLF.
Dusty
Anda tidak akan melihat jeda baris hanya CR ( \r) di mana pun di web modern. Tempat terakhir di mana mereka banyak digunakan adalah di versi Mac OS kuno dari hampir 20 tahun yang lalu.
Ilmari Karonen
8

Hanya

var ks = $('#keywords').val().split(/\r\n|\n|\r/);

akan bekerja dengan sempurna.

Pastikan \r\nditempatkan di depan string RegExp , karena itu akan dicoba terlebih dahulu.

Jack Ting
sumber
Di gakhir regex tidak diperlukan
Yetti99
4

Cara termudah dan teraman untuk memisahkan string menggunakan baris baru, apa pun formatnya (CRLF, LFCR, atau LF), adalah dengan menghapus semua karakter carriage return dan kemudian memisahkan karakter baris baru ."text".replace(/\r/g, "").split(/\n/);

Memastikan bahwa ketika Anda memiliki baris baru terus menerus (yaitu \r\n\r\n, \n\r\n\r, atau \n\n) hasilnya akan selalu sama.

Dalam kasus Anda, kodenya akan terlihat seperti:

(function ($) {
    $(document).ready(function () {
        $('#data').submit(function (e) {
            var ks = $('#keywords').val().replace(/\r/g, "").split(/\n/);
            e.preventDefault();
            alert(ks[0]);
            $.each(ks, function (k) {
                alert(k);
            });
        });
    });
})(jQuery);

Berikut beberapa contoh yang menunjukkan pentingnya metode ini:

var examples = ["Foo\r\nBar", "Foo\r\n\r\nBar", "Foo\n\r\n\rBar", "Foo\nBar\nFooBar"];

examples.forEach(function(example) {
  output(`Example "${example}":`);
  output(`Split using "\n": "${example.split("\n")}"`);
  output(`Split using /\r?\n/: "${example.split(/\r?\n/)}"`);
  output(`Split using /\r\n|\n|\r/: "${example.split(/\r\n|\n|\r/)}"`);
  output(`Current method: ${example.replace(/\r/g, "").split("\n")}`);
  output("________");
});

function output(txt) {
  console.log(txt.replace(/\n/g, "\\n").replace(/\r/g, "\\r"));
}

nick zoum
sumber
3
  1. Memindahkan var ks = $('#keywords').val().split("\n"); dalam penangan acara
  2. Gunakan alert(ks[k])sebagai gantialert(k)

  (function($){
     $(document).ready(function(){
        $('#data').submit(function(e){
           e.preventDefault();
           var ks = $('#keywords').val().split("\n");
           alert(ks[0]);
           $.each(ks, function(k){
              alert(ks[k]);
           });
        });
     });
  })(jQuery);

Demo

amit_g
sumber
1

Javascript Good'ol:

 var m = "Hello World";  
 var k = m.split(' ');  // I have used space, you can use any thing.
 for(i=0;i<k.length;i++)  
    alert(k[i]);  
check123
sumber
0

Masalahnya adalah saat Anda menginisialisasi ks, filevalue belum disetel.

Anda perlu mengambil nilai saat pengguna mengirimkan formulir. Jadi, Anda perlu menginisialisasi di ksdalam fungsi callback

(function($){
   $(document).ready(function(){
      $('#data').submit(function(e){
      //Here it will fetch the value of #keywords
         var ks = $('#keywords').val().split("\n");
         ...
      });
   });
})(jQuery);
steveyang.dll
sumber
0

Berikut adalah contoh dengan console.logalih - alih alert(). Lebih nyaman :)

var parse = function(){
  var str = $('textarea').val();
  var results = str.split("\n");
  $.each(results, function(index, element){
    console.log(element);
  });
};

$(function(){
  $('button').on('click', parse);
});

Anda bisa mencobanya di sini

ValeriiVasin
sumber
-1

(function($) {
  $(document).ready(function() {
    $('#data').click(function(e) {
      e.preventDefault();
      $.each($("#keywords").val().split("\n"), function(e, element) {
        alert(element);
      });
    });
  });
})(jQuery);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<textarea id="keywords">Hello
World</textarea>
<input id="data" type="button" value="submit">

ankitkanojia
sumber
1
pendekatan ini tercakup dengan baik oleh jawaban yang ada
KyleMit
@KyleMit ya, saya melalui jawaban tersebut, kemungkinan besar jawaban serupa karena konsep dasar javascript, tetapi saya fokus atau perhatian dengan baris kode itulah sebabnya saya memposting jawaban ini ...
ankitkanojia