[HTML] textarea 출력시 공백과 개행 처리

1. 이슈

textarea로 저장한 값을 출력 시 모든 글내용이 한 줄로 붙어서 나오는 경우를 볼 수 있다.

이런 현상의 원인은 textarea의 개행문자가 \r\n, \n으로 되어있는데 웹에서는 <br> 태그를 사용하기에 줄바꿈이 안되는 것이다.

이를 해결할 다양한 방안을 알아봤다.

2. textarea 개행처리

1. JSTL의 <c:out> 사용

// 저장한 값대로 출력하기
<textarea><c:out value="${content}" /></textarea>

<c:out>를 사용하여 저장한 값 그대로 출력할 수 있다.

<c:out>은 escaperXml 속성을 가지고 있어 문자를 그대로 노출하게 만들어 준다. (특수문자를 문자 엔티티 코드로 변환)

<c:out>의 장점을 더 설명하면 보안성이 뛰어나다는 점이 있다.

Cross-site Scripting 공격은 스크립트를 주입시켜서 사이트를 침입한다.

아래와 같이 넣었을떄 EL태그는 alert창이 동작하지만 <c:out>은 <script>alert('css');</script> 라는 문구가 나타날 뿐이다.

//일반적인 EL태그시 alert창 동작
${"<script>alert('GoCoder');</script>"}

//<c:out> 태그사용시 문구로 나타남 
<c:out value="${"<script>alert('css');</script>"}"/>

2.  <pre> 태그 사용하기

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

pre 태그란?

pre 태그는 서식이 미리 지정된 텍스트를 정의한다.

pre요소의 텍스트는 고정 너비 글꼴로 표시되며 공백과 줄 바꿈을 모두 유지한다.

즉 html의 태그의 특성도 적용이 되면서 입력한 내용 그대로 화면에 출력을 해준다.

 

3. white-space 사용

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

white-space에 사용할 수 있는 값은 아래와 같다.

• normal : 여러 개의 공백은 하나로 표시되고, \n은 무시되며 긴 행은 필요시에 넘어간다(wrap).
• nowrap : normal과 같은데 긴 행이 wrap 되지 않는다.
• pre : 여러개의 공백과 개행문자가 모두 표현된다. 즉 <pre> 태그와 동일하게 동작된다. 긴 행은 개행문자에서만 개행이 되고, wrap 되지 않는다.

4. 서비스단(java)이나 프레젠테이션단(jstl, javascript)에서 '\n' 개행문자를 '<br/> 태그로 변환

 

JAVA단에서 처리

 //java단에서 view 넘기기전에 미리 치환
 row.put("content", content.replaceAll("\n", "<br>").replaceAll("\r", "<br>"));

 

Javascript로 처리

//js로 치환
var text = document.getElementById("textarea").value;
text = text.replace(/(?:\r\n|\r|\n)/g, '<br>');

//이때는 태그를 사용해야 하기에 escapeXml="false"로 처리
<div><c:out value="${content}" escapeXml="false" /></div>

 

https://offbyone.tistory.com/326

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

https://gocoder.tistory.com/2391

JSTL - <c:out> 사용법과 특징