반응형
기본 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sort Without Articles</title>
</head>
<body>
<style>
body {
margin: 0;
font-family: sans-serif;
background: url("https://source.unsplash.com/nDqA4d5NL0k/2000x2000");
background-size: cover;
display: flex;
align-items: center;
min-height: 100vh;
}
#bands {
list-style: inside square;
font-size: 20px;
background: white;
width: 500px;
margin: auto;
padding: 0;
box-shadow: 0 0 0 20px rgba(0, 0, 0, 0.05);
}
#bands li {
border-bottom: 1px solid #efefef;
padding: 20px;
}
#bands li:last-child {
border-bottom: 0;
}
a {
color: #ffc600;
text-decoration: none;
}
</style>
<ul id="bands"></ul>
<script>
const bands = ['The Plot in You', 'The Devil Wears Prada', 'Pierce the Veil', 'Norma Jean', 'The Bled', 'Say Anything', 'The Midway State', 'We Came as Romans', 'Counterparts', 'Oh, Sleeper', 'A Skylit Drive', 'Anywhere But Here', 'An Old Dog'];
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sort Without Articles</title>
</head>
<body>
<style>
body {
margin: 0;
font-family: sans-serif;
background: url("https://source.unsplash.com/nDqA4d5NL0k/2000x2000");
background-size: cover;
display: flex;
align-items: center;
min-height: 100vh;
}
#bands {
list-style: inside square;
font-size: 20px;
background: white;
width: 500px;
margin: auto;
padding: 0;
box-shadow: 0 0 0 20px rgba(0, 0, 0, 0.05);
}
#bands li {
border-bottom: 1px solid #efefef;
padding: 20px;
}
#bands li:last-child {
border-bottom: 0;
}
a {
color: #ffc600;
text-decoration: none;
}
</style>
<ul id="bands"></ul>
<script>
const bands = ['The Plot in You', 'The Devil Wears Prada', 'Pierce the Veil', 'Norma Jean', 'The Bled', 'Say Anything', 'The Midway State', 'We Came as Romans', 'Counterparts', 'Oh, Sleeper', 'A Skylit Drive', 'Anywhere But Here', 'An Old Dog'];
</script>
</body>
</html>
목표
알파벳 순으로 정렬할 때 관사 (정관사, 부정관사)를 제외한 내용의 순으로 정렬한다.
코드 분석
function strip(bandName) {
return bandName.replace(/^(a |the |an )/i, '').trim();
}
const sortedBands = bands.sort((a, b) => strip(a) > strip(b) ? 1 : -1);
document.querySelector('#bands').innerHTML =
sortedBands
.map(band => `<li>${band}</li>`)
.join('');
function strip(bandName) {
return bandName.replace(/^(a |the |an )/i, '').trim();
}
const sortedBands = bands.sort((a, b) => strip(a) > strip(b) ? 1 : -1);
document.querySelector('#bands').innerHTML =
sortedBands
.map(band => `<li>${band}</li>`)
.join('');
먼저 strip부터 보겠다.
내용을 보면 .replace부분이 먼저 보이는데, 이것은 a, the, an 을 공백으로 바꿔서 리턴해주는 것이다. trim은 앞 부분과 뒷 부분의 공백을 지워주는 메서드이다.
다음, sortedBands라고 선언한 변수의 내용을 보면 sort에 따라 알파벳 순으로 정렬해주는것인데 strip이 된 내용이기 때문에 관사들이 모두 제외된 상태로 정렬해준다.
마무리
.replace가 조금 새로웠고 나머지는 한두번정도는 본 내용이라 괜찮았다.
다음부터는 사용된 주요 코드 파트를 넣어봐야겠다.
끝.
반응형
'개발 > JavaScript 30' 카테고리의 다른 글
| 19. Webcam Fun (0) | 2017.04.24 |
|---|---|
| 18. Adding Up Times with Reduce (0) | 2017.04.24 |
| 16. Mouse move Shadow (0) | 2017.04.22 |
| 15. LocalStorage (0) | 2017.04.22 |
| 14. JavaScript References VS Copying (0) | 2017.04.19 |
