Javascript как разделить новую строку


103

Я использую jquery, и у меня есть текстовое поле. Когда я отправляю свою кнопку, я буду предупреждать каждый текст, разделенный новой строкой. Как разбить мой текст, когда есть новая строка?

  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)

Ответы:


91

Попробуйте инициализировать 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);

3
alert (k) предупреждает только порядковый номер, но не значение. Вы должны предупредить (ks [k])
HBlackorby

2
@hblackorby Ваш комментарий, хотя и уместен, в некотором роде неуловимый, поскольку основной проблемой OP здесь была область видимости и инициализация его переменной «ks»
Джон Хартсок

92

Вы должны анализировать символы новой строки независимо от платформы (операционной системы). Это разделение универсально для регулярных выражений. Вы можете использовать это:

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

Например

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

51

Так должно быть

yadayada.val.split(/\n/)

вы передаете команде split буквальную строку, а не регулярное выражение.


4
"\n"и /\n/это две СОВЕРШЕННО разные вещи в JS. "= строка, /= регулярное выражение.
Marc B

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-only ( \r) нигде в современном Интернете. Последнее место, где они широко использовались, было в старых версиях Mac OS почти 20 лет назад.
Илмари

8

Просто

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

будет работать отлично.

Убедитесь, что оно \r\nнаходится в начале строки RegExp , потому что оно будет проверено первым.


Символ gв конце регулярного выражения не обязателен
Yetti99 09

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

Вы можете попробовать здесь


0

вам не нужно передавать здесь какие-либо регулярные выражения. это отлично работает ..

 (function($) {
      $(document).ready(function() {
        $('#data').click(function(e) {
          e.preventDefault();
          $.each($("#keywords").val().split("\n"), function(e, element) {
            alert(element);
          });
        });
      });
    })(jQuery);

-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.