把 URL 的 query string 轉成 JSON

Jack Yu
5 min readJun 19, 2021

--

最近在用 Python 寫爬蟲去拉一些資料,為了要在 Python 那邊用一個 dict 來表示 URL 的 query string,就在 Chrome DevTools 裡面研究怎麼拿到一個 JSON 表示的 query string,這樣複製起來比較方便。

首先!要先拿到 URL

方法很多種,例如從 document.ULR 或是 window.location.href 拿

document.URL
window.location.href

第二步,想辦法拿到 query string

在瀏覽器的世界變數多叫做 search,方法一樣很多種,例如可以直接從 window.location.search 拿到 query string。

windows.location.search

或是從 URL 切出來

new URL(document.URL).search

第三步就是要轉成 JSON 了!

這部傳統上可以使用字串操作,先做 URL decode,接著用 & 切開,再用 = 切開就可以組 object 了。

或是使用佛心網站

然而今天用比較先進的 URLSearchParams 來做 (也是有年紀了)。這個介面可以幫你用來切好 query string,也可以用來新增刪除 query string。但他有個比較妙的設計是,他是個介面,所以你看不到裡面的內容,console.log 看不到東西就不要介意啦。

const params = new URLSearchParams('q=search+string&version=1&person=Eric');

params.get('q') === "search string"
params.get('version') === "1"
// 也可以從 URL 直接拿到
const params2 = new URL(document.URL).searchParams

因為他是個介面,最後還要把它轉成 object。這個介面可以 iterate,你可以寫個 for-loop 來做這件事,或是利用 Object.fromEntries() 可以一行達成

Object.fromEntries(new URL(document.URL).searchParams)// 如果要自行構造 URLSearchParams,帶給他的參數建議只包含 '?' 後面的東西,使用整個網址會讓他的 key-value 多一個網址本身... 

是一個感覺很簡單但有難度的任務呢… 若大家有更方便的方法請分享給我喔,謝謝!

--

--

Jack Yu
Jack Yu

No responses yet