改行を分割する方法


102

私はjqueryを使用しており、textareaを持っています。ボタンで送信すると、改行で区切られた各テキストに警告します。改行があるときにテキストを分割する方法は?

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

入力例:

Hello
There

私が欲しい結果は:

alert(Hello); and
alert(There)

回答:


88

kssubmit関数内で変数を初期化してみてください。

  (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)は、値ではなく、シーケンス番号のみをアラートします。警告する必要があります(ks [k])
HBlackorby

2
@hblackorby OPの主な問題は彼の変数 "ks"のスコープと初期化であったため、関連はありますが、コメントはやや
無言です

89

プラットフォーム(オペレーティングシステム)に関係なく、改行を解析する必要があります 。この分割は、正規表現では一般的です。あなたはこれを使うことを検討するかもしれません:

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

例えば

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

49

そのはず

yadayada.val.split(/\n/)

正規表現ではなく、リテラル文字列をsplitコマンドに渡しています。


4
"\n"そして、/\n/JSでの2つの全く異なるものです。"=文字列、/=正規表現。
マークB

25
はい、しかし効果的な違いは何ですか?同じもの"\n"/\n/一致させないでください。
スコットスタッフォード

22
"\ n"と/ \ n /はどちらもほぼ同じように機能しますが、分割するソースによっては、val.split(/ [\ r \ n] + /)などの方が良い場合があります。ソースに「\ r \ n」の改行がある場合、「\ n」で分割すると、「\ r」が最後に残り、問題が発生する可能性があります。
xtempore 2016年

30

を使用しているためtextarea、改行のために\ nまたは\ r(または\ r \ n)が見つかることがあります。したがって、次のことをお勧めします。

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

ref:文字列に改行が含まれているかどうかを確認する


29
または、より具体的には/\r?\n/... |(or)を使用すると、CRLF行末の空の結果がインターリーブされると思います。
Dusty

最新のWebのどこにもCRのみ(\r)の改行は表示されません。それらが広く使用された最後の場所は、20年近く前の古いMac OSバージョンでした。
Ilmari Karonen

8

ただ

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

完全に動作します。

RegExp文字列の\r\n先頭に配置されていることを確認してください。最初に試行されます。


g正規表現の末尾には必要ではない
Yetti99

4

形式(CRLF、LFCR、LF)に関係なく、改行を使用して文字列を分割する最も簡単で安全な方法は、すべての改行文字削除してから改行文字分割することです。"text".replace(/\r/g, "").split(/\n/);

あなたが継続的に新しいラインを持っている場合(つまり、このことを保証する\r\n\r\n\n\r\n\rまたは\n\n)結果は常に同じになります。

あなたの場合、コードは次のようになります:

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

この方法の重要性を示すいくつかの例を次に示します。

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. var ks = $('#keywords').val().split("\n");イベントハンドラー内を移動する
  2. alert(ks[k])代わりに使用alert(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);

デモ


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

問題は、を初期化するときksに、valueが設定されていないことです。

ユーザーがフォームを送信するときに値をフェッチする必要があります。したがって、コールバック関数の内部初期化する必要がありますks

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

0

これはのconsole.log代わりの例ですalert()。より便利です:)

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

ここで試すことができます


-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
このアプローチは既存の回答で十分にカバーされています
KyleMit

@KyleMitええ、私はそれらの答えを調べます。最も可能性の高い答えはJavaScriptの基本的な概念のために類似していますが、私はこの答えを投稿した理由であるコード行に焦点を当てるか懸念しています...
ankitkanojia
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.