일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
- spring security 설정
- 자바의정석
- 티스토리챌린지
- 멀티프로세싱
- 쿠키
- SQL Mapper
- 객체지향
- 입출력
- 붕대 감기
- 다형성
- 중첩 break
- 혼공얄코
- 리눅스
- 자바의 정석
- 오블완
- 오버로딩
- over()
- hackerrank
- java
- continue 사용법
- CPU
- break 사용법
- 캡슐화
- 프로그래머스
- spring security
- contiune
- 붕대 감기 자바
- 오버라이딩
- 프로그래머스 붕대 감기
- 멀티태스킹
- Today
- Total
쉽게 쉽게
[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
https://gocoder.tistory.com/2391
'프로젝트 경험' 카테고리의 다른 글
[Eclipse] 이클립스 Git 연동하기(.gitignore 설정 포함) (5) | 2024.08.30 |
---|---|
[Eclipse] 프로젝트 내•외부에 jar 추가 (0) | 2024.08.06 |
[ibatis] DML(insert, update, delete)의 return값 (0) | 2023.07.23 |
SVN 프로젝트 merge 충돌 (0) | 2023.07.09 |
IP주소 찾는법 (0) | 2023.06.04 |