자바 스크립트 줄 바꿈 분할 방법


102

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)

답변:


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
alert (k)는 값이 아닌 시퀀스 번호 만 경고합니다. 당신은 경고한다 (KS [K])
HBlackorby

2
관련 있지만, 다소 OP의 주요 문제로 음소거 점의 여기 범위와 그 변수의 초기화 "KS"했다, 당신의 의견을 @hblackorby
존 Hartsock

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

정규식이 아닌 분할 명령에 리터럴 문자열을 전달합니다.


4
"\n"/\n/JS에서 완전히 다른 두 가지가있다. "= 문자열, /= 정규식.
Marc B

25
예, 그러나 효과적인 차이점은 무엇입니까? 하지 마십시오 "\n"/\n/같은 일을 일치?
Scott Stafford

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 줄 끝의 빈 결과가 인터리브됩니다.
Dusty

최신 웹 어디에서나 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 자바 스크립트 :

 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 그래, 나는 그 대답을 간다. 대부분의 가능한 대답은 자바 스크립트의 기본 개념으로 인해 비슷하지만 나는이 대답을 게시 한 코드 줄에 집중하거나 관심을
기울입니다
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.