/
index.html
87 lines (70 loc) · 1.96 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!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'];
// 去除 冠詞 的字眼
// 使用replace搭配正規表示式來將包含了a, the, an開頭的文字替換為空白。
function strip(bandName){
// ^:比對輸入列的啟始位置
// i:Case-insensitive search
return bandName.replace(/^(a |the |an )/i, '').trim();
}
// sort寫法1:
// const sortBands = bands.sort((a, b) =>{
// if (strip(a) > strip(b)){
// return 1;
// }else{
// return -1;
// }
// })
// sort寫法2:利用 三元運算式的簡寫
// const sortBands = bands.sort((a, b) =>{
// return strip(a) > strip(b) ? 1 : -1
// })
// sort寫法3:利用 箭頭函數 與 三元運算式的簡寫
const sortBands = bands.sort((a, b) => strip(a) > strip(b) ? 1 : -1);
// 寫入HTML
document.querySelector('#bands').innerHTML =
sortBands
.map( band => `<li>${band}</li>`)
.join('');
</script>
</body>
</html>