div 요소 안에 다음과 같이 쉼표로 구분된 텍스트가 있다고 가정해 보겠습니다.
<div class="commaSeparated"> This,is,the,first,JavaScript,program </div>
쉼표로 구분된 텍스트를 별도의 줄로 변환하려면 trim() 메서드와 함께 split() 메서드를 쉼표(,)를 기준으로 사용해야 합니다. 먼저 trim()으로 문자열 앞뒤의 불필요한 공백을 제거한 뒤, split(',')을 호출해 문자열을 배열로 나누고, 이 배열을 순회하며 목록 형태로 렌더링하는 방식입니다.
예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initialscale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div class="commaSeparated">
This,is,the,first,JavaScript,program
</div>
</form>
<script>
var allTheData = document.querySelector('.commaSeparated').textContent.trim().split(',')
var separateList = '<ul>'
allTheData.forEach(function(value) {
separateList += '<li>' + value + '</li>';
});
separateList += '</ul>';
document.querySelector(".commaSeparated").innerHTML = separateList;
</script>
</body>
</html>코드 설명
위 코드의 핵심 동작 과정은 다음과 같습니다.
1. querySelector()로 클래스명이 'commaSeparated'인 div 요소를 선택합니다.
2. textContent로 div 내부의 텍스트를 가져옵니다.
3. trim()으로 앞뒤 공백을 제거합니다.
4. split(',')을 통해 쉼표를 기준으로 문자열을 배열로 분리합니다.
5. forEach()로 각 항목을 <li> 태그로 감싸 하나의 <ul> 목록 문자열을 만듭니다.
6. 최종적으로 innerHTML에 대입해 화면에 여러 줄의 목록으로 표시합니다.
실행 방법
위 프로그램을 실행하려면 파일 이름을 "anyName.html(index.html)"로 저장한 후 해당 파일을 마우스 오른쪽 버튼으로 클릭합니다. 그다음 VS Code 편집기에서 "Open with Live Server" 옵션을 선택하면 브라우저에서 바로 결과를 확인할 수 있습니다.
출력 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
