[basic] HTML - <br> 태그 ★ - 줄바꿈 (=br태그/br요소 = 비알태그/비알요소) ※ 한줄아래로 줄바꿈 = 라인브레이크 ※ 소괄호로 묶인 문자열 줄바꿈 시키기

<style>
.hz {text-align:center;}
</style>

<div class="hz">홈짱닷컴(Homzzang.com)</div>

<script>

let hz = document.querySelector('.hz');

let txt = hz.innerHTML;

hz.innerHTML = txt.replace(/\(([^)]+)\)/, "<br>$1");

</script>

 

결과보기

---

PS. txt.replace(/\(([^)]+)\)/, "<br>$1") 코드 의미

1.
문자열에서 (Homzzang.com) 부분을 찾아서 <br> 태그와 함께 $1로 대체하는 정규표현식임. 정규표현식은 특정한 규칙을 가진 문자열의 집합을 찾거나 대체하는 데 사용되는 문자열 패턴 의미함.

 

2.

여기서 사용된 정규표현식 / \(([^)]+)\)/ 의미

• \( : 왼쪽 괄호 찾기.
• ([^)]+) : 괄호 안에 포함된 모든 문자열을 캡처함. 여기서 [^)]는 오른쪽 괄호가 아닌 모든 문자열을 의미하며, +는 1개 이상의 문자열을 의미함. 따라서 (Homzzang.com) 부분을 캡처함.
• \) : 오른쪽 괄호 찾기.
• 위 정규표현식은 괄호 안에 포함된 문자열을 캡처하여 $1으로 참조할 수 있도록 함.

 

3.

replace() 메소드는 첫 번째 인수로 받은 정규표현식을 사용하여 문자열에서 매칭되는 부분을 찾아 두 번째 인수로 받은 문자열로 대체함. 여기서는 (Homzzang.com) 부분을 <br> 태그와 함께 $1으로 대체하여 문자열을 수정함.

 
4. 줄바꿈 후, 각 라인의 양쪽 끝 공백 제거하려면, 아래 JS코드 사용.
<script>

let hz = document.querySelector('.hz');

let txt = hz.innerHTML;

txt = txt.replace(/\(([^)]+)\)/, "<br>$1");

txt = txt.split("<br>").map(line => line.trim()).join("<br>");

hz.innerHTML = txt;
</script>