Cómo leer línea por línea de una etiqueta HTML de área de texto

93

Tengo un área de texto donde cada línea contiene un valor entero como sigue

      1234
      4321
     123445

Quiero verificar si el usuario realmente ha introducido valores válidos y no algunos valores divertidos como sigue

      1234,
      987l;

Para eso, necesito leer línea por línea del área de texto y validar eso. ¿Cómo puedo leer línea por línea de un área de texto usando javascript?

javascript jquery html textarea Saurabh Kumar
fuente
2
No estoy 100% seguro (de ahí el comentario) pero puede implicar dividir el texto en cada "\ n"
Pluckerpluck
1
posible duplicado de analizar un área de texto en subcadenas basado en saltos de línea en Javascript
Michael Berkowski

Respuestas:

182

Prueba esto.

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
fuente
14
En lugar de $('textarea').val()usar, document.getElementById('textareaId').innerHTMLeso es todo.
ShankarSangoli
3
Recuerdo que había otro método que usamos. Usamos form.elementname o algo así. Me refiero a hace mucho tiempo. Hace 6-7 años cuando DOM era bastante nuevo
SoWhat
Sí, incluso puede acceder a él usando document.formname.textareName.value
ShankarSangoli
3
¿Se garantiza que las líneas terminen en \ n y no en \ r \ n?
Oztaco - Reincorpora a Monica C.
Para aquellos que están aquí en 2020, no puedo decir con certeza cuál fue el comportamiento del navegador cuando se agregaron los comentarios anteriores, pero actualmente Chrome no reconoce document.getElementById ('textarea'). InnerHTML A MENOS que ya esté cargado como texto de marcador de posición en la carga original del DOM. Debería utilizar document.getElementById ('textarea'). Value para acceder a cualquier texto que el usuario haya introducido o modificado. Al cargar la página, el texto del marcador de posición se coloca como HTML interno entre las etiquetas <textarea> </textarea>, pero esto no se modifica cuando un usuario agrega una entrada.
Eric Barker
37

Esto funciona sin necesidad 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
fuente
5

Esto le daría todos los valores numéricos válidos en formato lines. Puede cambiar el bucle para validar, eliminar los caracteres no válidos, etc., lo que desee.

var lines = [];
$('#my_textarea_selector').val().split("\n").each(function ()
{
    if (parseInt($(this) != 'NaN')
        lines[] = parseInt($(this));
}
Joe
fuente
4
Como nota general, casi siempre desea pasar el segundo argumento a parseInt para forzar la lectura como base 10 / decimal ( parseInt(this, 10)). De lo contrario, los ceros iniciales conducen a la interpretación como base 8 (octal), lo que puede llevar a un comportamiento bastante extraño ...
IMSoP
5

Dos opciones: no se requiere JQuery o la versión de JQuery

Sin JQuery (o cualquier otra cosa requerida)

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ón de 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 al margen, si lo prefiere, cada bucle de muestra es

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

Una simple expresión regular debería ser eficiente para verificar su área de texto:

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