รับพารามิเตอร์ URL ที่หลีกหนี

ฉันกำลังมองหาปลั๊กอิน jQuery ที่สามารถรับพารามิเตอร์ URL และสนับสนุนสตริงการค้นหานี้โดยไม่แสดงข้อผิดพลาด JavaScript: "ลำดับ URI ที่ผิดรูปแบบ" หากไม่มีปลั๊กอิน jQuery ที่สนับสนุนสิ่งนี้ฉันต้องรู้วิธีแก้ไขเพื่อสนับสนุนสิ่งนี้

?search=%E6%F8%E5

ค่าของพารามิเตอร์ URL เมื่อถอดรหัสควรเป็น:

æøå

(ตัวละครเป็นภาษานอร์เวย์)

ฉันไม่สามารถเข้าถึงเซิร์ฟเวอร์ดังนั้นฉันจึงไม่สามารถแก้ไขอะไรได้เลย

function getURLParameter(name) {
    return decodeURI(
        (RegExp(name + '=' + '(.+?)(&|$)').exec(location.search)||[,null])[1]
    );
}

ด้านล่างคือสิ่งที่ฉันได้สร้างขึ้นจากความคิดเห็นที่นี่รวมถึงการแก้ไขข้อบกพร่องที่ไม่ได้กล่าวถึง (เช่นจริง ๆ แล้วส่งคืน null และไม่ใช่ 'null'):

function getURLParameter(name) {
    return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[,""])[1].replace(/\+/g, '%20'))||null;
}

สิ่งที่คุณต้องการจริงๆเป็นปลั๊กอิน jQuery URL Parser ด้วยปลั๊กอินนี้การรับค่าของพารามิเตอร์ URL เฉพาะ (สำหรับ URL ปัจจุบัน) มีลักษณะดังนี้:

$.url().param('foo');

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

$.url().param();

ห้องสมุดนี้ยังทำงานร่วมกับ URL อื่น ๆ ไม่เพียง แต่ปัจจุบัน:

$.url('http://allmarkedup.com?sky=blue&grass=green').param();
$('#myElement').url().param(); // works with elements that have 'src', 'href' or 'action' attributes

เนื่องจากนี่เป็นไลบรารีการแยกวิเคราะห์ URL ทั้งหมดคุณสามารถรับข้อมูลอื่น ๆ จาก URL เช่นพอร์ตที่ระบุหรือพา ธ โปรโตคอล ฯลฯ :

var url = $.url('http://allmarkedup.com/folder/dir/index.html?item=value');
url.attr('protocol'); // returns 'http'
url.attr('path'); // returns '/folder/dir/index.html'

มันมีคุณสมบัติอื่น ๆ เช่นกันตรวจสอบที่หน้าแรกของมันสำหรับเอกสารและตัวอย่างเพิ่มเติม

แทนการเขียน parser URI ของคุณเองสำหรับวัตถุประสงค์เฉพาะที่บอกทำงานในที่สุดกรณีใช้ parser URI ที่เกิดขึ้นจริง โค้ดจากคำตอบอื่น ๆ สามารถส่งคืน'null'แทนnullไม่สามารถใช้กับพารามิเตอร์ที่ว่างเปล่า ( ?foo=&bar=x) ไม่สามารถแยกวิเคราะห์และส่งคืนพารามิเตอร์ทั้งหมดในครั้งเดียวทำงานซ้ำหากคุณค้นหา URL ซ้ำ ๆ เพื่อหาพารามิเตอร์เป็นต้น

ใช้ตัวแยกวิเคราะห์ URI ที่แท้จริงอย่าประดิษฐ์ของคุณเอง

สำหรับผู้ที่เกลียดชัง jQuery มีรุ่นของปลั๊กอินที่ JS

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

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;
}

การเรียกใช้ getParameters () โดยมี url ที่ต้องการ/posts?date=9/10/11&author=nilbusกลับมา:

{
  date:   '9/10/11',
  author: 'nilbus'
}

ฉันจะไม่รวมรหัสที่นี่เพราะมันห่างไกลจากคำถาม แต่ weareon.net โพสต์ห้องสมุดที่อนุญาตการจัดการพารามิเตอร์ใน URL ด้วย:

• บล็อกโพสต์: http://blog.weareon.net/working-with-url-parameters-in-javascript/
• รหัส: http://pastebin.ubuntu.com/1163515/

คุณสามารถใช้คุณสมบัติlocation.searchดั้งเดิมของเบราว์เซอร์:

function getParameter(paramName) {
  var searchString = window.location.search.substring(1),
      i, val, params = searchString.split("&");

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

แต่มีปลั๊กอิน jQuery บางอย่างที่สามารถช่วยคุณได้:

• แบบสอบถามวัตถุ
• getURLParam

ตามคำตอบของ 999 :

function getURLParameter(name) {
    return decodeURIComponent(
        (location.search.match(RegExp("[?|&]"+name+'=(.+?)(&|$)'))||[,null])[1]
    );  
}

การเปลี่ยนแปลง:

• decodeURI() ถูกแทนที่ด้วย decodeURIComponent()
• [?|&] จะถูกเพิ่มที่จุดเริ่มต้นของ regexp

ต้องการเพิ่มพารามิเตอร์ i เพื่อทำให้ตัวพิมพ์เล็กและตัวพิมพ์เล็ก:

  function getURLParameter(name) {
    return decodeURIComponent(
      (RegExp(name + '=' + '(.+?)(&|$)', 'i').exec(location.search) || [, ""])[1]
    );
  }

หลังจากอ่านคำตอบทั้งหมดฉันลงเอยด้วยเวอร์ชันนี้พร้อมกับ + ฟังก์ชั่นที่สองเพื่อใช้พารามิเตอร์เป็นแฟล็ก

function getURLParameter(name) {
    return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)','i').exec(location.search)||[,""])[1].replace(/\+/g, '%20'))||null;
}

function isSetURLParameter(name) {
    return (new RegExp('[?|&]' + name + '(?:[=|&|#|;|]|$)','i').exec(location.search) !== null)
}

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

$.urlParam("key");

ตัวอย่างเช่นฟังก์ชั่นที่ส่งกลับค่าของตัวแปรพารามิเตอร์ใด ๆ

function GetURLParameter(sParam)
{
    var sPageURL = window.location.search.substring(1);
    var sURLVariables = sPageURL.split('&');
    for (var i = 0; i < sURLVariables.length; i++)
    {
        var sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] == sParam)
        {
            return sParameterName[1];
        }
    }
}​

และนี่คือวิธีที่คุณสามารถใช้ฟังก์ชันนี้โดยสมมติว่า URL นั้นเป็น

"http://example.com/?technology=jquery&blog=jquerybyexample"

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

ดังนั้นในโค้ดข้างต้น "เทค" จะมี "jQuery" เป็นค่าและตัวแปร "บล็อก" จะเป็น "jquerybyexample"

คุณไม่ควรใช้ jQuery สำหรับสิ่งนี้!
วิธีที่ทันสมัยคือการใช้โมดูลขนาดเล็กที่สามารถใช้ซ้ำได้ผ่านตัวจัดการแพคเกจเช่น Bower

ฉันได้สร้างโมดูลเล็ก ๆที่สามารถแยกสตริงการสืบค้นลงในวัตถุ ใช้มันแบบนี้:

// parse the query string into an object and get the property
queryString.parse(unescape(location.search)).search;
//=> æøå

มีโค้ดบั๊กกี้จำนวนมากที่นี่และโซลูชัน regex ช้ามาก ฉันพบวิธีแก้ปัญหาที่ทำงานได้เร็วกว่า regex มากถึง 20 เท่าและเรียบง่ายอย่างสวยงาม:

    /*
    *   @param      string      parameter to return the value of.
    *   @return     string      value of chosen parameter, if found.
    */
    function get_param(return_this)
    {
        return_this = return_this.replace(/\?/ig, "").replace(/=/ig, ""); // Globally replace illegal chars.

        var url = window.location.href;                                   // Get the URL.
        var parameters = url.substring(url.indexOf("?") + 1).split("&");  // Split by "param=value".
        var params = [];                                                  // Array to store individual values.

        for(var i = 0; i < parameters.length; i++)
            if(parameters[i].search(return_this + "=") != -1)
                return parameters[i].substring(parameters[i].indexOf("=") + 1).split("+");

        return "Parameter not found";
    }

console.log(get_param("parameterName"));

Regex ไม่ใช่โซลูชันแบบ be-all และ end-all สำหรับปัญหาประเภทนี้การจัดการสตริงอย่างง่ายสามารถทำงานได้อย่างมีประสิทธิภาพจำนวนมาก รหัสแหล่งที่มา

<script type="text/javascript">
function getURLParameter(name) {
        return decodeURIComponent(
            (location.search.toLowerCase().match(RegExp("[?|&]" + name + '=(.+?)(&|$)')) || [, null])[1]
        );
    }

</script>

getURLParameter(id)หรือgetURLParameter(Id)ทำงานเหมือนกัน:)

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

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

example.com?param1=name&param2=&id=6

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

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

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

function getURLParameters(paramName) 
{
        var sURL = window.document.URL.toString();  
    if (sURL.indexOf("?") > 0)
    {
       var arrParams = sURL.split("?");         
       var arrURLParams = arrParams[1].split("&");      
       var arrParamNames = new Array(arrURLParams.length);
       var arrParamValues = new Array(arrURLParams.length);     
       var i = 0;
       for (i=0;i<arrURLParams.length;i++)
       {
        var sParam =  arrURLParams[i].split("=");
        arrParamNames[i] = sParam[0];
        if (sParam[1] != "")
            arrParamValues[i] = unescape(sParam[1]);
        else
            arrParamValues[i] = "No Value";
       }

       for (i=0;i<arrURLParams.length;i++)
       {
                if(arrParamNames[i] == paramName){
            //alert("Param:"+arrParamValues[i]);
                return arrParamValues[i];
             }
       }
       return "No Parameters Found";
    }

}

ฉันสร้างฟังก์ชั่นง่าย ๆ เพื่อรับพารามิเตอร์ URL ใน JavaScript จาก URL เช่นนี้:

.....58e/web/viewer.html?page=*17*&getinfo=33


function buildLinkb(param) {
    var val = document.URL;
    var url = val.substr(val.indexOf(param))  
    var n=parseInt(url.replace(param+"=",""));
    alert(n+1); 
}
buildLinkb("page");

เอาท์พุท: 18

ในกรณีที่พวกคุณมี url เหมือน localhost / index.xsp? a = 1 # อะไรบางอย่างและคุณต้องได้รับพารามิเตอร์ไม่ใช่แฮช

var vars = [], hash, anchor;
var q = document.URL.split('?')[1];
if(q != undefined){
    q = q.split('&');
    for(var i = 0; i < q.length; i++){
        hash = q[i].split('=');
        anchor = hash[1].split('#');
        vars.push(anchor[0]);
        vars[hash[0]] = anchor[0];
    }
}

การแก้ไขเล็กน้อยสำหรับคำตอบโดย @pauloppenheim เนื่องจากจะไม่จัดการชื่อพารามิเตอร์อย่างถูกต้องซึ่งอาจเป็นส่วนหนึ่งของชื่อพารามิเตอร์อื่น

เช่น: หากคุณมีพารามิเตอร์ "appenv" & "env" การเรียกค่าใหม่สำหรับ "env" สามารถรับค่า "appenv" ได้

การแก้ไข:

var urlParamVal = function (name) {
    var result = RegExp("(&|\\?)" + name + "=(.+?)(&|$)").exec(location.search);
    return result ? decodeURIComponent(result[2]) : "";
};

สิ่งนี้อาจช่วยได้

<script type="text/javascript">
    $(document).ready(function(){
        alert(getParameterByName("third"));
    });
    function getParameterByName(name){
        var url     = document.URL,
            count   = url.indexOf(name);
            sub     = url.substring(count);
            amper   = sub.indexOf("&"); 

        if(amper == "-1"){
            var param = sub.split("=");
            return param[1];
        }else{
            var param = sub.substr(0,amper).split("=");
            return param[1];
        }

    }
</script>