Javascript jak podzielić znak nowej linii

102

Używam jquery i mam textarea. Kiedy wyślę mój przycisk, powiadomię o każdym tekście oddzielonym znakiem nowej linii. Jak podzielić tekst, gdy pojawia się nowa linia?

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

przykładowe dane wejściowe:

Hello
There

Wynik, którego chcę, to:

alert(Hello); and
alert(There)
oknoorap
źródło

Odpowiedzi:

89

Spróbuj zainicjować kszmienną wewnątrz funkcji przesyłania.

  (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
źródło
2
alert (k) ostrzega tylko o numerze kolejnym, a nie o wartości. Powinieneś ostrzec (ks [k])
HBlackorby
2
@hblackorby Twój komentarz, choć istotny, jest nieco wyciszony, ponieważ głównym problemem OP był tutaj zakres i inicjalizacja jego zmiennej „ks”
John Hartsock
90

Powinieneś analizować znaki nowej linii niezależnie od platformy (systemu operacyjnego). Ten podział jest uniwersalny w przypadku wyrażeń regularnych. Możesz rozważyć użycie tego:

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

Na przykład

"a\nb\r\nc\r\nlala".split(/\r?\n/) // ["a", "b", "c", "lala"]
Adi Azarya
źródło
49

Powinno być

yadayada.val.split(/\n/)

przekazujesz dosłowny ciąg do polecenia split, a nie wyrażenie regularne.

Marc B.
źródło
4
"\n"i /\n/są to dwie ZUPEŁNIE różne rzeczy w JS. "= ciąg, /= wyrażenie regularne.
Marc B
25
Tak, ale jaka jest skuteczna różnica? Nie "\n"i /\n/dopasować te same rzeczy?
Scott Stafford
22
Zarówno "\ n", jak i / \ n / będą działały mniej więcej tak samo, ale w zależności od źródła, które dzielisz, coś takiego jak val.split (/ [\ r \ n] + /) może być lepsze. Jeśli w źródle występują znaki końca linii "\ r \ n", podział na "\ n" pozostawia znak "\ r" na końcu, co może powodować problemy.
xtempore
30

Ponieważ używasz textarea, możesz znaleźć \ n lub \ r (lub \ r \ n) jako znaki końca linii. Sugeruje się więc, co następuje:

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

ref: sprawdź, czy łańcuch zawiera podział wiersza

Raptor
źródło
29
a dokładniej /\r?\n/... Myślę, że użycie |(lub) przeplatałoby puste wyniki dla zakończeń linii CRLF.
Dusty
Nigdzie w nowoczesnej sieci nie zobaczysz podziałów wierszy tylko CR ( \r) . Ostatnim miejscem, w którym były szeroko stosowane, były starożytne wersje Mac OS sprzed prawie 20 lat.
Ilmari Karonen
8

Właśnie

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

będzie działać idealnie.

Upewnij się, że \r\njest umieszczony na początku ciągu RegExp , ponieważ zostanie wypróbowany jako pierwszy.

Jack Ting
źródło
Na gkońcu wyrażenia regularnego nie jest konieczne
Yetti99
4

Najprostszym i najbezpieczniejszym sposobem podzielenia łańcucha przy użyciu nowych linii, niezależnie od formatu (CRLF, LFCR lub LF), jest usunięcie wszystkich znaków powrotu karetki, a następnie podzielenie na znaki nowego wiersza ."text".replace(/\r/g, "").split(/\n/);

Gwarantuje to, że gdy masz ciągły nowych linii (czyli \r\n\r\n, \n\r\n\rczy\n\n ) wynik będzie zawsze taki sam.

W Twoim przypadku kod wyglądałby tak:

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

Oto kilka przykładów, które pokazują znaczenie tej metody:

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
źródło
3
  1. Przesuń var ks = $('#keywords').val().split("\n"); wnętrze programu obsługi zdarzeń
  2. Użyj alert(ks[k])zamiastalert(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);

Próbny

amit_g
źródło
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
źródło
0

Problem polega na tym, że podczas inicjalizacji ks,value nie został ustawiony.

Musisz pobrać wartość, gdy użytkownik przesyła formularz. Musisz więc zainicjować kswewnętrzną funkcję zwrotną

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

Oto przykład z console.logzamiast alert(). Jest wygodniej :)

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

Możesz spróbować tutaj

ValeriiVasin
źródło
-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
źródło
1
to podejście jest dobrze uwzględnione w istniejących odpowiedziach
KyleMit
@KyleMit tak, przechodzę przez te odpowiedzi, najbardziej prawdopodobne odpowiedzi są podobne ze względu na podstawową koncepcję javascript, ale koncentruję się lub
martwię