Javascript cómo dividir nueva línea

102

Estoy usando jquery y tengo un área de texto. Cuando envíe por mi botón, alertaré cada texto separado por una nueva línea. ¿Cómo dividir mi texto cuando hay una nueva línea?

  var ks = $('#keywords').val().split("\n");
  (function($){
     $(document).ready(function(){
        $('#data').submit(function(e){
           e.preventDefault();
           alert(ks[0]);
           $.each(ks, function(k){
              alert(k);
           });
        });
     });
  })(jQuery);

entrada de ejemplo:

Hello
There

El resultado que quiero es:

alert(Hello); and
alert(There)
oknoorap
fuente

Respuestas:

89

Intente inicializar la ksvariable dentro de su función de envío.

  (function($){
     $(document).ready(function(){
        $('#data').submit(function(e){
           var ks = $('#keywords').val().split("\n");
           e.preventDefault();
           alert(ks[0]);
           $.each(ks, function(k){
              alert(k);
           });
        });
     });
  })(jQuery);
John Hartsock
fuente
2
alert (k) solo alerta al número de secuencia, no al valor. Deberías alertar (ks [k])
HBlackorby
2
@hblackorby Su comentario, aunque relevante, es un punto mudo ya que el problema principal de OP aquí fue el alcance y la inicialización de su variable "ks"
John Hartsock
89

Debe analizar las nuevas líneas independientemente de la plataforma (sistema operativo). Esta división es universal con expresiones regulares. Puede considerar usar esto:

var ks = $('#keywords').val().split(/\r?\n/);

P.ej

"a\nb\r\nc\r\nlala".split(/\r?\n/) // ["a", "b", "c", "lala"]
Adi Azarya
fuente
49

Debería ser

yadayada.val.split(/\n/)

está pasando una cadena literal al comando split, no una expresión regular.

Marc B
fuente
4
"\n"y /\n/son dos cosas COMPLETAMENTE diferentes en JS. "= cadena, /= expresión regular.
Marc B
25
Sí, pero ¿cuál es la diferencia efectiva? No "\n"y /\n/que coincida con las mismas cosas?
Scott Stafford
22
Tanto "\ n" como / \ n / funcionarán de la misma manera, pero dependiendo de la fuente que esté dividiendo, algo como val.split (/ [\ r \ n] + /) puede ser mejor. Si su fuente tiene saltos de línea "\ r \ n", dividir en "\ n" deja el "\ r" al final, lo que puede causar problemas.
xtempore
30

Ya que está utilizando textarea, puede encontrar \ n o \ r (o \ r \ n) para los saltos de línea. Entonces, se sugiere lo siguiente:

$('#keywords').val().split(/\r|\n/)

ref: comprueba si la cadena contiene un salto de línea

Raptor
fuente
29
o, más específicamente, /\r?\n/... creo que usar |(o) intercalaría resultados vacíos para las terminaciones de línea CRLF.
Dusty
No verá saltos de línea de solo CR ( \r) en ningún lugar de la web moderna. El último lugar donde se utilizaron ampliamente fue en versiones antiguas de Mac OS de hace casi 20 años.
Ilmari Karonen
8

Sólo

var ks = $('#keywords').val().split(/\r\n|\n|\r/);

funcionará perfectamente.

Asegúrese de que \r\nse coloque al principio de la cadena RegExp , ya que se intentará primero.

Jack Ting
fuente
El gal final de la expresión regular no es necesario
Yetti99
4

La forma más sencilla y segura de dividir una cadena utilizando nuevas líneas, independientemente del formato (CRLF, LFCR o LF), es eliminar todos los caracteres de retorno de carro y luego dividir en los caracteres de la nueva línea ."text".replace(/\r/g, "").split(/\n/);

Esto asegura que cuando se tiene nuevas líneas continuas (es decir \r\n\r\n, \n\r\n\ro \n\n) el resultado será siempre el mismo.

En su caso, el código se vería así:

(function ($) {
    $(document).ready(function () {
        $('#data').submit(function (e) {
            var ks = $('#keywords').val().replace(/\r/g, "").split(/\n/);
            e.preventDefault();
            alert(ks[0]);
            $.each(ks, function (k) {
                alert(k);
            });
        });
    });
})(jQuery);

A continuación, se muestran algunos ejemplos que muestran la importancia de este método:

var examples = ["Foo\r\nBar", "Foo\r\n\r\nBar", "Foo\n\r\n\rBar", "Foo\nBar\nFooBar"];

examples.forEach(function(example) {
  output(`Example "${example}":`);
  output(`Split using "\n": "${example.split("\n")}"`);
  output(`Split using /\r?\n/: "${example.split(/\r?\n/)}"`);
  output(`Split using /\r\n|\n|\r/: "${example.split(/\r\n|\n|\r/)}"`);
  output(`Current method: ${example.replace(/\r/g, "").split("\n")}`);
  output("________");
});

function output(txt) {
  console.log(txt.replace(/\n/g, "\\n").replace(/\r/g, "\\r"));
}

nick zoum
fuente
3
  1. Mover el var ks = $('#keywords').val().split("\n");interior del controlador de eventos
  2. Usar en alert(ks[k])lugar dealert(k)

  (function($){
     $(document).ready(function(){
        $('#data').submit(function(e){
           e.preventDefault();
           var ks = $('#keywords').val().split("\n");
           alert(ks[0]);
           $.each(ks, function(k){
              alert(ks[k]);
           });
        });
     });
  })(jQuery);

Manifestación

amit_g
fuente
1

Good'ol javascript:

 var m = "Hello World";  
 var k = m.split(' ');  // I have used space, you can use any thing.
 for(i=0;i<k.length;i++)  
    alert(k[i]);  
check123
fuente
0

El problema es que cuando inicializa ks, valueno se ha configurado.

Usted tendrá que obtener el valor cuando el usuario envía el formulario. Entonces necesitas inicializar el ksinterior de la función de devolución de llamada

(function($){
   $(document).ready(function(){
      $('#data').submit(function(e){
      //Here it will fetch the value of #keywords
         var ks = $('#keywords').val().split("\n");
         ...
      });
   });
})(jQuery);
Steveyang
fuente
0

Aquí hay un ejemplo con en console.loglugar de alert(). Es mas conveniente :)

var parse = function(){
  var str = $('textarea').val();
  var results = str.split("\n");
  $.each(results, function(index, element){
    console.log(element);
  });
};

$(function(){
  $('button').on('click', parse);
});

Puedes probarlo aqui

Valerii Vasin
fuente
-1

(function($) {
  $(document).ready(function() {
    $('#data').click(function(e) {
      e.preventDefault();
      $.each($("#keywords").val().split("\n"), function(e, element) {
        alert(element);
      });
    });
  });
})(jQuery);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<textarea id="keywords">Hello
World</textarea>
<input id="data" type="button" value="submit">

ankitkanojia
fuente
1
este enfoque está bien cubierto por las respuestas existentes
KyleMit
@KyleMit sí, reviso esas respuestas, las respuestas más probables son similares debido al concepto básico de javascript, pero me centro o me
preocupo