textarea를 줄별로 처리하기

문제

댓글처럼 textarea에서 입력한 모양 그대로 화면에 출력하고 싶다

해결

String 객체의 split 메서드를 줄 바꿈 이스케이프 문자열(\n)과 함께 사용하면 textarea의 콘텐츠를 줄별로 분리할 수 있다.

//줄 바꿈 문자를 기준으로 textarea 문자열을 분리
var txtBox = document.getElementById("inputbox");
var lines = txtBox.value.split("\n");

//내용을 HTML 버전으로 변경
var resultString  = "<p>";
for (var i = 0; i < lines.length; i++) {
    resultString += lines[i] + "<br>";
}
resultString += "</p>";

//페이지에 출력
var   blk   = document.getElementById("result");
blk.innerHTML  =  resultString; 

설명

위 코드는 모든 줄 바꿈 문자(\n)를 HTML의 br 요소로 변환한다.

예제보기 http://embed.plnkr.co/mBfHaFGgDdJnl4Zz8KHL/preview