Як розділити новий рядок


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)

Відповіді:


89

Спробуйте ініціалізувати ksзмінну всередині функції подання.

  (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
alar (k) попереджає лише порядковий номер, а не значення. Ви повинні попередити (ks [k])
HBlackorby

2
@hblackorby Ваш коментар, хоч і доречний, є дещо недійсним моментом, оскільки головним питанням ОП тут є сфера застосування та ініціалізація його змінної "ks"
Джон Харцок

90

Ви повинні розбирати нові рядки незалежно від платформи (операційної системи) Цей розкол є універсальним з регулярними виразами. Ви можете скористатися цим:

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. "= рядок, /= регулярний вираз.
Марк Б

25
Так, але в чому полягає ефективна різниця? Чи не "\n"та /\n/відповідати одне і те ж?
Скотт Стаффорд

22
І "\ n", і / \ n / працюватимуть приблизно однаково, але залежно від джерела, яке ви розщеплюєте, щось на зразок val.split (/ [\ r \ n] + /) може бути кращим. Якщо у вашого джерела є "\ r \ n" розриви рядків, то розщеплення на "\ n" залишає "\ r" на кінці, що може спричинити проблеми.
xtempore

30

Оскільки ви використовуєте textarea, ви можете знайти \ n або \ r (або \ r \ n) для розривів рядків. Отже, пропонується наступне:

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

ref: перевірте, чи містить рядок розрив рядка


29
або, точніше, /\r?\n/... я думаю, що використання |(або) переплутає порожні результати для закінчень рядків CRLF.
Пил

Ви не збираєтесь бачити розриви рядків лише для CR ( \r) в будь-якому місці сучасної мережі. Останнє місце, де вони широко використовувались, було у старовинних версіях Mac OS майже 20 років тому.
Ільмарі Каронен

8

Просто

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

буде працювати ідеально.

Будьте впевнені, що \r\nвін розміщений у провідній рядку RegExp , тому що його спершу буде спробувано.


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, але я зосереджуюсь або
стосуюся
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.