Cách đọc từng dòng của thẻ HTML vùng văn bản


91

Tôi có một vùng văn bản mà mỗi dòng chứa giá trị Số nguyên như sau

      1234
      4321
     123445

Tôi muốn kiểm tra xem người dùng có thực sự sử dụng các giá trị hợp lệ chứ không phải một số giá trị vui nhộn như sau

      1234,
      987l;

Đối với điều đó, tôi cần phải đọc từng dòng của vùng văn bản và xác nhận điều đó. Làm cách nào tôi có thể đọc từng dòng của một vùng văn bản bằng javascript?


2
Tôi không chắc chắn 100% (do đó là nhận xét) nhưng nó có thể liên quan đến việc tách văn bản ở mỗi "\ n"
Pluckerpluck

Câu trả lời:


180

Thử đi.

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
}

14
Thay vì sử $('textarea').val()dụng sử dụng document.getElementById('textareaId').innerHTMLnó.
ShankarSangoli

3
tôi nhớ có một phương pháp khác mà chúng tôi đã sử dụng. Chúng tôi đã sử dụng form.elementname hoặc một cái gì đó. Ý tôi là từ lâu trở lại đây. Cách đây 6-7 năm khi DOM còn khá mới
SoWhat

Có bạn thậm chí có thể truy cập nó bằng cách sử document.formname.textareName.value
ShankarSangoli

3
Các dòng có được đảm bảo kết thúc bằng \ n chứ không phải \ r \ n không?
Oztaco - Phục hồi Monica C.

Đối với những người ở đây vào năm 2020, tôi không thể nói chắc chắn hoạt động của trình duyệt là gì khi các nhận xét ở trên được thêm vào nhưng hiện tại Chrome không nhận dạng được document.getElementById ('textarea'). InnerHTML UNLESS nó đã được tải dưới dạng văn bản giữ chỗ trong tải ban đầu của DOM. Bạn sẽ cần sử dụng giá trị document.getElementById ('textarea'). Để truy cập vào bất kỳ văn bản nào mà người dùng đã nhập hoặc sửa đổi. Khi tải trang, văn bản trình giữ chỗ được đặt dưới dạng HTML bên trong giữa các thẻ <textareosystem </textareosystem, nhưng điều này không được sửa đổi khi người dùng thêm đầu vào.
Eric Barker

37

Điều này hoạt động mà không cần 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

5

Điều này sẽ cung cấp cho bạn tất cả các giá trị số hợp lệ trong lines. Bạn có thể thay đổi vòng lặp để xác thực, loại bỏ các ký tự không hợp lệ, v.v. - bất kỳ ký tự nào bạn muốn.

var lines = [];
$('#my_textarea_selector').val().split("\n").each(function ()
{
    if (parseInt($(this) != 'NaN')
        lines[] = parseInt($(this));
}

4
Một lưu ý chung là bạn gần như luôn muốn chuyển đối số thứ hai cho parseInt để buộc đọc dưới dạng cơ số 10 / decimal ( parseInt(this, 10)). Nếu không, zero hàng đầu dẫn đến việc giải thích như cơ sở 8 (bát phân), có thể dẫn đến một số hành vi khá kỳ lạ ...
IMSoP

5

Hai tùy chọn: không yêu cầu JQuery hoặc phiên bản JQuery

Không có JQuery (hoặc bất kỳ thứ gì khác được yêu cầu)

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])
}

Phiên bản 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])
}

Lưu ý bên, nếu bạn thích Mỗi vòng lặp mẫu là

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

4

Một regex đơn giản sẽ có hiệu quả để kiểm tra vùng văn bản của bạn:

/\s*\d+\s*\n/g.test(text) ? "OK" : "KO"
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.