[html,javascript] TEXTAREA 값 엔터(줄바꿈) 적용하기

<textarea>

<text>태그와 같은 기능을 수행하지만 

<input type='text'>, <text>는 한 줄의 텍스트를 입력 받게 된다.

반면

<textarea> 의 경우 여러 줄의 text 값을 입력 받을 때 사용하게 되는 텍스트 박스이다.

<textarea> 내의 엔터가 포함 된 text를 입력 하게 되고 해당 값을 자바스크립트 등으로 값을 출력해보면 

아래의 그림 처럼 값을 얻을수 있다.

- 화면 textarea 입력 화면

- jquery를 이용하여 textarea 값을 확인 

- textarea의 값을 자바 단에서 받은 값 

보통 우리는 화면에서 textarea의 값을 jquery를 이용하여 값을 가져오고 ajax를 통해 자바단(controller) 로 값을 던지게 된다.

이를 DB에 저장하고 추루 이 값을 그대로 출력했을때는 아래의 그림 처럼 엔터값(줄바꿈) 이 적용 안되는 것을 볼 수 있다.

이는 TEXTAREA의 값은 TEXT 값이고 이 안에서 엔터(줄바꿈) 값은 \n 으로 표현된다.

이를 <br> 로 치환하여 db 저장 하면 출력시 아래의 화면 같이 줄바꿈이 적용되어 표현이 된다.

하지만 아래 그림처럼 해당 값을 수정해야 될 경우가 있을 때는 아래처럼 줄바꿈을 나타내는 <br> 이 text로 표현 되어 나오게 된다.

이러한 경우를 다 고려 했을 때 다음과 같이 2가지 방법을 사용 할 수 있다.

1, textarea 값을 DB 저장 후 수정이 가능 할 경우 

textarea 값을 치환 없이 DB 저장 -> 수정 시에는 그대로 값을 출력,  단순 값 출력일 경우 '\n'을 <br> 태그로 수정하여 출력

2. textarea 값을 DB 저장 후 단순 출력 만 할 경우

textarea 값의 엔터값(줄바꿈) '\n' 을 <br> 로 치환 하여 DB 저장 -> 후에 DB 값 그대로 출력