쉽게 쉽게

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

프로젝트 경험

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

곱마2 2024. 6. 26. 21:03
반응형

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로 입력 받은 글을 공백과 줄바꿈을 살려 출력하기

HTML에디터가 아닌 일반 textarea 로 입력 받은 글을 페이지에 출력해야 할 경우가 많이 있습니다. 출력시에는 보통 JSP 라면 형태로 출력합니다. 이 경우 html 태그들은 escape 되어서 태그가 화면에 그

offbyone.tistory.com

https://gocoder.tistory.com/2391

 

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

을 사용하는 이유 안녕하세요. 고코더 입니다. JSP 페이지를 작성하면 친숙하게 사용하는 문법 중에 하나가 이 c:out입니다. 데이터를 출력하는 가장 기본적인 방법입니다. 무심코 쓰였던 이 문법

gocoder.tistory.com

 

반응형