JavaScript 문자열 개행 문자?


424

\n모든 플랫폼을위한 자바 스크립트의 보편적 인 개행 문자 순서는? 그렇지 않은 경우 현재 환경의 문자를 어떻게 결정합니까?

HTML 개행 요소 ( <BR/>) 에 대해 묻지 않습니다 . JavaScript 문자열 내에서 사용되는 줄 바꿈 문자 시퀀스에 대해 묻고 있습니다.


5
사용자가 줄 바꿈으로 구분 된 목록을 입력 해야하는 여러 줄 입력 컨트롤이 있습니다. 먼저 줄 바꿈으로 문자열을 분할하여 목록을 구문 분석해야합니다.
랜든 쿤

7
@ landon9720 : 여러 줄 입력 컨트롤의 경우 브라우저 / 플랫폼에서 출력을 일관되게 유지하기 위해 and return getValue을 수행 하는 기능이 있습니다. valuevalue.replace(/\r\n/g,'\n')
Roy Tinker

1
프로그래밍에 익숙하지 않은 사람들에게 특히 좋은 질문입니다! HTML 외부와 JavaScript에서는 다음 / 새 줄로 나누는 방법을 아는 것이 좋습니다.
Eric Bishard

답변:


362

방금이 바보 같은 JavaScript를 사용하여 몇 가지 브라우저를 테스트했습니다.

function log_newline(msg, test_value) {
  if (!test_value) { 
    test_value = document.getElementById('test').value;
  }
  console.log(msg + ': ' + (test_value.match(/\r/) ? 'CR' : '')
              + ' ' + (test_value.match(/\n/) ? 'LF' : ''));
}

log_newline('HTML source');
log_newline('JS string', "foo\nbar");
log_newline('JS template literal', `bar
baz`);
<textarea id="test" name="test">

</textarea>

Windows의 IE8 및 Opera 9가 사용 \r\n됩니다. 내가 테스트 한 다른 모든 브라우저 (Windows의 경우 Safari 4 및 Firefox 3.5, Linux의 경우 Firefox 3.0)는을 사용 \n합니다. \nIE와 Opera가 값을 \r\n내부적 으로 다시 변환하지만 값을 설정할 때 모두 잘 처리 할 수 ​​있습니다 . Javascript의 Line endings 라는 세부 정보가 포함 된 SitePoint 기사가 있습니다 .

이것은 HTML 파일 자체의 실제 행 끝의 독립적 인 것이 있습니다 (모두 \n\r\n동일한 결과를 제공).

양식을 제출할 때 모든 브라우저 %0D%0A는 URL 인코딩에서 줄 바꿈을 정규화 할 수 있습니다. 이를 확인하려면 예를 들어 data:text/html,<form><textarea name="foo">foo%0abar</textarea><input type="submit"></form>제출 버튼을 누르십시오. (일부 브라우저는 제출 된 페이지의로드를 차단하지만 콘솔에서 URL 인코딩 된 양식 값을 볼 수 있습니다.)

그래도 당신이 결정을 많이 할 필요는 없다고 생각합니다. 줄 바꿈으로 텍스트를 나누려면 다음과 같이 할 수 있습니다.

lines = foo.value.split(/\r\n|\r|\n/g);

14
나를 위해 일했지만 글로벌 플래그를 사용해야했습니다 : / \ r \ n | \ r | \ n / g
AdrianoFerrari

17
@Edson과 잘못 \r\n되었습니다. 하나 대신 두 줄 바꿈으로 취급하기 때문입니다 . 짧게 원한다면 /\r?\n/g아마 할 것입니다 (아직도 여전히 Mac OS 9를 사용하고 있습니까?).
mercator

1
SitePoint 기사가 2004 년이라는 점을 감안할 때 현재 JS 구현과 관련이없는 정보가있을 수 있습니다.
cbmanica

경기는 훨씬 빠르게 분할보다는 가정입니다 : jsperf.com/regex-split-vs-match
윌트

이것은 과잉으로 보입니다. 더 간단한 해결책은 아래 답변을 참조하십시오!
Qasim

81

예, 보편적입니다.

'\n'범용 개행 문자 이지만 입력에 따라 개행 문자 앞에 캐리지 리턴 문자 ( '\r') 가있을 수 있음을 명심해야합니다 .


55
\ n은 LF ( 범용 줄 바꿈 문자)입니다. 정확한 개행 바이트 순서는 플랫폼에 따라 다릅니다 (\ r \ n, \ n 또는 \ r : en.wikipedia.org/wiki/Newline ). 그리고 이것이 랜턴이 묻는 질문입니다. 처음에 일반 개행 문자라고 말한 다음 앞에 CR이 올 수 있다고 말하면 자신과 모순됩니다. 어떤거야?
mercator

2
\ n은 줄 바꿈 문자가 앞에 오는 줄 바꿈 문자 인 줄 바꿈 문자입니다. 대부분의 Windows API 및 앱에서 CR을 줄 바꿈으로 구문 분석하지만 CR을 단독으로 사용해서는 안됩니다. LF는 Windows에서도 잘 작동합니다. CR은 컴퓨터가 전자 타자기 일 때의 인공물 일뿐입니다.
GolezTrol

3
@GolezTrol CR을 자체적으로 사용해야하는 유효한 이유가 있습니다. 예를 들어, 다음 줄로 이동하지 않고 줄을 덮어 쓰려면 콘솔 창의 줄 시작으로 돌아갑니다. 이것은 종종 명령 행 유틸리티에서 변화하는 진행률 표시기를 쓰는 데 사용됩니다.
Dan Bechard

2
@ Dan 의견에 감사드립니다. 물론 CR 자체에 대한 응용 프로그램이 있기 때문에 "절대"라고 말한 적이 없어야합니다. 그러나 문제는 명령 행 유틸리티가 아니라 Javascript에 관한 것입니다. 물론 CLI 모드에서 실행되는 스크립트가있을 수 있습니다 (CR이 말한대로 작동하는지는 모르겠지만). 또한 Javascript를 사용하여 명령 줄에서 실행되는 스크립트를 생성 할 수도 있습니다. 이것들은 규칙에 대한 가능한 예외이지만, 질문의 맥락에서 적용되지 않는 것 같습니다. 그럼에도 불구하고 언급 해 주셔서 감사합니다.
GolezTrol

65

"\ n"을 사용하지 마십시오. 이것을 시도하십시오 :

var string = "this\
is a multi\
line\
string";

백 슬래시를 입력하고 계속 트럭을 타십시오! 매력처럼 작동합니다.


ES6은 또한 tilde문자 (백틱이라고도 함) 와 함께 여러 줄 값을 지원합니다 .
Qasim

10
@ Qasim-FYI, 틸드와 백틱이 다른 문자라고 생각 합니다. ~틸드`백틱을 참조하십시오 .
Chris Burgess

1
아-네 맞아요. ES6은 여러 줄 문자열에 백틱 문자를 사용합니다
Qasim

2
합법적이지만 JS 서클에서는 눈살을 찌푸립니다. 가독성이 부족합니다. 가능하면 ES6의 백틱을 사용하십시오. 그렇지 않은 경우 \ n
gotofritz

3
코드를 작성할 때 작동합니다. OP는 텍스트 영역에서 텍스트를 구문 분석하는 것 같습니다.
jinglesthula

53

대소 문자를 확인한 다음 적용하는 대신 개행 문자의 모든 경우를 처리하는 것이 가장 쉬울 수 있습니다. 예를 들어, 개행을 교체해야하는 경우 다음을 수행하십시오.

htmlstring = stringContainingNewLines.replace(/(\r\n|\n|\r)/gm, "<br>");

1
훌륭한. 이후 버전 FF 및 IE에서 잘 작동합니다 (이전 버전은 테스트하지 않음)
EvilDr


13

이메일 링크 기능 "% 0D % 0A"사용

function sendMail() {   
var bodydata="Before "+ "%0D%0A";
    bodydata+="After"

var MailMSG = "mailto:aaa@sss.com" 
         + "?cc=07@sss.com" 
         + "&subject=subject" 
         + "&body=" + bodydata; 
window.location.href = MailMSG; 
} 

[HTML]

<a href="#" onClick="sendMail()">Contact Us</a>

탭 키에 대한 이러한 유형의 코드를 아는 사람이 있습니까? "% 0D % 09"를 시도했지만 작동하지 않습니다.
Nilay

7

현재 브라우저의 줄 구분 기호를 가져옵니다.

function getLineSeparator() {
  var textarea = document.createElement("textarea");
  textarea.value = "\n"; 
  return textarea.value;
}

3
어때요 return textarea.value;?
XP1

사용하는 것입니다 JSON.stringify결과에는 문자를 변경? alert()전화로 결과를 보려고하면 먼저

4

참고-ExtendScript JavaScript (Photoshop CS3 +와 같은 응용 프로그램에서 사용되는 Adobe Scripting Language)를 사용할 때 사용할 문자는 "\ r"입니다. "\ n"은 글꼴 문자로 해석되므로 많은 글꼴에 대신 블록 문자가 있습니다.

예를 들어 ( 'Note'라는 레이어를 선택하고 모든 기간 후에 줄 바꿈을 추가하려면) :

var layerText = app.activeDocument.artLayers.getByName('Note').textItem.contents;
layerText = layerText.replace(/\. /g,".\r");

이유를 알아 내려고 노력했다 \n<br/>... 내 포토샵 스크립트에서 작업하지 않은 감사합니다!
Jake Stoeffler 2014 년

3

ES6에서``따옴표 (Esc 버튼 아래에 있음)를 사용할 수 있습니다. 따라서 다음과 같이 작성할 수 있습니다.

var text = `fjskdfjslfjsl
skfjslfkjsldfjslfjs
jfsfkjslfsljs`;

1

JS 문자열로 작업 할 때 그렇습니다.

HTML을 생성하는 경우 <br />태그 를 사용해야 합니다 ( \n더 이상 JS를 다루지 않기 때문에)


1

\ n 또는 \ r \ n으로 줄 바꿈을 표현하는 데 문제가있었습니다 . 마차처럼 캐리지 리턴에 사용되는
문자 \ r 이 줄 바꿈처럼 작동했습니다.
따라서 어떤 경우에는 \ r도 고려하는 것이 좋습니다.


문자열에 ISO-8859-1 문자 세트가있는 경우 발생합니다
CodeBrauer

0
printAccountSummary: function()
        {return "Welcome!" + "\n" + "Your balance is currently $1000 and your interest rate is 1%."}
};
console.log(savingsAccount.printAccountSummary()); // method

인쇄물:

Welcome!
Your balance is currently $1000 and your interest rate is 1%.

0

실용적인 관찰 ... 내 NodeJS 스크립트에는 다음 기능이 있습니다.

function writeToLogFile (message) {
    fs.appendFile('myserverlog.txt', Date() + " " + message + "\r\n", function (err) {
        if (err) throw err;
    });
}

먼저 "\ n"만 가지고 있었지만 메모장에서 로그 파일을 열면 모든 항목이 같은 줄에 표시됩니다. 반면 메모장 ++는 각 항목을 개별 줄에 표시합니다. 코드를 "\ r \ n"으로 변경하면 메모장조차도 모든 항목을 자체 줄에 표시합니다.


-3

\n내가 만난 모든 경우에 잘입니다. 나는 당신이 웹을 사용 \n하고 , 사용 하고 걱정하지 않습니다 (줄 바꿈 관련 문제가 없다면).


-13

당신이 사용할 수 <br/>하고 document.write/, document.writeln한.


4
질문을 다시 읽으십시오. 구체적으로 그가 묻지 않았다고 말합니다<br>
Leigh
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.