最近在用 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 多一個網址本身...
是一個感覺很簡單但有難度的任務呢… 若大家有更方便的方法請分享給我喔,謝謝!