Cara membaca baris demi baris dari tag HTML area teks

93

Saya memiliki area teks di mana setiap baris berisi nilai Integer seperti berikut

      1234
      4321
     123445

Saya ingin memeriksa apakah pengguna benar-benar memasukkan nilai yang valid dan bukan beberapa nilai lucu seperti berikut

      1234,
      987l;

Untuk itu saya perlu membaca baris demi baris area teks dan memvalidasinya. Bagaimana saya bisa membaca baris demi baris dari area teks menggunakan javascript?

javascript jquery html textarea Saurabh Kumar
sumber
2
Saya tidak 100% yakin (karena itu komentarnya) tetapi ini mungkin melibatkan pemisahan teks di setiap "\ n"
Pluckerpluck
1
kemungkinan duplikat parsing area teks dalam substring berdasarkan jeda baris di Javascript
Michael Berkowski

Jawaban:

182

Coba ini.

var lines = $('textarea').val().split('\n');
for(var i = 0;i < lines.length;i++){
    //code here using lines[i] which will give you each line
}
ShankarSangoli
sumber
14
Daripada menggunakan $('textarea').val()gunakan document.getElementById('textareaId').innerHTMLitu saja.
ShankarSangoli
3
Saya ingat ada metode lain yang kami gunakan. Kami menggunakan form.elementname atau sesuatu. Maksudku sudah lama kembali. 6-7 tahun yang lalu ketika DOM masih cukup baru
SoWhat
Ya, Anda bahkan dapat mengaksesnya menggunakan document.formname.textareName.value
ShankarSangoli
3
Apakah garis dijamin diakhiri dengan \ n dan bukan \ r \ n?
Oztaco
Bagi mereka yang berada di sini pada tahun 2020, saya tidak dapat mengatakan dengan pasti apa perilaku browser ketika komentar di atas ditambahkan tetapi saat ini Chrome tidak mengenali document.getElementById ('textarea'). InnerHTML KECUALI sudah dimuat sebagai teks placeholder di pemuatan asli DOM. Anda perlu menggunakan nilai document.getElementById ('textarea'). Untuk mengakses teks apa pun yang telah dimasukkan atau dimodifikasi pengguna. Pada pemuatan halaman, teks placeholder diletakkan sebagai HTML bagian dalam antara tag <textarei> </textarei>, tetapi ini tidak diubah ketika pengguna menambahkan input.
Eric Barker
37

Ini berfungsi tanpa membutuhkan jQuery:

var textArea = document.getElementById("my-text-area");
var arrayOfLines = textArea.value.split("\n"); // arrayOfLines is array where every element is string of one line
Paul Brewczynski
sumber
5

Ini akan memberi Anda semua nilai numerik yang valid di lines. Anda dapat mengubah loop untuk memvalidasi, menghapus karakter yang tidak valid, dll - mana pun yang Anda inginkan.

var lines = [];
$('#my_textarea_selector').val().split("\n").each(function ()
{
    if (parseInt($(this) != 'NaN')
        lines[] = parseInt($(this));
}
Joe
sumber
4
Sebagai catatan umum, Anda hampir selalu ingin meneruskan argumen kedua ke parseInt untuk memaksa pembacaan sebagai basis 10 / desimal ( parseInt(this, 10)). Jika tidak, angka nol di depan mengarah pada interpretasi sebagai basis 8 (oktal), yang dapat menyebabkan beberapa perilaku yang agak aneh ...
IMSoP
5

Dua opsi: tidak diperlukan JQuery, atau versi JQuery

Tidak ada JQuery (atau apa pun yang diperlukan)

var textArea = document.getElementById('myTextAreaId');
var lines = textArea.value.split('\n');    // lines is an array of strings

// Loop through all lines
for (var j = 0; j < lines.length; j++) {
  console.log('Line ' + j + ' is ' + lines[j])
}

Versi JQuery

var lines = $('#myTextAreaId').val().split('\n');   // lines is an array of strings

// Loop through all lines
for (var j = 0; j < lines.length; j++) {
  console.log('Line ' + j + ' is ' + lines[j])
}

Catatan samping, jika Anda lebih suka forEach loop sampel adalah

lines.forEach(function(line) {
  console.log('Line is ' + line)
})
whitneyland
sumber
4

Regex sederhana seharusnya efektif untuk memeriksa area teks Anda:

/\s*\d+\s*\n/g.test(text) ? "OK" : "KO"
Sinsedrix
sumber