<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>
