Javascript comment diviser une nouvelle ligne


102

J'utilise jquery et j'ai un textarea. Lorsque je soumets par mon bouton, j'alerterai chaque texte séparé par une nouvelle ligne. Comment diviser mon texte lorsqu'il y a une nouvelle ligne?

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

exemple d'entrée:

Hello
There

Le résultat que je veux est:

alert(Hello); and
alert(There)

Réponses:


89

Essayez d'initialiser la ksvariable dans votre fonction d'envoi.

  (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) alerte uniquement le numéro de séquence, pas la valeur. Vous devriez alerter (ks [k])
HBlackorby

2
@hblackorby Votre commentaire, bien que pertinent, est quelque peu muet car le principal problème d'OP ici était la portée et l'initialisation de sa variable "ks"
John Hartsock

90

Vous devez analyser les retours à la ligne quelle que soit la plate-forme (système d'exploitation). Cette division est universelle avec les expressions régulières. Vous pouvez envisager d'utiliser ceci:

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

Par exemple

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

49

Ça devrait être

yadayada.val.split(/\n/)

vous passez une chaîne littérale à la commande split, pas à une expression régulière.


4
"\n"et /\n/sont deux choses ENTIEREMENT différentes dans JS. "= chaîne, /= regex.
Marc B

25
Oui, mais quelle est la différence effective? Ne pas "\n"et faire /\n/correspondre les mêmes choses?
Scott Stafford

22
"\ N" et / \ n / fonctionneront à peu près de la même manière, mais selon la source que vous divisez, quelque chose comme val.split (/ [\ r \ n] + /) peut être mieux. Si votre source a des sauts de ligne "\ r \ n", le fractionnement sur "\ n" laisse le "\ r" à la fin, ce qui peut causer des problèmes.
xtempore

30

Puisque vous utilisez textarea, vous pouvez trouver \ n ou \ r (ou \ r \ n) pour les sauts de ligne. Donc, ce qui suit est suggéré:

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

réf: vérifie si la chaîne contient un saut de ligne


29
ou, plus précisément, /\r?\n/... Je pense que l'utilisation de |(ou) entrelacerait des résultats vides pour les fins de ligne CRLF.
Dusty

Vous n'allez pas voir de sauts de ligne CR uniquement ( \r) sur le Web moderne. Le dernier endroit où ils ont été largement utilisés était dans les anciennes versions de Mac OS d'il y a près de 20 ans.
Ilmari Karonen

8

Juste

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

fonctionnera parfaitement.

Assurez-vous qu'il \r\nest placé au début de la chaîne RegExp , car il sera essayé en premier.


La gfin de l'expression
régulière

4

Le moyen le plus simple et le plus sûr de fractionner une chaîne à l'aide de nouvelles lignes, quel que soit le format (CRLF, LFCR ou LF), consiste à supprimer tous les caractères de retour chariot , puis à les fractionner sur les caractères de nouvelle ligne ."text".replace(/\r/g, "").split(/\n/);

Cela garantit que lorsque vous avez de nouvelles lignes continues (c. \r\n\r\n-à- d . \n\r\n\r, Ou\n\n ), le résultat sera toujours le même.

Dans votre cas, le code ressemblerait à:

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

Voici quelques exemples qui illustrent l'importance de cette méthode:

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. Bouge le var ks = $('#keywords').val().split("\n"); intérieur du gestionnaire d'événements
  2. Utiliser à la alert(ks[k])place 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);

Démo


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

Le problème est que lorsque vous initialisez ks, le valuen'a pas été défini.

Vous devez récupérer la valeur lorsque l'utilisateur soumet le formulaire. Vous devez donc initialiser l' ksintérieur de la fonction de rappel

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

0

Voici un exemple avec console.logau lieu de alert(). Il est plus commode :)

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

Vous pouvez l'essayer ici


-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
cette approche est bien couverte par les réponses existantes
KyleMit

@KyleMit ouais, je passe en revue ces réponses, les réponses les plus probables sont similaires en raison du concept de base de javascript, mais je me concentre ou me préoccupe de la ligne de code, c'est pourquoi j'ai publié cette réponse ...
ankitkanojia
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.