快捷導(dǎo)航

JavaScript實現(xiàn)獲取URL中參數(shù)值的4種方法

更新時間：2025年02月07日 10:53:35 作者：Java全棧布道師

這篇文章主要為大家詳細(xì)介紹了如何使用JavaScript實現(xiàn)獲取URL中參數(shù)值的4種方法,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解一下

在前端開發(fā)中，處理URL參數(shù)是一個常見的任務(wù)，尤其是在沒有框架支持的情況下。這篇文章為大家整理了JavaScript獲取URL中參數(shù)值的4種方法，希望對大家有所幫助

方法一：正則法

function getQueryString(name) {
    var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
    var r = window.location.search.substr(1).match(reg);
    if (r != null) {
        return unescape(r[2]);
    }
    return null;
}
// 這樣調(diào)用：
alert(GetQueryString("參數(shù)名1"));
alert(GetQueryString("參數(shù)名2"));
alert(GetQueryString("參數(shù)名3"));

方法二：split拆分法

function GetRequest() {
    var url = location.search; //獲取url中"?"符后的字串
    var theRequest = new Object();
    if (url.indexOf("?") != -1) {
        var str = url.substr(1);
        strs = str.split("&");
        for(var i = 0; i < strs.length; i ++) {
            theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
        }
    }
    return theRequest;
}
var Request = new Object();
Request = GetRequest();
// var 參數(shù)1,參數(shù)2,參數(shù)3,參數(shù)N;
// 參數(shù)1 = Request['參數(shù)1'];
// 參數(shù)2 = Request['參數(shù)2'];
// 參數(shù)3 = Request['參數(shù)3'];
// 參數(shù)N = Request['參數(shù)N'];

方法三：正則（推薦使用）

通過JS獲取url參數(shù)，這個經(jīng)常用到。比如說一個url：http://wchabaoo.cn/?q=js,我們想得到參數(shù)q的值，那可以通過以下函數(shù)調(diào)用即可。

function GetQueryString(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
    var r = window.location.search.substr(1).match(reg); //獲取url中"?"符后的字符串并正則匹配
    var context = "";
    if (r != null)
        context = decodeURIComponent(r[2]);
    reg = null;
    r = null;
    return context == null || context == "" || context == "undefined" ? "" : context;
}
alert(GetQueryString("q"));

方法四：單個參數(shù)的獲取方法

function GetRequest() {
   var url = location.search; //獲取url中"?"符后的字串
   if (url.indexOf("?") != -1) {    //判斷是否有參數(shù)
      var str = url.substr(1); //從第一個字符開始 因為第0個是?號 獲取所有除問號的所有符串
      strs = str.split("=");   //用等號進(jìn)行分隔 （因為知道只有一個參數(shù) 所以直接用等號進(jìn)分隔 如果有多個參數(shù) 要用&號分隔 再用等號進(jìn)行分隔）
      alert(strs[1]);          //直接彈出第一個參數(shù) （如果有多個參數(shù) 還要進(jìn)行循環(huán)的）
   }
}

到此這篇關(guān)于JavaScript實現(xiàn)獲取URL中參數(shù)值的4種方法的文章就介紹到這了,更多相關(guān)JavaScript獲取URL參數(shù)值內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: