วิธีรับพารามิเตอร์ URL โดยใช้ jQuery หรือ JavaScript ธรรมดา


619

ฉันได้เห็นตัวอย่าง jQuery มากมายที่ไม่ทราบขนาดและชื่อพารามิเตอร์

URL ของฉันจะมี 1 สตริงเท่านั้น:

http://example.com?sent=yes

ฉันแค่ต้องการตรวจจับ:

  1. ไม่sentอยู่?
  2. มันเท่ากับ "ใช่"?




ทางออกที่ดีที่สุดที่ฉันเคยเห็น [ที่นี่] [1] [1]: stackoverflow.com/a/901144/3106590
hmfarimani

1
ขณะนี้มีปลั๊กอิน / ไลบรารีสำหรับสิ่งนี้ซึ่งเรียกว่า URI.js: github.com/medialize/URI.js
alexw

คำตอบ:


1211

ทางออกที่ดีที่สุดที่นี่

var getUrlParameter = function getUrlParameter(sParam) {
    var sPageURL = window.location.search.substring(1),
        sURLVariables = sPageURL.split('&'),
        sParameterName,
        i;

    for (i = 0; i < sURLVariables.length; i++) {
        sParameterName = sURLVariables[i].split('=');

        if (sParameterName[0] === sParam) {
            return sParameterName[1] === undefined ? true : decodeURIComponent(sParameterName[1]);
        }
    }
};

และนี่คือวิธีการที่คุณสามารถใช้ฟังก์ชันนี้สมมติว่า URL
http://dummy.com/?technology=jquery&blog=jquerybyexampleที่เป็น

var tech = getUrlParameter('technology');
var blog = getUrlParameter('blog');

8
ขอบคุณ! แต่เมื่อคัดลอกสิ่งนี้ฉันพบความประหลาดใจที่น่ารังเกียจซึ่งเกี่ยวข้องกับช่องว่างที่มีความกว้างเป็นศูนย์ (\ u200b) ต่อท้ายที่นั่น การทำให้สคริปต์มีข้อผิดพลาดทางไวยากรณ์ที่มองไม่เห็น
Christofer Ohlsson

11
ส่งคืนfalseหรือnullเพื่อการค้นหาที่ว่างเปล่า
Stefano Caravana

4
วิธีนี้ใช้ได้ดีสำหรับฉันฉันเพิ่งใช้ var sPageURL = decodeURI (window.location.search.substring (1)); เพื่อแปลงอักขระ% 20 ไปเป็น white space และฉันจะส่งคืนสตริงว่างแทนไม่มีอะไรถ้าพารามิเตอร์ไม่ตรงกัน
Christophe

18
ฉันได้อัปเดตคำตอบเพื่อรวมการเปลี่ยนแปลงรหัสความคิดเห็นทั้งหมดข้างต้นความคิดเห็นนี้
Rob Evans

7
การถอดรหัสควรทำกับค่าพารามิเตอร์ (ตามที่ Iouri แนะนำ) หากการถอดรหัสเสร็จสิ้นบน url (ตามคำตอบ) จะไม่ทำงานอย่างถูกต้องหากมีการเข้ารหัส &หรือ=มีค่าพารามิเตอร์
zakinster

287

ทางออกจากปี2020

เรามี: http://example.com?sent=yes

let searchParams = new URLSearchParams(window.location.search)

ไม่ส่ง มีอยู่ ?

searchParams.has('sent') // true

มันเท่ากับ "ใช่"?

let param = searchParams.get('sent')

แล้วเปรียบเทียบมัน


16
ฉันคิดว่านี่ไม่รองรับเบราว์เซอร์ดังนั้นทำไมจึงควรใช้มัน การอ้างอิง - developer.mozilla.org/en-US/docs/Web/API/URLSearchParams
p_champ

1
@p_champ คุณถูกต้อง แต่คุณสามารถใช้polyfill สำหรับ URLSearchParams
Optio

2
ขณะนี้ไม่ทำงานใน IE / Edge ดังนั้นตรวจสอบคุณสมบัติ: if ('URLSearchParams' in window) { // Browser supports URLSearchParams} ดูที่นี่
mfgmicha

4
ดีพอสำหรับฉันและผู้ชมที่ฉันตั้งใจ caniuse.com/#feat=urlsearchparams
jontsai

4
@p_champ Edge ได้รับการสนับสนุนใน v17 (เมษายน 2018) ปล่อยให้ IE ตาย
Ryan DuVal

198

ข้อมูลโค้ด jQuery เพื่อรับตัวแปรแบบไดนามิกที่เก็บไว้ใน url เป็นพารามิเตอร์และเก็บไว้เป็นตัวแปร JavaScript ที่พร้อมใช้งานกับสคริปต์ของคุณ:

$.urlParam = function(name){
    var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
    if (results==null) {
       return null;
    }
    return decodeURI(results[1]) || 0;
}

example.com?param1=name¶m2=&id=6

$.urlParam('param1'); // name
$.urlParam('id');        // 6
$.urlParam('param2');   // null

ตัวอย่างพารามิเตอร์ที่มีช่องว่าง

http://www.jquery4u.com?city=Gold Coast
console.log($.urlParam('city'));  
//output: Gold%20Coast



console.log(decodeURIComponent($.urlParam('city'))); 
//output: Gold Coast

12
หมายเหตุ: คุณต้องถอดรหัสในกรณีที่มีอักขระพิเศษเป็นพารามิเตอร์หรือ Umlaute เป็นต้นดังนั้นแทนที่จะreturn results[1] || 0;เป็นreturn decodeURI(results[1]) || 0;
Kai Noack

แค่อยากรู้อยากเห็นทำไมมันถึงต้องการชิ้น || 0ส่วนเนื่องจากมีการตรวจสอบผลลัพธ์อยู่แล้วมันจะไม่ส่งคืนอาร์เรย์การจับคู่เสมอหรือไม่
AirWick219

@ AirWick219 เป็นความล้มเหลวที่เหมาะสม แม้ว่าจะซ้ำซ้อนก็ไม่ควรที่จะระมัดระวังตัว
zanderwar

2
ที่นี่น่าจะเป็นแหล่งที่มาดั้งเดิม: sitepoint.com/url-parameters-jquery แต่คำตอบนี้มีการเพิ่มแนวคิดใหม่ ๆ ไว้
bgmCoder

1
ไม่แน่ใจว่ามันคุ้มค่าที่จะใช้ jQuery
เควนติน 2

88

ฉันติดสิ่งนี้เป็นหนึ่งบรรทัดเสมอ ตอนนี้ params มี vars:

params={};location.search.replace(/[?&]+([^=&]+)=([^&]*)/gi,function(s,k,v){params[k]=v})

หลายเรียงราย:

var params={};
window.location.search
  .replace(/[?&]+([^=&]+)=([^&]*)/gi, function(str,key,value) {
    params[key] = value;
  }
);

เป็นฟังก์ชั่น

function getSearchParams(k){
 var p={};
 location.search.replace(/[?&]+([^=&]+)=([^&]*)/gi,function(s,k,v){p[k]=v})
 return k?p[k]:p;
}

ซึ่งคุณสามารถใช้เป็น:

getSearchParams()  //returns {key1:val1, key2:val2}

หรือ

getSearchParams("key1")  //returns val1

แฮ็คที่น่าเกลียดที่ปรับเปลี่ยนสตริงการค้นหา ... แต่ไม่จำเป็นต้องมีโมดูลหรือ jQuery ภายนอก ฉันชอบมัน.
Bryce

4
@Bryce จริงๆแล้วมันไม่ได้แก้ไขสตริงการค้นหา ที่จริงแล้วส่งกลับสตริงใหม่และสตริงที่ส่งคืนเหล่านั้นจะถูกประมวลผลลงในวัตถุ params
AwokeKnowing

ดีสั้นและตรงกันข้ามกับโซลูชันที่ยอมรับไม่จำเป็นต้องแยก URL ใหม่ทุกครั้งที่คุณต้องการค่า สามารถปรับปรุงให้ดีขึ้นอีกเล็กน้อยด้วยreplace(/[?&;]+([^=]+)=([^&;]*)/giการเรียกใช้ ";" อักขระเป็นตัวคั่นด้วย
Le Droid

ชัดเจนและเจ็บปวดหนึ่งซับดีกว่าคำตอบที่ยอมรับสำหรับฉันไม่มี libs พิเศษ
Sam

นี่คือสิ่งที่เราจะใช้หากมีการใช้แฮชแทน GET-query delimiter (เครื่องหมายคำถาม): var params={};window.location.hash.replace(/[#&]+([^=&]+)=([^&]*)/gi,function(str,key,value){params[key] = value;}); สิ่งนี้มีประโยชน์สำหรับสิ่งต่าง ๆ เช่น AJAX ที่แฮชในหน้าต่างถูกอัพเดตด้วย ajax- คำร้องขอ แต่ยังมีผู้ใช้หนึ่ง ที่มีแฮช
Tommie

48

อีกฟังก์ชั่นทางเลือก ...

function param(name) {
    return (location.search.split(name + '=')[1] || '').split('&')[0];
}

ชื่อต้องเป็นสตริง ทำงานเหมือนมนต์เสน่ห์ ~
mintedsky

2
นี่คือสิ่งที่ฉันชอบ +1 สิ่งที่ควรทราบนี่คือการค้นหาแบบ "ลงท้ายด้วย" ตัวอย่างเช่นหากคุณส่งผ่าน "Phone" สำหรับชื่อและยังมีฟิลด์ชื่อ "HomePhone" มันอาจส่งคืนค่าที่ไม่ถูกต้องหากมาเป็นอันดับแรกใน url
เห็นด้วย

2
นี่มันผิด! ตัวอย่างเช่นparam('t') == param('sent') == 'yes'ในตัวอย่าง OP นี่คือการแก้ไข: return (location.search.split(new RegExp('[?&]' + name + '='))[1] || '').split('&')[0]; นอกจากนี้โปรดทราบว่าคุณไม่สามารถบอกได้ว่ามีพารามิเตอร์อยู่หรือไม่เพราะคุณได้รับสตริงว่างสำหรับพารามิเตอร์ที่หายไป
oriadam

ง่ายมากและสง่างาม ทำงานเหมือนฝัน ขอบคุณ.
Anjana Silva

// (เพื่อบังคับให้คีย์เต็มมีอยู่แทนที่จะใช้เฉพาะส่วนสุดท้ายของคีย์)return (location.search.split('?' + name + '=')[1] || location.search.split('&' + name + '=')[1] || '').split('&')[0];
Aaron

45

อาจจะสายเกินไป แต่วิธีนี้ง่ายและง่ายมาก

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.url.js"></script>

<!-- URL:  www.example.com/correct/?message=done&year=1990 -->

<script type="text/javascript">
$(function(){
    $.url.attr('protocol')  // --> Protocol: "http"
    $.url.attr('path')      // --> host: "www.example.com"
    $.url.attr('query')         // --> path: "/correct/"
    $.url.attr('message')       // --> query: "done"
    $.url.attr('year')      // --> query: "1990"
});

อัปเดต
ต้องใช้ปลั๊กอิน url: plugins.jquery.com/url
ขอบคุณ -Ripounet


2
ใครก็ตามที่ตัดสินใจเกี่ยวกับเรื่องนี้ควรตรวจสอบ repo ก่อน การใช้งานมีการเปลี่ยนแปลง $ .url.attr ('message') กลายเป็น $ .url ("query") และจะให้เฉพาะการสืบค้นแบบเต็มเท่านั้น! ในการรับพารามิเตอร์เพียงตัวเดียวฉันต้อง: $. url ("query"). split ("=") [1] url github link
pseudozach

34

หรือคุณสามารถใช้ฟังก์ชั่นเล็ก ๆ น้อย ๆ นี้ได้เพราะเหตุใดการแก้ปัญหาที่ซับซ้อนมากเกินไป?

function getQueryParam(param, defaultValue = undefined) {
    location.search.substr(1)
        .split("&")
        .some(function(item) { // returns first occurence and stops
            return item.split("=")[0] == param && (defaultValue = item.split("=")[1], true)
        })
    return defaultValue
}

ซึ่งดูดียิ่งขึ้นเมื่อง่ายและ onelined:

tl; dr โซลูชันบรรทัดเดียว

var queryDict = {};
location.search.substr(1).split("&").forEach(function(item) {queryDict[item.split("=")[0]] = item.split("=")[1]})
ผลลัพธ์:
queryDict ['ส่ง'] // ไม่ได้กำหนดหรือ 'ค่า'

แต่ถ้าคุณได้มีตัวละครที่เข้ารหัสหรือคีย์หลายค่า ?

คุณจะเห็นคำตอบนี้ดีกว่า: ฉันจะรับค่าสตริงข้อความค้นหาใน JavaScript ได้อย่างไร

แอบสูงสุด

"?a=1&b=2&c=3&d&e&a=5&a=t%20e%20x%20t&e=http%3A%2F%2Fw3schools.com%2Fmy%20test.asp%3Fname%3Dståle%26car%3Dsaab"
> queryDict
a: ["1", "5", "t e x t"]
b: ["2"]
c: ["3"]
d: [undefined]
e: [undefined, "http://w3schools.com/my test.asp?name=ståle&car=saab"]

> queryDict["a"][1] // "5"
> queryDict.a[1] // "5"

3
การแยกสตริงน่าจะเร็วกว่า regex ด้วย ไม่ใช่ว่าเป็นปัจจัยที่พิจารณาว่า URL จะถูกแยกวิเคราะห์เพียงครั้งเดียว
แพทริค

นี่เป็นวิธีแก้ปัญหา (ตัวแรก) ที่ทำงานได้อย่างสมบูรณ์แบบสำหรับฉันในเบราว์เซอร์ - ขอบคุณ!
NickyTheWrench

1
@NickyTheWrench ยินดีรับฟังขอบคุณมาก! อย่างไรก็ตามโปรดทราบว่านี่เป็นวิธีแก้ปัญหาที่ง่ายมากหากคุณได้รับพารามิเตอร์ URL ที่ซับซ้อนซึ่งมีอักขระพิเศษคุณควรตรวจสอบลิงก์ที่ให้ไว้
Qwerty

@ Qwerty yup - กรณีการใช้งานของฉันง่ายมากที่พารามิเตอร์มักจะเหมือนกัน ฯลฯ (โดยทั่วไปคือสิ่งที่ OP ขอ) ขอบคุณอีกครั้ง!
NickyTheWrench

1
@BernardVanderBeken ที่น่าสนใจฉันแก้ไขมันแล้วมันค่อนข้างจะเป็นวิธีแก้ปัญหาที่โง่มากที่ด้านล่างซึ่งรองรับอักขระที่เข้ารหัสและอาร์เรย์ดีกว่ามาก
Qwerty

33

การใช้URLSearchParams:

var params = new window.URLSearchParams(window.location.search);
console.log(params.get('name'));

โปรดใช้ความระมัดระวังเกี่ยวกับความเข้ากันได้ (ส่วนใหญ่เป็นเรื่องปกติ แต่ IE และ Edge อาจแตกต่างกันตรวจสอบสิ่งนี้สำหรับการอ้างอิงที่เข้ากันได้: https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams )


เบราว์เซอร์ส่วนใหญ่ไม่สามารถใช้สิ่งนี้
saf21

URLSearchParams แทนที่อักขระพิเศษ "+" ด้วยช่องว่าง ดังนั้นหาก URL ของคุณมีเครื่องหมาย "+" อยู่จะถูกแทนที่
Growler

11

อันนี้ง่ายและใช้งานได้สำหรับฉัน

$.urlParam = function(name){
    var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
    return results[1] || 0;
}

ดังนั้นหาก URL ของคุณคือhttp://www.yoursite.com?city=4

ลองนี้

console.log($.urlParam('city'));

10

บางทีคุณอาจต้องการที่จะให้ทันตแพทย์ JSดู? (ข้อจำกัดความรับผิดชอบ: ฉันเขียนรหัส)

รหัส:

document.URL == "http://helloworld.com/quotes?id=1337&author=kelvin&message=hello"
var currentURL = document.URL;
var params = currentURL.extract();
console.log(params.id); // 1337
console.log(params.author) // "kelvin"
console.log(params.message) // "hello"

ด้วย Dentist JS คุณสามารถเรียกใช้ฟังก์ชันแยก () บนสตริงทั้งหมด (เช่น document.URL.extract ()) และคุณจะได้ HashMap กลับมาจากพารามิเตอร์ทั้งหมดที่พบ นอกจากนี้ยังสามารถปรับแต่งเพื่อจัดการกับตัวคั่นและทั้งหมด

เวอร์ชันย่อ <1kb


5

ฉันหวังว่านี่จะช่วยได้

 <script type="text/javascript">
   function getParameters() {
     var searchString = window.location.search.substring(1),
       params = searchString.split("&"),
       hash = {};

     if (searchString == "") return {};
     for (var i = 0; i < params.length; i++) {
       var val = params[i].split("=");
       hash[unescape(val[0])] = unescape(val[1]);
     }

     return hash;
   }

    $(window).load(function() {
      var param = getParameters();
      if (typeof param.sent !== "undefined") {
        // Do something.
      }
    });
</script>

5

function GetRequestParam(param)
{
	var res = null;
	try{
		var qs = decodeURIComponent(window.location.search.substring(1));//get everything after then '?' in URI
		var ar = qs.split('&');
		$.each(ar, function(a, b){
			var kv = b.split('=');
			if(param === kv[0]){
				res = kv[1];
				return false;//break loop
			}
		});
	}catch(e){}
	return res;
}


4

ลองตัวอย่างการทำงาน นี้http://jsfiddle.net/xy7cX/

API:

สิ่งนี้น่าจะช่วยได้ :)

รหัส

var url = "http://myurl.com?sent=yes"

var pieces = url.split("?");
alert(pieces[1] + " ===== " + $.inArray("sent=yes", pieces));

3
ใช้งานได้กับ var เดียว - & จะปิด - สามารถขยายได้ด้วย regex
Alvin

3

มีห้องสมุดที่ยอดเยี่ยมนี้: https://github.com/allmarkedup/purl

ซึ่งช่วยให้คุณทำง่ายๆ

url = 'http://example.com?sent=yes';
sent = $.url(url).param('sent');
if (typeof sent != 'undefined') { // sent exists
   if (sent == 'yes') { // sent is equal to yes
     // ...
   }
}

ตัวอย่างสมมติว่าคุณกำลังใช้ jQuery คุณยังสามารถใช้งานได้เช่นเดียวกับจาวาสคริปต์ธรรมดาไวยากรณ์จะแตกต่างกันเล็กน้อย


1
ห้องสมุดนี้ไม่ได้บำรุงรักษาอีกต่อไปอย่างไรก็ตามฉันใช้มันและมันก็เยี่ยมมาก ตรวจสอบให้แน่ใจว่าคุณใช้พารามิเตอร์ไม่ใช่ attr เพื่อรับพารามิเตอร์สตริงการสืบค้นเหล่านั้นเนื่องจากผู้เขียนได้รวมไว้ในตัวอย่างแล้ว
การกระทำ Dan

3

นี้อาจจะ overkill แต่มีห้องสมุดที่เป็นที่นิยมสวยตอนนี้ใช้ได้สำหรับยูริแยกเรียกว่าURI.js

ตัวอย่าง

var uri = "http://example.org/foo.html?technology=jquery&technology=css&blog=stackoverflow";
var components = URI.parse(uri);
var query = URI.parseQuery(components['query']);
document.getElementById("result").innerHTML = "URI = " + uri;
document.getElementById("result").innerHTML += "<br>technology = " + query['technology'];

// If you look in your console, you will see that this library generates a JS array for multi-valued queries!
console.log(query['technology']);
console.log(query['blog']);
<script src="https://cdnjs.cloudflare.com/ajax/libs/URI.js/1.17.0/URI.min.js"></script>

<span id="result"></span>


3

ง่ายมากคุณสามารถใช้ url และรับค่า

function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
    results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}

ตัวอย่างการใช้งาน

// query string: ?first=value1&second=&value2
var foo = getParameterByName('first'); // "value1"
var bar = getParameterByName('second'); // "value2" 

หมายเหตุ: หากพารามิเตอร์มีอยู่หลายครั้ง (? first = value1 & second = value2) คุณจะได้รับค่าแรก (value1) และค่าที่สองเป็น (value2)


2

สิ่งนี้จะช่วยให้คุณมีวัตถุที่น่าใช้

    function queryParameters () {
        var result = {};

        var params = window.location.search.split(/\?|\&/);

        params.forEach( function(it) {
            if (it) {
                var param = it.split("=");
                result[param[0]] = param[1];
            }
        });

        return result;
    }

จากนั้น;

    if (queryParameters().sent === 'yes') { .....

แยก (/ \? | \ & /) นี่หมายความว่า
Selva Ganapathi

2

สิ่งนี้ขึ้นอยู่กับคำตอบของGazorisแต่ URL จะถอดรหัสพารามิเตอร์เพื่อให้สามารถใช้เมื่อมีข้อมูลอื่นที่ไม่ใช่ตัวเลขและตัวอักษร:

function urlParam(name){
    var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
    // Need to decode the URL parameters, including putting in a fix for the plus sign
    // https://stackoverflow.com/a/24417399
    return results ? decodeURIComponent(results[1].replace(/\+/g, '%20')) : null;
}

2

มีอีกตัวอย่างหนึ่งที่ใช้ไลบรารีURI.js

ตัวอย่างตอบคำถามตรงตามที่ถาม

var url = 'http://example.com?sent=yes';
var urlParams = new URI(url).search(true);
// 1. Does sent exist?
var sendExists = urlParams.sent !== undefined;
// 2. Is it equal to "yes"?
var sendIsEqualtToYes = urlParams.sent == 'yes';

// output results in readable form
// not required for production
if (sendExists) {
  console.log('Url has "sent" param, its value is "' + urlParams.sent + '"');
  if (urlParams.sent == 'yes') {
    console.log('"Sent" param is equal to "yes"');
  } else {
    console.log('"Sent" param is not equal to "yes"');
  }
} else {
  console.log('Url hasn\'t "sent" param');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/URI.js/1.18.2/URI.min.js"></script>


2
http://example.com?sent=yes

ทางออกที่ดีที่สุดที่นี่

function getUrlParameter(name) {
    name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
    var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
    var results = regex.exec(location.href);
    return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, '    '));
};

ด้วยฟังก์ชั่นด้านบนคุณสามารถรับค่าพารามิเตอร์แต่ละรายการ:

getUrlParameter('sent');

คำตอบที่สมบูรณ์แบบ!
Srijani Ghosh

1

รุ่น Coffeescript ของคำตอบของ Sameer

getUrlParameter = (sParam) ->
  sPageURL = window.location.search.substring(1)
  sURLVariables = sPageURL.split('&')
  i = 0
  while i < sURLVariables.length
    sParameterName = sURLVariables[i].split('=')
    if sParameterName[0] == sParam
      return sParameterName[1]
    i++

1

การปรับปรุงเล็กน้อยเพื่อคำตอบของ Sameer แคช params เป็นปิดเพื่อหลีกเลี่ยงการแยกและวนลูปผ่านพารามิเตอร์ทั้งหมดทุกครั้งที่โทร

var getURLParam = (function() {
    var paramStr = decodeURIComponent(window.location.search).substring(1);
    var paramSegs = paramStr.split('&');
    var params = [];
    for(var i = 0; i < paramSegs.length; i++) {
        var paramSeg = paramSegs[i].split('=');
        params[paramSeg[0]] = paramSeg[1];
    }
    console.log(params);
    return function(key) {
        return params[key];
    }
})();


1

ด้วย vanilla JavaScript คุณสามารถนำ params (location.search) ได้อย่างง่ายดายรับซับสตริง (โดยไม่มี?) และเปลี่ยนเป็นอาร์เรย์โดยแยกโดย '&'

เมื่อคุณวนซ้ำผ่าน urlParams คุณสามารถแยกสตริงอีกครั้งด้วย '=' และเพิ่มลงในวัตถุ 'params' เป็นวัตถุ [elmement [0]] = องค์ประกอบ [1] ง่ายสุดและเข้าถึงได้ง่าย

http://www.website.com/?error=userError&type=handwritten

            var urlParams = location.search.substring(1).split('&'),
                params = {};

            urlParams.forEach(function(el){
                var tmpArr = el.split('=');
                params[tmpArr[0]] = tmpArr[1];
            });


            var error = params['error'];
            var type = params['type'];

1

จะทำอย่างไรถ้ามี & ในพารามิเตอร์ URL เช่น filename = "p & g.html" & uid = 66

ในกรณีนี้ฟังก์ชั่นที่ 1 จะทำงานไม่ถูกต้อง ดังนั้นฉันจึงแก้ไขรหัส

function getUrlParameter(sParam) {
    var sURLVariables = window.location.search.substring(1).split('&'), sParameterName, i;

    for (i = 0; i < sURLVariables.length; i++) {
        sParameterName = sURLVariables[i].split('=');

        if (sParameterName[0] === sParam) {
            return sParameterName[1] === undefined ? true : decodeURIComponent(sParameterName[1]);
        }
    }
}

1

เป็นที่ยอมรับฉันกำลังเพิ่มคำตอบให้กับคำถามที่ตอบแล้ว แต่สิ่งนี้มีข้อดีคือ:

- ไม่ขึ้นกับไลบรารีภายนอกใด ๆ รวมถึง jQuery

- ไม่สร้างมลภาวะเนมสเปซของฟังก์ชันโกลบอลโดยขยาย 'String'

- ไม่สร้างข้อมูลทั่วโลกและทำการประมวลผลที่ไม่จำเป็นหลังจากพบข้อมูลตรงกัน

- การจัดการปัญหาการเข้ารหัสและการยอมรับ (สมมติว่า) ชื่อพารามิเตอร์ที่ไม่ได้เข้ารหัส

- หลีกเลี่ยงการforวนซ้ำอย่างชัดเจน

String.prototype.urlParamValue = function() {
    var desiredVal = null;
    var paramName = this.valueOf();
    window.location.search.substring(1).split('&').some(function(currentValue, _, _) {
        var nameVal = currentValue.split('=');
        if ( decodeURIComponent(nameVal[0]) === paramName ) {
            desiredVal = decodeURIComponent(nameVal[1]);
            return true;
        }
        return false;
    });
    return desiredVal;
};

จากนั้นคุณจะใช้มันเป็น:

var paramVal = "paramName".urlParamValue() // null if no match

1

หากคุณต้องการค้นหาพารามิเตอร์เฉพาะจาก URL ที่ระบุ:

function findParam(url, param){
  var check = "" + param;
  if(url.search(check )>=0){
      return url.substring(url.search(check )).split('&')[0].split('=')[1];
  }
}  

var url = "http://www.yourdomain.com/example?id=1&order_no=114&invoice_no=254";  
alert(findParam(url,"order_no"));

0

โซลูชันอื่นที่ใช้ jQuery และ JSON เพื่อให้คุณสามารถเข้าถึงค่าพารามิเตอร์ผ่านทางวัตถุ

var loc = window.location.href;
var param = {};
if(loc.indexOf('?') > -1)
{
    var params = loc.substr(loc.indexOf('?')+1, loc.length).split("&");

    var stringJson = "{";
    for(var i=0;i<params.length;i++)
    {
        var propVal = params[i].split("=");
        var paramName = propVal[0];
        var value = propVal[1];
        stringJson += "\""+paramName+"\": \""+value+"\"";
        if(i != params.length-1) stringJson += ",";
    }
    stringJson += "}";
    // parse string with jQuery parseJSON
    param = $.parseJSON(stringJson);
}

สมมติว่า URL ของคุณคือ http://example.com/?search=hello+world&language=en&page=3

หลังจากนั้นเป็นเพียงเรื่องของการใช้พารามิเตอร์เช่นนี้:

param.language

เพื่อกลับไป

en

การใช้งานที่มีประโยชน์มากที่สุดของสิ่งนี้คือการเรียกใช้ที่โหลดหน้าและใช้ประโยชน์จากตัวแปรทั่วโลกเพื่อใช้พารามิเตอร์ทุกที่ที่คุณอาจต้องการพวกเขา

หากพารามิเตอร์ของคุณมีค่าตัวเลขให้ทำการแยกวิเคราะห์ค่า

parseInt(param.page)

หากไม่มีพารามิเตอร์paramก็จะเป็นวัตถุว่างเปล่า



-1

ใช้สิ่งนี้

$.urlParam = function(name) {
  var results = new RegExp('[\?&amp;]' + name + '=([^&amp;#]*)').exec(window.location.href);
  return results[1] || 0;
}
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.