text area에서 입력한 값을 출력할 때 생각해야 할 점 (개행 문자)

이러한 내용을 text area에 넣고 DB에서 꺼내서 출력할 때
개행 문자가 모두 쉽게 반영되는 상상을 한다.

하지만 실상은 엔터가 제대로 안먹힌 내용을 보게 될 것이다.
이를 해결하기 위한 2가지 방법이 있다. 그리고 2번째 방법이 훨씬 간편하다.

1. replace

cont = cont.replace(/(?:\r\n|\r|\n)/g, '<br>');
/(?:\r\n|\r|\n)/g 이 부분은 정규 표현식으로
윈도우, 맥, 리눅스에서 사용되는 모든 개행문자를 <br>로 바꾼다.

서버에 내용을 보내기전에 개행 문자가 필요한 부분에 모두 <br>을 넣으면 다시 출력할 때 아래와 같이 나타날 것이다.

이를 다시 엔터로 바꿔주자

cont = cont.split('<br>').join("\r\n");

오 ㅎㅎ 그렇다

2. style="white-space:pre-line;

출력할 div에 style="white-space:pre-line; 속성을 먹여주면 된다. 끝

... 위에와 비교하면 너무나도 간단하다.

white-space 라는 스타일에 대해서 잘 설명된 블로그들이다.

https://offbyone.tistory.com/326
https://www.daleseo.com/css-white-space/