Como ler linha por linha de uma tag HTML de área de texto

93

Eu tenho uma área de texto onde cada linha contém um valor inteiro como segue

      1234
      4321
     123445

Quero verificar se o usuário realmente inseriu valores válidos e não alguns valores engraçados como a seguir

      1234,
      987l;

Para isso, preciso ler linha por linha da área de texto e validar isso. Como posso ler linha por linha de uma área de texto usando javascript?

javascript jquery html textarea Saurabh Kumar
fonte
2
Não tenho 100% de certeza (daí o comentário), mas isso pode envolver a divisão do texto a cada "\ n"
Pluckerpluck de
1
possível duplicata de analisar uma textarea em substrings com base em quebras de linha em Javascript
Michael Berkowski

Respostas:

182

Experimente isso.

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
fonte
15
Em vez de usar, $('textarea').val()use document.getElementById('textareaId').innerHTMLé isso.
ShankarSangoli
3
lembro que havia outro método que usamos. Usamos form.elementname ou algo assim. Quero dizer, muito tempo atrás. 6-7 anos atrás, quando o DOM era bem novo
SoWhat
Sim, você pode até acessá-lo usando document.formname.textareName.value
ShankarSangoli
3
As linhas terminam em \ n e não em \ r \ n?
Oztaco - Reintegração de Monica C.
Para aqueles que estão aqui em 2020, não posso dizer com certeza qual era o comportamento do navegador quando os comentários acima foram adicionados, mas atualmente o Chrome não reconhece document.getElementById ('textarea'). InnerHTML A MENOS que já esteja carregado como texto de espaço reservado no carregamento original do DOM. Você precisaria usar document.getElementById ('textarea'). Value para acessar qualquer texto que o usuário inseriu ou modificou. No carregamento da página, o texto do espaço reservado é colocado como HTML interno entre as marcas <textarea> </textarea>, mas não é modificado quando um usuário adiciona uma entrada.
Eric Barker
37

Isso funciona sem a necessidade de 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
fonte
5

Isso forneceria todos os valores numéricos válidos em lines. Você pode alterar o loop para validar, remover caracteres inválidos, etc. - o que você quiser.

var lines = [];
$('#my_textarea_selector').val().split("\n").each(function ()
{
    if (parseInt($(this) != 'NaN')
        lines[] = parseInt($(this));
}
Joe
fonte
4
Como uma observação geral, você quase sempre deseja passar o segundo argumento para parseInt para forçar a leitura como base 10 / decimal ( parseInt(this, 10)). Caso contrário, zeros à esquerda levam à interpretação como base 8 (octal), o que pode levar a algum comportamento bastante estranho ...
IMSoP
5

Duas opções: sem necessidade de JQuery ou versão JQuery

Sem JQuery (ou qualquer outra coisa necessária)

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

Versão 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])
}

Nota lateral, se você preferir para; cada loop de amostra é

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

Um regex simples deve ser eficiente para verificar sua textarea:

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