개요
문자열 배열 값에서 특정 구분 기호인 물결표(~)가 나타날 때마다 줄바꿈을 추가하고 싶다면, 먼저 split() 메서드로 문자열을 분할한 뒤, join() 메서드를 사용해 각 요소 사이에 줄바꿈 태그인 <br>을 연결하면 됩니다. 이 방법은 복잡한 반복문 없이도 단 두 줄의 코드로 깔끔하게 줄바꿈을 처리할 수 있다는 장점이 있습니다.
기본 예시
다음과 같은 문자열이 있다고 가정해 보겠습니다.
This is demo text 1!~This is demo text 2!~~This is demo text 3!
물결표(~)가 나타나는 자리마다 줄바꿈을 적용하면 결과는 아래와 같습니다.
This is demo text 1!
This is demo text 2!
This is demo text 3!
작동 원리
이 기법의 핵심은 두 가지 문자열 메서드의 조합입니다.
- split('~'): 문자열을 구분 기호인 물결표(~)를 기준으로 잘라내어 새로운 배열을 생성합니다.
- join(" <br> "): 분할된 배열의 모든 요소를 <br> 태그를 사이에 두고 하나의 문자열로 다시 합칩니다.
즉, "분할 → 재조합" 과정을 통해 구분 기호가 줄바꿈으로 자연스럽게 대체됩니다.
전체 예제
아래는 실제 동작을 확인할 수 있는 완전한 HTML 데모 코드입니다.
<!DOCTYPE html>
<html>
<body>
<h2>줄바꿈 추가하기</h2>
<script>
var myArray = 'This is demo text 1!~This is demo text 2!~~This is demo text 3!~This is demo text 4!~~This is demo text 5!';
document.write("원본 문자열: "+myArray);
var brk = myArray.split('~');
var res = brk.join(" <br> ");
document.write("<br><br>"+res);
</script>
<p>물결표(~)가 나타날 때마다 위와 같이 줄바꿈이 추가됩니다.</p>
</body>
</html>
실행 결과 설명
위 코드를 브라우저에서 실행하면 먼저 원본 문자열 전체가 한 줄로 출력됩니다. 그 다음 split('~')에 의해 문자열이 여러 조각으로 나뉘고, join(" <br> ")을 통해 각 텍스트가 <br> 태그로 이어져 최종적으로는 물결표가 있던 자리마다 줄이 바뀌어 각 문장이 별도의 줄에 표시되는 것을 확인할 수 있습니다.
참고 사항
- 구분 기호가 연속해서 나타나면(예: ~~) 해당 위치에는 빈 문자열 요소가 생기므로, 불필요한 빈 줄이 출력될 수 있습니다.
- 화면에 실제 줄바꿈을 표현하려면 <br> 태그를 사용하지만, 콘솔이나 텍스트 파일용이라면 '\n'(개행 문자)을 join의 인수로 사용하는 것이 더 적합합니다.