WES BOS系列影片
Alex快速導讀系列影片
​
今天要結合正規表達式跟sort()來做排序的功能
作者這邊假設了一個情境
就是我們拿到了一串樂團的清單，
希望可以用樂團的名稱做排序，
討厭的地方是，有些有單位，有些又是只有樂團名稱
所以我們需要利用正規表達式將單位字做排除。
​
1.先把畫面渲染出來
所以可以先抓取要使用的DOM元素，
並把組好的<li>字串塞入

document.querySelector("#bands").innerHTML = 
bands.map((band) => `<li>${band}</li>`).join("");

這樣可以看到還未排序的清單
​
2.先試試看最原始的sort()

bands.sort((a, b) => a > b ? 1 : -1);

​
這裡可以談談字串是如何做比對
"a"(字串) 為什麼小於 "b"(字串)
其實都是用charCodeAt()來做比對

console.log("a".charCodeAt())//97
console.log("b".charCodeAt())//98

97 < 98 就很合理囉!
​
3.利用正規表達式來去除單位字 A、An、The

function strip(bandName) {
    return bandName.replace(/^(a |the |an )/i, "").trim();
}

4.將函式帶入sort()

bands.sort((a, b) => strip(a) > strip(b) ? 1 : -1);

現在我們就可以跳過單位，直接比對樂團名稱了
​
今天的練習完成囉，完整的程式碼請直接點擊下方codePen連結
codePen
或者也可以直接到WES BOS的網站下載打包好的檔案
javascript30