Javascript 作為一種非常常用的腳本語言,經常用來操作瀏覽器的 DOM 對象或發送 AJAX 請求等。在網頁開發的過程中,我們通常需要從 URL 中獲取參數來進行對應的操作,如填充表單、展示不同的數據等,今天,我們就來看一下如何使用 Javascript 取得 URL 參數。
在 Javascript 中,可以通過 location 對象中的 search 屬性來獲取 URL 中的查詢參數。例如:
var url = "http://www.baidu.com?name=jhony&age=18"; var search = location.search; console.log(search); // 輸出結果: ?name=jhony&age=18
我們看到,search 屬性的返回值包括了問號(“?”)以及之后的所有字符串,這就是 URL 中的查詢字符串。
接下來,我們需要將查詢字符串轉換為一個對象,便于我們進行訪問。我們可以使用正則表達式將字符串分解,也可以使用已經封裝好的函數庫來進行解析,下面介紹兩種方法:
第一種,使用正則表達式:
function getQueryStringArgs() { var qs = location.search.length >0 ? location.search.substring(1) : "", args = {}, items = qs.length ? qs.split("&") : [], item = null, name = null, value = null, i = 0, len = items.length; for (i = 0; i< len; i++) { item = items[i].split("="); name = decodeURIComponent(item[0]); value = decodeURIComponent(item[1]); if (name.length) { args[name] = value; } } return args; } var args = getQueryStringArgs(); console.log(args); // 輸出結果: {name: "jhony", age: "18"}
第二種,使用第三方函數庫query-string:
import queryString from 'query-string'; var args = queryString.parse(location.search); console.log(args); // 輸出結果: {name: "jhony", age: "18"}
通過以上兩種方法,我們都可以將查詢字符串轉換為一個對象,方便我們進行訪問。
最后,我們需要注意一些 URL 中的特殊字符會被瀏覽器進行轉義,如空格(%20)、加號(%2B)、中文等。我們需要使用 decodeURIComponent 函數對出現在查詢參數中的任何 %nn 序列進行解碼。
以上就是關于如何使用 Javascript 取得 URL 參數的介紹,希望可以幫到大家。如有錯誤或不足之處,還請指正。