웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
자바스크립트에서 줄바꿈을 바꾸는 방법에 대하여 알아봅니다. 만약 줄바꿈된 텍스트를 <br>태그로 변경하거나 반대로 <br>태그를 줄바꿈으로 변경하려면 어떻게해야할까요? 아래에서 자세히 알아보겠습니다.
# 줄바꿈을 br로 바꾸는 경우는? 언제 필요한가
<textarea> 태그를 사용하여 입력받은 값의 줄바꿈(white spaces)은 <br>태그가 아닌 줄바꿈 코드로 표시됩니다. 만약 서버에 저장할 경우 database에 그대로 저장할 수 있지만 대부분 <br>태그로 변경하여 저장하는 방법을 많이 사용합니다. 이런 경우에 사용할 수 있습니다.! 정규표현식을 사용하여 줄바꿈을 바꾸는 방법
먼저 정규표현식을 사용하여 줄바꿈을 <br>로 바꿔보겠습니다. 아래의 예제는 textarea 태그의 값을 불러와 줄바꿈을 <br>로 변경합니다.<textarea>
web
is
free
</textarea>
web
is
free
</textarea>
위의 값을 <br> 태그로 바꾸는 스크립트는 아래와 같습니다.
var text = document.querySelector('textarea');
var result = text.value.replace(/(\n|\r\n)/g, '<br>');
console.log(result);
var result = text.value.replace(/(\n|\r\n)/g, '<br>');
console.log(result);
결과는 아래와 같습니다.
web<br>is<br>free
그렇다면 반드로 br 태그를 다시 줄바꿈으로 바꾸는 방법을 아래에서 알아보겠습니다.
# br태그를 줄바꿈 형식으로 바꾸는 방법
이번에도 역시 정규표현식을 사용하여 바꿀 수 있습니다. 만약 모든 br 태그를 줄바꿈으로 바꾸려면 아래와 같이 스크립트를 작성합니다.var text = 'web<br>is<br>free';
result = text.replace(/(<br>|<br\/>|<br \/>)/g, '\r\n');
console.log(result);
result = text.replace(/(<br>|<br\/>|<br \/>)/g, '\r\n');
console.log(result);
출력결과는 아래와 같습니다.
web
is
free
is
free
여기까지 br 태그를 줄바꿈으로 바꾸고 줄바꿈을 다시 br 태그로 바꾸는 방법을 알아보았습니다.
아래의 글도 찾고 계시지 않나요?
