textarea로 입력 받은 글을 공백과 줄바꿈을 살려 출력하기

HTML에디터가 아닌 일반 textarea 로 입력 받은 글을 페이지에 출력해야 할 경우가 많이 있습니다. 출력시에는 보통 JSP 라면 <c:out value="${content}" /> 형태로 출력합니다.  이 경우 html 태그들은 escape 되어서 태그가 화면에 그대로 보여지게 됩니다. 이것은 XSS(Cross Site Scripting)를 방지 하기 위한 방법이기도 합니다.

 

하지만, 그냥 출력하게 되면 컨텐츠의 모든 라인이 하나의 행으로 붙어서 출력이 되어서 보기 힘들게 됩니다. textarea로 입력한 문자열을 개행하여 보여주는 방법을 알아보겠습니다.

 

 

1. 출력에도 textarea를 사용하기

 

출력할 때도 textarea에 출력하는게 가장 간편한 방법입니다.

 

<textarea cols="50" rows="8"><c:out value="${content}" /></textarea>

 

 

 

2. 서비스 단에서 또는 프레젠테이션 단에서 개행문자(\n)을 <br/>로 치환하는 방법

 

이 경우 escaping 후에 치환해야 하기 때문에 처리가 복잡해집니다.

 

content = org.springframework.web.util.HtmlUtils.htmlEscape(content); content = content.replaceAll("\n", "<br/>"); <div><c:out value="${content}" escapeXml="false" /></div>

 

 

 

 

3. <pre> 태그를 사용하기

 

<pre><c:out value="${content}" /></pre>

 

 

 

 

4. white-space 스타일을 사용하는 방법

 

스타일 시트(CSS)를 사용해서 개행과 공백등이 원래대로 보이도록 처리하는 방법을 알아봅니다.

 

<div style="white-space:pre;"><c:out value="${content}" /></div>

 

 

white-space에 사용할 수 있는 값은 다음과 같습니다.

 

- normal : HTML의 기본 값입니다. 여러개의 공백은 하나로 표시되고, \n은 무시되며 긴 행은 필요시에 Wrap 됩니다.

- nowrap : normal과 같은데 긴행이 wrap 되지 않습니다. 글을 포함한 컨테이너를 넘어서 표시됩니다.

- pre : 여러개의 공백과 개행문자가 모두 표현됩니다. <pre> 태그와 같이 동작합니다. 긴 행은 개행문자에서만 개행이 되고, wrap  되지 않습니다.

- pre-line : 여러개의 공백은 하나로 표시되고, 긴 행은 필요시 wrap 됩니다. 개행문자를 만나도 개행됩니다.

- pre-wrap : 여러개의 공백과 개행문자가 모두 보존됩니다. 개행문자외 에서도 필요시 wrap  됩니다.