2018. 10. 25. 23:26
반응형

게시판이나 댓글을 작성할 때 엔터키를 입력하는 경우가 있다.

이걸 db에 저장하여 게시글을 읽도록 html로 표시할 때는 엔터키가 무시되어 나타날 수 있다.

마치 네이버 댓글처럼


<pre> 태그를 이용하면 해결할 수도 있지만 그다지 좋은 방법 같지는 않다.

엔터키를 <br/> 태그로 변환시키는 것이 바람직해보였다.


자바스크립트의 replace 함수를 활용하여 엔터키를 <br/> 태그로 변환할 수 있다.

다음의 빈약한 예제를 통해 잘되는지 알아볼 수 있었다.

참고로 편의상 제이쿼리를 이용하여 테스트했다.



html 태그 확인

결과 확인


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea id="test" rows='10' cols='60'></textarea><br/>
<button onclick="getHtml();">click</button><br/>
html 태그 확인<br/>
<div id="raw"></div>
<hr/>
결과 확인<br/>
<div id="result"></div>

<script>
	function getHtml(){
		var html = $("#test").val().replace(/(?:\r\n|\r|\n)/g, '<br />');
		$("#result").html(html);
		$("#raw").text(html);
	}
</script>

반응형