Javascript como dividir nova linha


102

Estou usando o jquery e tenho uma textarea. Quando eu enviar pelo meu botão, alertarei cada texto separado por nova linha. Como dividir meu texto quando há uma nova linha?

  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);

exemplo de entrada:

Hello
There

O resultado que eu quero é:

alert(Hello); and
alert(There)

Respostas:


89

Tente inicializar a ksvariável dentro de sua função de envio.

  (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);

2
alert (k) alerta apenas o número de sequência, não o valor. Você deve alertar (ks [k])
HBlackorby

2
@hblackorby Seu comentário, embora relevante, é um tanto quanto um ponto mudo, pois o principal problema do OP aqui era o escopo e a inicialização de sua variável "ks"
John Hartsock

90

Você deve analisar novas linhas, independentemente da plataforma (sistema operacional). Essa divisão é universal com expressões regulares. Você pode considerar o uso de:

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

Por exemplo

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

49

Deveria ser

yadayada.val.split(/\n/)

você está passando uma string literal para o comando split, não um regex.


4
"\n"e /\n/são duas coisas TOTALMENTE diferentes em JS. "= string, /= regex.
Marc B

25
Sim, mas qual é a diferença efetiva? Não "\n"e /\n/combine as mesmas coisas?
Scott Stafford

22
Ambos "\ n" e / \ n / funcionarão da mesma forma, mas dependendo da fonte que você está dividindo, algo como val.split (/ [\ r \ n] + /) pode ser melhor. Se sua fonte tiver quebras de linha "\ r \ n", a divisão em "\ n" deixa o "\ r" no final, o que pode causar problemas.
xtempore

30

Já que você está usando textarea, você pode encontrar \ n ou \ r (ou \ r \ n) para quebras de linha. Então, o seguinte é sugerido:

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

ref: verifique se a string contém uma quebra de linha


29
ou, mais especificamente, /\r?\n/... acho que usar |(ou) intercalaria resultados vazios para terminações de linha CRLF.
Dusty

Você não verá quebras de linha somente CR ( \r) em qualquer lugar da web moderna. O último lugar onde foram amplamente usados ​​foi nas antigas versões do Mac OS de quase 20 anos atrás.
Ilmari Karonen

8

Somente

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

funcionará perfeitamente.

Certifique-se de que \r\nestá colocado no início da string RegExp , porque será tentado primeiro.


O gno final da regex não é necessário
Yetti99,

4

A maneira mais simples e segura de dividir uma string usando novas linhas, independentemente do formato (CRLF, LFCR ou LF), é remover todos os caracteres de retorno de carro e, em seguida, dividir nos novos caracteres de linha ."text".replace(/\r/g, "").split(/\n/);

Isso garante que quando você tem novas linhas contínuas (isto é \r\n\r\n, \n\r\n\rou \n\n) o resultado será sempre o mesmo.

No seu caso, o código seria assim:

(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);

Aqui estão alguns exemplos que mostram a importância deste 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"));
}


3
  1. Mova o var ks = $('#keywords').val().split("\n"); dentro do manipulador de eventos
  2. Use em alert(ks[k])vez 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);

Demo


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

0

O problema é que, quando você inicializa ks, ovalue não foi definido.

Você precisa buscar o valor quando o usuário enviar o formulário. Portanto, você precisa inicializar o ksdentro da função de retorno de chamada

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

0

Aqui está um exemplo com em console.logvez de alert(). É mais 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);
});

Você pode tentar aqui


-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">


1
esta abordagem é bem abordada pelas respostas existentes
KyleMit

@KyleMit sim, eu analiso essas respostas, as respostas mais prováveis ​​são semelhantes devido ao conceito básico de javascript, mas eu me concentro ou me preocupo com a linha de código, por isso postei esta resposta ...
ankitkanojia
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.