[Javascript] 줄바꿈 기호 처리

📢 들어가며

일반적으로 텍스트의 줄바꿈 표기는 CR, LF, CRLF 3가지가 사용된다.

• CR(Carriage Return, \r) : Mac OS 9 이전에 사용
• LF(Line Feed, \n) : 리눅스, 최신 버전의 Mac OS 에서 사용
• CRLF(\r\n) : CR + LF를 합친것으로 윈도우에서 사용

텍스트에 위와 같은 기호가 포함되어 있는 경우, 동일하게 줄바꿈 처리가 될 수 있도록 작업을 해주어야 한다.

 

브라우저에서 지원하는 줄바꿈 표기

HTML에서는 CR, LF, CRLF 3가지 방식 모두 지원한다. 그렇기 때문에 HTML을 작성할 때는 줄바꿈 표기에 주의해서 코드를 작성할 필요는 없다.

 

하지만 최종적으로 HTML 파싱하는 과정에서 CR, CRLF 표기는 모두 LF 표기로 변환되어 처리된다.

html.spec.whatwg.org 참조

 

 

문자 참조

문자 참조란 HTML에서 특정 문자를 직접 쓰기 어렵거나(예약 기호, 제어 문자 등), 명시적으로 지정하고 싶을 때 쓰는 이스케이프 표기이다. 항상 &로 시작해서 한 글자를 나타낸다.

 

아래와 같이 문자 참조를 사용하면 해당하는 문자로 변환된다.

<p>&amp;, &lt;, &gt;, &quot;, &apos;</p>

 

개행을 문자 참조로 쓸 땐 LF만 사용이 가능하다. \n는 
로 사용이 가능하다.

이때 일반 태그에서는 사용해도 줄바꿈이 되지 않는다.

<p>line1&#10;line2</p>

 

아래와 같이 엔터를 사용하는 경우에도 동일하게 줄바꿈 되지 않는것을 확인할 수 있다.

 

<p>
  Hello
  World
</p>

 

이는 기본적으로 CSS에서 white-space 속성이 normal로 설정되어 있기 때문이다. 이 설정에서는 줄바꿈 기호는 공백으로 처리된다.

 

줄바꿈 기호를 실제로 줄바꿈되도록 처리하고 싶다면 white-space: pre 또는 pre 태그를 사용하면 된다.

 

 

textContent vs innerHTML

아래의 코드는 자바스크립트를 이용해서 변수에 담긴 값을 innerHTML을 사용해서 렌더링하고 있다.

아래의 코드를 확인해보면 LF와 CR 모두 정상적으로 줄바꿈이 되는 것을 확인할 수 있다.

See the Pen Untitled by suld2495 (@suld2495) on CodePen.

 

innerHTML 대신 textContent를 사용해하면 LF는 정상적으로 줄바꿈이 되지만 CR은 줄바꿈이 되지 않는 것을 확인할 수 있다.

See the Pen Untitled by suld2495 (@suld2495) on CodePen.

 

그 이유는 textContent를 사용하는 경우 HTML 파서의 CR/CRLF를 LF로 정규화하는 과정을 거치지 않기 때문에 CR 기호가 그대로 남아있다.

 

white-space: pre 로 설정되어 있어도 CR 기호는 공백으로만 처리되기 때문에 줄바꿈이 되지 않는다.

textContet는 텍스트 노드만 단순 교체해준다.
innerHTML은 HTML로 파싱하고 DOM을 재구성한다.

 

그래서 위와 같이 데이터로 저장된 문자열을 출력해야하는 경우, CR/CRLF를 모두 찾아 LF로 변경해주는 코드를 사용하는 것이 안전하다.

 

아래와 같이 적용하면 정상적으로 줄바꿈이 되는 것을 확인할 수 있다.

const data = 'Hello\rWorld';
document.querySelector('p').textContent = data.replace(/(?:\r\n|\r|\n)/g, '\n');

 

위와 같은 경우에 innerHTML을 사용하는 경우 간단하게 해결이 될 수 있지만, innerHTML은 HTML을 파싱하는 과정을 거치기 때문에 위와 같이 텍스트만 처리하는 경우에는 textContent가 유리하다.