# [JS30] Day.17 Sorting Band Names without articles
###### tags: `JS30`
## 任務 Task
將 `Array` 裡的文字資料做排序，但不包含 `an` 、 `a` 、 `the`。

==完成時間：10min==
## 步驟 Step
1. 使用 `Array.sort()` 將文字做排列。
2. 建立 `function strip()` 將含有 `an` `a` `the` 的文字 `replace` 掉。
3. 用 `Array.map()` 將文字轉換成 `html` 渲染到網頁。
## 筆記 Note
### <font color=#337EA9>CSS list style</font>
* list-style-type：更改符號
* list-style-image：更改符號為圖片
* list-style-positon：更改顯示位置
合併：
* list-style: type | image | position

HTML：

<ul class = 'list-type'>
    <li id = 'disc'>list-type = disc</li>
    <li id = 'circle'>list-type = circle</li>
    <li id = 'square'>list-type = square</li>
    <li id = 'decimal'>list-type = decimal</li>
</ul>
<ul class = 'list-position'>
    <li id = 'inside'>list-type = inside</li>
    <li id = 'outside'>list-type = outside</li>
</ul>

CSS：

li {border: 1px solid black;}
.list-type #disc {list-style: disc;}
.list-type #circle {list-style: circle;}
.list-type #square {list-style: square;}
.list-type #decimal {list-style: decimal;}
.list-position #inside {list-style: inside;}
.list-position #outside {list-style: outside;}

Result：

### <font color=#337EA9>JS RegExp</font>
* 使用：`/^(the |an |a )/i`
* `^`：比對開頭符號 | `$`：比對結尾符號。
* `|`：或（不可在運算式最尾端）
* `i`：忽略大小寫
### <font color=#337EA9>JS string.trim()</font>
* 用法：移除字串前後的空白字元。

const hello = '  hello!   ';
console.log(hello); //output: '  hello!   '   
console.log(hello.trim());//output: 'hello!'

## 想法 Idea
:::warning
:bulb: <font color=black>將 Day15 的 `todolist` 加入文字排序。
</font>
:::

<iframe height="300" style="width: 100%;" scrolling="no" title="Todolist" src="https://codepen.io/jim876633/embed/VwXZmyq?default-tab=" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/jim876633/pen/VwXZmyq">
Todolist</a> by Jim (<a href="https://codepen.io/jim876633">@jim876633</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

## 連結
[list-style](http://www.eion.com.tw/Blogger/?Pid=1115)
[RegExp符號詳解](https://transbiz.com.tw/regex-regular-expression-ga-%E6%AD%A3%E8%A6%8F%E8%A1%A8%E7%A4%BA%E5%BC%8F/)