textarea에 포함된 줄바꿈(엔터) 저장하고 출력, 수정하는 방법

textarea 태그에 입력된 엔터(줄바꿈)을 서버에서 저장하고 화면에 뿌려주는 방법

 

<textarea type="text" id="comment"></textarea>

textarea 태그에 작성한 내용에 엔터(줄바꿈)이 포함되어 있다면 어떻게 서버에 저장하고

필요할때 화면에 엔터(줄바꿈)를 포함해서 뿌려줄 수 있을까?

 

먼저 서버에 사용자가 textarea에 작성한 내용을 전송해보자.

 

const content = $("#comment").val();

$.ajax("url", {
	type: "POST",
	contentType: "application/json",
	data: JSON.stringify({
	content: content
	})
})

우선 서버에 ajax로 textarea의 내용을 POST 요청으로 전송하는 코드의 일부이다.

 

textarea 내용

엔터를 포함한 위의 내용으로 서버에 전송을 해보자.

 

서버에 받은 내용

엔

터

로 전송되어 온다.

 

이 내용을 데이터베이스에 줄바꿈을 변환하여 저장하고 출력하려고 다음과 같은 방법을 생각해냈다.

 

EscapeUtil 클래스

줄바꿈 문자 '\n'를 "<br>"로 변환하여 저장하는 코드를 Service Layer에 추가 작성해주자.

 

DB 데이터

데이버베이스에서는 줄바꿈을 <br>로 저장하는것이다.

 

const content = $("<div class='comment-content'></div>")
                    .html(comment.content);

웹 페이지에 출력을 할때는 다음과 같이 html 형식 그대로 출력한다면 줄바꿈이 적용된 내용을 출력할 수 있다.

 

출력

 

수정 기능을 구현할때 textarea에 줄바꿈(엔터)를 포함하여 출력하고싶다면

const commentForm = $('<textarea id="comment-update-form"></textarea>')
	.text(content.html().replaceAll("<br>", "\n"));

위와 같이 textarea에 html 내용을 그대로 가져오는데 <br>을 줄바꿈 문자 "\n"으로 replace하여 출력하면 된다.

 

댓글 수정시 엔터(줄바꿈) 포함