JavaScript에서 특정 구분자(예: ~)가 나타날 때마다 문자열을 나누려면 split() 메서드를 사용하면 됩니다. 문자열을 배열로 분할한 후, 각 요소 사이에 줄바꿈 태그인 <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>')을 사용해 각 요소를 줄바꿈 태그와 함께 연결합니다.
전체 예제 코드
아래는 브라우저에서 바로 실행해 볼 수 있는 완전한 예제입니다.
<!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>코드 설명
1단계 - split(): myArray.split('~')은 ~ 문자를 기준으로 원본 문자열을 잘라내어 각 조각을 요소로 하는 배열을 반환합니다.
2단계 - join(): brk.join(" <br> ")은 분할된 배열의 모든 요소를 <br> 태그로 연결하여 하나의 문자열로 만듭니다. 이렇게 하면 화면에 출력될 때 각 문장이 새로운 줄에 표시됩니다.
이 방법은 CSV 형태의 데이터 처리, 사용자 입력 파싱, 로그 데이터 포맷팅 등 다양한 상황에서 유용하게 활용할 수 있습니다.