紀錄工作經驗、相關知識,解決技術相關問題。

Javascript, React

JS 取得子域名 / How to get the full subdomain

JS 當中並沒有直接取得子網域的指令,但一般大多數情況下,可以透過 location.host or location.hostname,先取得完整網域,在對資料進行處裡,以下列出取得子域名的方法。

如果你是本機測試,請使用 location.hostname 來取得完整網域,避免取得 Port,以下使用 location.hostname 為例子 。

使用 split 取得子網域

使用 split 進行字串分割,在指定第一筆資料來取得子網域(subdomain)

// 假設當前網域 : sub.domain.com
window.location.host.split('.')[0]
// 輸出結果 : sub

window.location.hostname.split('.')[0]
// 輸出結果 : sub

使用 split + shift 取得子網域

使用 split + shift,split() 進行字串分割,在使用 shift() 取得陣的第一筆資料

// 假設當前網域 : sub.domain.com 
window.location.hostname.split('.').shift()
// 輸出結果 : sub

window.location.hostname.split('.')[0]
// 輸出結果 : sub

使用 split + slice + join 取得子網域

有時候我們會遇到 subdomain 用到多個.來命名,這時可以使用 slice 來進行資料處裡

// 假設當前網域 : sub.a.b.c.domain.com
window.location.host.split('.').slice(0,-2).join('.')
// 輸出結果 : 'sub.a.b.c'

這裡 slice() 中的 -2,對映著你的 domain 有幾個詞組成,也可以看成 -2 為 domain 中的 . 數量 + 1,最後剩下的資料,再用 join() 組合起來,以下是步驟說明

// 假設當前網域 : sub.a.b.c.domain.com 

// 步驟1:取得網址
window.location.host
// 輸出結果 : sub.a.b.c.domain.com

// 步驟2:字串分割
window.location.host.split('.')
// 輸出結果 : ['sub', 'a', 'b', 'c', 'domain', 'com']

// 步驟3:去除 domain,-2 為 domain 中的.數量 + 1
window.location.host.split('.').slice(0,-2)
// 輸出結果 : ['sub', 'a', 'b', 'c']

// 步驟4:用.將陣列資料組合成字串
window.location.host.split('.').slice(0,-2).join('.')
// 輸出結果 : 'sub.a.b.c'

發表迴響