[Javascript] CRLF 치환하기(textarea 개행 시, 주의사항)

안녕하세요.

 

이번 포스팅에서는 HTML 요소 중 하나인 textarea를 개행할 때 사용되는 CRLF를 치환하는 방법에 대해서 적어보겠습니다.

 

---

1. HTML vs HTML_textarea

- HTML 내에서의 개행 : <br/>

- HTML 요소인 textarea에서의 개행 : CRLF(\r\n)

 

 

 

2. 문제 배경

- JS에서 CRLF가 오류를 일으킬 때가 있다.

→ ex) textarea(개행(CRLF)이 포함된 값이 있음)가 포함된 HTML 문자열을 innerHTML에 넣으니 오류 발생.

 

 

 

3. 해결 방법

1) innerHTML에 넣기 전에 <br/>로 치환하여 사용(innerHTML이 아니더라도, 오류가 나는 함수에서 사용 가능)

2) textarea에서 개행은 안이루어지고, <br/>로 보인다.

3) 그럼 다시, javascript에서 replaceAll을 이용해서 <br/>을 다시 \r\n으로 치환한다.

 

 

 

4. 치환 방법

1) CRLF(\r\n) → <br/>로 변경하는 방법

variable1 = variable1.replaceAll("/\r\n|\r|\n/", "<br/>");

 

2) CRLF(\r\n) → <br/>로 변경하는 방법

textarea에서 제대로 개행이 작동하도록

document.getElementById("sample").value = document.getElementById("sample").value.replaceAll("<br/>", "\r\n");

 

 

 

참고) 특정 HTML요소를 가져오는 방법

아래의 코드에서는 textarea의 요소들을 다 가져와서 개행을 위해 치환하는 코드입니다.

var textareas = document.getElementsByTagName('textarea');
for(var i=0; i<textareas.length; i++){
    textareas[i].value = textareas[i].value.replaceAll("<br/>", "\r\n");
}