Javascript come dividere la nuova riga


102

Sto usando jquery e ho una textarea. Quando invio tramite il mio pulsante, avviserò ogni testo separato da una nuova riga. Come dividere il mio testo quando c'è una nuova riga?

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

input di esempio:

Hello
There

Il risultato che voglio è:

alert(Hello); and
alert(There)

Risposte:


89

Prova a inizializzare la ksvariabile all'interno della funzione di invio.

  (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) avvisa solo il numero di sequenza, non il valore. Dovresti allertare (ks [k])
HBlackorby

2
@hblackorby Il tuo commento, sebbene pertinente, è in qualche modo un punto muto poiché il problema principale di OP qui era l'ambito e l'inizializzazione della sua variabile "ks"
John Hartsock

90

Dovresti analizzare le nuove righe indipendentemente dalla piattaforma (sistema operativo) Questa divisione è universale con le espressioni regolari. Puoi considerare di utilizzare questo:

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

Per esempio

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

49

Dovrebbe essere

yadayada.val.split(/\n/)

stai passando una stringa letterale al comando split, non una regex.


4
"\n"e /\n/sono due cose COMPLETAMENTE diverse in JS. "= stringa, /= regex.
Marc B

25
Sì, ma qual è l'effettiva differenza? Non "\n"e /\n/abbinare le stesse cose?
Scott Stafford

22
Sia "\ n" che / \ n / funzioneranno più o meno allo stesso modo, ma a seconda della fonte che stai dividendo, qualcosa come val.split (/ [\ r \ n] + /) potrebbe essere migliore. Se la tua fonte ha interruzioni di riga "\ r \ n", la divisione su "\ n" lascia "\ r" alla fine, il che può causare problemi.
xtempore

30

Dato che stai usando textarea, potresti trovare \ n o \ r (o \ r \ n) per le interruzioni di riga. Quindi, si suggerisce quanto segue:

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

ref: controlla se la stringa contiene un'interruzione di riga


29
o, più specificamente, /\r?\n/... Credo usando |(o) sarebbe interleave risultati empty fine riga CRLF.
Dusty

Non vedrai interruzioni di riga solo CR ( \r) da nessuna parte sul Web moderno. L'ultimo luogo in cui sono stati ampiamente utilizzati era nelle antiche versioni di Mac OS di quasi 20 anni fa.
Ilmari Karonen

8

Appena

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

funzionerà perfettamente.

Assicurati che \r\nsia posizionato all'inizio della stringa RegExp , perché verrà provato per primo.


La gfine della regex non è necessaria
Yetti99

4

Il modo più semplice e sicuro per dividere una stringa utilizzando nuove righe, indipendentemente dal formato (CRLF, LFCR o LF), è rimuovere tutti i caratteri di ritorno a capo e quindi dividerli sui nuovi caratteri di riga ."text".replace(/\r/g, "").split(/\n/);

Questo assicura che quando si hanno continue nuove linee (ad esempio \r\n\r\n, \n\r\n\ro \n\n) il risultato sarà sempre lo stesso.

Nel tuo caso il codice sarebbe simile a:

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

Ecco alcuni esempi che mostrano l'importanza di questo metodo:

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. Spostare l' var ks = $('#keywords').val().split("\n");interno del gestore eventi
  2. Usa alert(ks[k])invece dialert(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

Il problema è che quando si inizializza ks, valuenon è stato impostato.

È necessario recuperare il valore quando l'utente invia il modulo. Quindi è necessario inizializzare l' ksinterno della funzione di callback

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

0

Ecco un esempio con console.loginvece di alert(). È più 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);
});

Puoi provarlo qui


-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
questo approccio è ben coperto dalle risposte esistenti
KyleMit

@KyleMit sì, esamino quelle risposte, le risposte più probabili sono simili a causa del concetto di base di javascript, ma mi concentro o sono preoccupato per la riga di codice, ecco perché ho pubblicato questa risposta ...
ankitkanojia
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.