Як читати рядок за рядком HTML-тегу текстової області


93

У мене є текстова область, де кожен рядок містить ціле значення, як показано нижче

      1234
      4321
     123445

Я хочу перевірити, чи користувач дійсно вводив дійсні значення, а не деякі смішні значення, як показано нижче

      1234,
      987l;

Для цього мені потрібно прочитати рядок за рядком текстової області та перевірити це. Як я можу прочитати рядок за рядком текстової області за допомогою JavaScript?


2
Я не впевнений на 100% (звідси коментар), але це може передбачати розділення тексту на кожне "\ n"
Pluckerpluck

1
можливий дублікат розбору текстового
Michael Berkowski

Відповіді:


182

Спробуйте це.

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
Замість використання $('textarea').val()використовуйте document.getElementById('textareaId').innerHTMLсаме це.
ShankarSangoli

3
я пам’ятаю, що ми використовували інший метод. Ми використовували form.elementname або щось інше. Я маю на увазі довгий час назад. 6-7 років тому, коли DOM був зовсім новим
SoWhat

Так, ви навіть можете отримати до нього доступ за допомогою document.formname.textareName.value
ShankarSangoli

3
Чи гарантовано рядки закінчуються на \ n, а не \ r \ n?
Озтако - відновити Моніку К.

Для тих, хто прибуває тут у 2020 році, я не можу точно сказати, якою була поведінка браузера, коли були додані вищезазначені коментарі, але наразі Chrome не розпізнає document.getElementById ('textarea'). InnerHTML, ДОКЛИ він вже завантажений як текст-заповнювач в початковому завантаженні DOM. Вам потрібно буде використовувати значення document.getElementById ('textarea'). Для доступу до будь-якого тексту, який користувач ввів або змінив. При завантаженні сторінки текст заповнювача розміщується як внутрішній HTML між тегами <textarea> </textarea>, але це не змінюється, коли користувач додає введення.
Ерік Баркер,

37

Це працює без необхідності 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

Це дасть вам усі допустимі числові значення в lines. Ви можете змінити цикл для перевірки, видалення недійсних символів тощо - залежно від того, що ви хочете.

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

4
Як загальне зауваження, ви майже завжди хочете передати другий аргумент parseInt, щоб змусити читати як базу 10 / decimal ( parseInt(this, 10)). В іншому випадку ведучі нулі ведуть до інтерпретації як основи 8 (восьмеричної), що може призвести до деякої досить дивної поведінки ...
IMSoP

5

Два варіанти: не потрібно JQuery або версія JQuery

Немає JQuery (або що-небудь ще потрібно)

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

Версія 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])
}

Примітка, якщо ви віддаєте перевагу forEach зразок циклу є

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

4

Простий регулярний вираз повинен бути ефективним для перевірки тексту:

/\s*\d+\s*\n/g.test(text) ? "OK" : "KO"
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.