[자바스크립트] 줄바꿈 Br 태그 또는 Br 태그 줄바꿈으로 바꾸기

자바스크립트에서 줄바꿈을 바꾸는 방법에 대하여 알아봅니다. 만약 줄바꿈된 텍스트를 <br>태그로 변경하거나 반대로 <br>태그를 줄바꿈으로 변경하려면 어떻게해야할까요? 아래에서 자세히 알아보겠습니다.



# 줄바꿈을 br로 바꾸는 경우는? 언제 필요한가<textarea> 태그를 사용하여 입력받은 값의 줄바꿈(white spaces)은 <br>태그가 아닌 줄바꿈 코드로 표시됩니다. 만약 서버에 저장할 경우 database에 그대로 저장할 수 있지만 대부분 <br>태그로 변경하여 저장하는 방법을 많이 사용합니다. 이런 경우에 사용할 수 있습니다.

! 정규표현식을 사용하여 줄바꿈을 바꾸는 방법
먼저 정규표현식을 사용하여 줄바꿈을 <br>로 바꿔보겠습니다. 아래의 예제는 textarea 태그의 값을 불러와 줄바꿈을 <br>로 변경합니다.

<textarea>
  web
  is
  free
</textarea>

위의 값을 <br> 태그로 바꾸는 스크립트는 아래와 같습니다. 

var text = document.querySelector('textarea');
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);

출력결과는 아래와 같습니다.

web
is
free

여기까지 br 태그를 줄바꿈으로 바꾸고 줄바꿈을 다시 br 태그로 바꾸는 방법을 알아보았습니다.

 

출처 : https://webisfree.com/2017-08-07/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%A4%84%EB%B0%94%EA%BF%88-br-%ED%83%9C%EA%B7%B8-%EB%98%90%EB%8A%94-br-%ED%83%9C%EA%B7%B8-%EC%A4%84%EB%B0%94%EA%BF%88%EC%9C%BC%EB%A1%9C-%EB%B0%94%EA%BE%B8%EA%B8%B0