Как читать построчно HTML-тега текстовой области

93

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

      1234
      4321
     123445

Я хочу проверить, действительно ли пользователь ввел допустимые значения, а не какие-то забавные значения, такие как следующие

      1234,
      987l;

Для этого мне нужно прочитать строку за строкой текстовой области и проверить это. Как я могу читать строку за строкой в ​​текстовой области с помощью javascript?

javascript jquery html textarea Саураб Кумар
источник
2
Я не уверен на 100% (отсюда и комментарий), но это может включать разбиение текста на каждые «\ n»
Pluckerpluck
1
возможный дубликат синтаксического анализа текстового
Майкл Берковски

Ответы:

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'). Value для доступа к любому тексту, введенному или измененному пользователем. При загрузке страницы замещающий текст помещается в виде внутреннего 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, чтобы принудительно читать как base 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)
})
Whitneyland
источник
4

Простое регулярное выражение должно быть эффективным для проверки вашего текстового поля:

/\s*\d+\s*\n/g.test(text) ? "OK" : "KO"
Sinsedrix
источник