Javascript, wie man Zeilenumbrüche teilt

101

Ich benutze jquery und habe einen Textbereich. Wenn ich über meine Schaltfläche abschicke, werde ich jeden durch Zeilenumbrüche getrennten Text benachrichtigen. Wie teile ich meinen Text, wenn es eine neue Zeile gibt?

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

Beispieleingabe:

Hello
There

Ergebnis, das ich möchte, ist:

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

Antworten:

86

Versuchen Sie, die ksVariable in Ihrer Submit-Funktion zu initialisieren .

  (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
quelle
2
alert (k) warnt nur die Sequenznummer, nicht den Wert. Sie sollten alarmieren (ks [k])
HBlackorby
2
@hblackorby Ihr Kommentar ist zwar relevant, aber etwas stumm, da das Hauptproblem von OP hier der Umfang und die Initialisierung seiner Variablen "ks" war
John Hartsock
89

Sie sollten Zeilenumbrüche unabhängig von der Plattform (Betriebssystem) analysieren. Diese Aufteilung ist universell mit regulären Ausdrücken. Sie können dies in Betracht ziehen:

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

Z.B

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

Es sollte sein

yadayada.val.split(/\n/)

Sie übergeben eine Literalzeichenfolge an den Befehl split, keine Regex.

Marc B.
quelle
4
"\n"und /\n/sind zwei völlig verschiedene Dinge in JS. "= string, /= regulärer Ausdruck.
Marc B
25
Ja, aber was ist der effektive Unterschied? Nicht "\n"und /\n/passen die gleichen Dinge?
Scott Stafford
22
Sowohl "\ n" als auch / \ n / funktionieren ungefähr gleich, aber je nach der Quelle, die Sie teilen, ist möglicherweise etwas wie val.split (/ [\ r \ n] + /) besser. Wenn Ihre Quelle "\ r \ n" Zeilenumbrüche hat, bleibt beim Teilen auf "\ n" das "\ r" am Ende, was zu Problemen führen kann.
xtempore
30

Da Sie verwenden textarea, finden Sie möglicherweise \ n oder \ r (oder \ r \ n) für Zeilenumbrüche. Daher wird Folgendes vorgeschlagen:

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

ref: Überprüfen Sie, ob die Zeichenfolge einen Zeilenumbruch enthält

Raubvogel
quelle
29
oder genauer gesagt /\r?\n/... Ich denke, die Verwendung von |(oder) würde leere Ergebnisse für CRLF-Zeilenenden verschachteln.
Dusty
Sie werden nirgendwo im modernen Web Zeilenumbrüche mit CR-only ( \r) sehen . Der letzte Ort, an dem sie weit verbreitet waren, waren alte Mac OS-Versionen von vor fast 20 Jahren.
Ilmari Karonen
8

Gerade

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

wird perfekt funktionieren.

Stellen Sie sicher , dass es \r\nan der Spitze der RegExp- Zeichenfolge steht, da dies zuerst versucht wird.

Jack Ting
quelle
Das gam Ende der Regex ist nicht notwendig
Yetti99
4

Die einfachste und sicherste Möglichkeit, eine Zeichenfolge unabhängig vom Format (CRLF, LFCR oder LF) mit neuen Zeilen zu teilen, besteht darin , alle Wagenrücklaufzeichen zu entfernen und dann die neuen Zeilenzeichen zu teilen ."text".replace(/\r/g, "").split(/\n/);

Dadurch wird sichergestellt , dass , wenn Sie kontinuierlich neue Zeilen (dh haben \r\n\r\n, \n\r\n\roder \n\n) das Ergebnis wird immer das gleiche sein.

In Ihrem Fall würde der Code folgendermaßen aussehen:

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

Hier einige Beispiele, die die Bedeutung dieser Methode verdeutlichen:

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
quelle
3
  1. Verschieben Sie das var ks = $('#keywords').val().split("\n");Innere des Ereignishandlers
  2. Verwenden Sie alert(ks[k])anstelle vonalert(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

amit_g
quelle
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
quelle
0

Das Problem ist, dass beim Initialisieren ksdas valuenicht festgelegt wurde.

Sie müssen den Wert abrufen, wenn der Benutzer das Formular sendet. Sie müssen also das ksInnere der Rückruffunktion initialisieren

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

Hier ist ein Beispiel mit console.loganstelle von alert(). Es ist praktischer :)

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

Sie können es hier versuchen

ValeriiVasin
quelle
-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
quelle
1
Dieser Ansatz wird durch die vorhandenen Antworten gut abgedeckt
KyleMit
@KyleMit Ja, ich gehe diese Antworten durch, die wahrscheinlichsten Antworten sind aufgrund des Grundkonzepts von Javascript ähnlich, aber ich konzentriere mich auf die Codezeile, deshalb habe ich diese Antwort gepostet ...
ankitkanojia