จะรับสตริงการสืบค้นจาก URL ปัจจุบันด้วย JavaScript ได้อย่างไร

ฉันมี URL แบบนี้:

http://localhost/PMApp/temp.htm?ProjectID=462

สิ่งที่ฉันต้องการจะทำคือการได้รับรายละเอียดหลังจากที่?เข้าสู่ระบบ (สตริงแบบสอบถาม) - ProjectID=462นั่นคือ ฉันจะใช้ JavaScript ได้อย่างไร

สิ่งที่ฉันทำจนถึงตอนนี้คือ:

var url = window.location.toString();
url.match(?);

ฉันไม่รู้จะทำยังไงต่อไป

ดูบทความ MDNเกี่ยวกับwindow.location.

QueryString มีอยู่ในwindow.location.search.

โซลูชันที่ใช้งานได้กับเบราว์เซอร์เดิมเช่นกัน

MDN ให้ตัวอย่าง(ไม่มีอยู่ในบทความอ้างอิงด้านบนอีกต่อไป)เกี่ยวกับวิธีรับค่าของคีย์เดียวที่มีอยู่ใน QueryString สิ่งนี้:

function getQueryStringValue (key) {  
  return decodeURIComponent(window.location.search.replace(new RegExp("^(?:.*[&\\?]" + encodeURIComponent(key).replace(/[\.\+\*]/g, "\\$&") + "(?:\\=([^&]*))?)?.*$", "i"), "$1"));  
}  

// Would write the value of the QueryString-variable called name to the console  
console.log(getQueryStringValue("name")); 

ในเบราว์เซอร์สมัยใหม่

ในเบราว์เซอร์สมัยใหม่คุณมีsearchParamsคุณสมบัติของอินเทอร์เฟซ URL ซึ่งส่งคืนอ็อบเจ็กต์URLSearchParams อ็อบเจ็กต์ที่ส่งคืนมีวิธีการที่สะดวกหลายวิธีรวมถึง get-method ดังนั้นสิ่งที่เทียบเท่ากับตัวอย่างข้างต้นจะเป็น:

let params = (new URL(document.location)).searchParams;
let name = params.get("name");

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

let paramsString = "name=foo&age=1337"
let searchParams = new URLSearchParams(paramsString);

searchParams.has("name") === true; // true
searchParams.get("age") === "1337"; // true

แจ้งให้ทราบว่าการสนับสนุนเบราว์เซอร์ยังมีข้อ จำกัด ในอินเตอร์เฟซนี้ดังนั้นหากคุณต้องการที่จะสนับสนุนเบราว์เซอร์เดิมติดกับตัวอย่างแรกหรือใช้polyfill

ใช้window.location.searchเพื่อรับทุกอย่างหลังจาก? รวม?

ตัวอย่าง:

var url = window.location.search;
url = url.replace("?", ''); // remove the ?
alert(url); //alerts ProjectID=462 is your case

decodeURI(window.location.search)
  .replace('?', '')
  .split('&')
  .map(param => param.split('='))
  .reduce((values, [ key, value ]) => {
    values[ key ] = value
    return values
  }, {})

สิ่งนี้จะเพิ่มฟังก์ชันส่วนกลางเพื่อเข้าถึงตัวแปร queryString เป็นแผนที่

// -------------------------------------------------------------------------------------
// Add function for 'window.location.query( [queryString] )' which returns an object
// of querystring keys and their values. An optional string parameter can be used as
// an alternative to 'window.location.search'.
// -------------------------------------------------------------------------------------
// Add function for 'window.location.query.makeString( object, [addQuestionMark] )'
// which returns a queryString from an object. An optional boolean parameter can be
// used to toggle a leading question mark.
// -------------------------------------------------------------------------------------
if (!window.location.query) {
    window.location.query = function (source) {
        var map = {};
        source = source || this.search;

        if ("" != source) {
            var groups = source, i;

            if (groups.indexOf("?") == 0) {
                groups = groups.substr(1);
            }

            groups = groups.split("&");

            for (i in groups) {
                source = groups[i].split("=",
                    // For: xxx=, Prevents: [xxx, ""], Forces: [xxx]
                    (groups[i].slice(-1) !== "=") + 1
                );

                // Key
                i = decodeURIComponent(source[0]);

                // Value
                source = source[1];
                source = typeof source === "undefined"
                    ? source
                    : decodeURIComponent(source);

                // Save Duplicate Key
                if (i in map) {
                    if (Object.prototype.toString.call(map[i]) !== "[object Array]") {
                        map[i] = [map[i]];
                    }

                    map[i].push(source);
                }

                // Save New Key
                else {
                    map[i] = source;
                }
            }
        }

        return map;
    }

    window.location.query.makeString = function (source, addQuestionMark) {
        var str = "", i, ii, key;

        if (typeof source == "boolean") {
            addQuestionMark = source;
            source = undefined;
        }

        if (source == undefined) {
            str = window.location.search;
        }
        else {
            for (i in source) {
                key = "&" + encodeURIComponent(i);

                if (Object.prototype.toString.call(source[i]) !== "[object Array]") {
                    str += key + addUndefindedValue(source[i]);
                }
                else {
                    for (ii = 0; ii < source[i].length; ii++) {
                        str += key + addUndefindedValue(source[i][ii]);
                    }
                }
            }
        }

        return (addQuestionMark === false ? "" : "?") + str.substr(1);
    }

    function addUndefindedValue(source) {
        return typeof source === "undefined"
            ? ""
            : "=" + encodeURIComponent(source);
    }
}

สนุก.

หากคุณเคยใช้typescriptและมีdomในlibของtsconfig.jsonคุณคุณสามารถทำได้:

const url: URL = new URL(window.location.href);
const params: URLSearchParams = url.searchParams;
// get target key/value from URLSearchParams object
const yourParamValue: string = params.get('yourParamKey');

// To append, you can also leverage api to avoid the `?` check 
params.append('newKey', 'newValue');

คุณสามารถใช้ฟังก์ชันนี้เพื่อแยกสตริงจาก? id =

 function myfunction(myvar){
  var urls = myvar;
  var myurls = urls.split("?id=");
  var mylasturls = myurls[1];
  var mynexturls = mylasturls.split("&");
  var url = mynexturls[0];
  alert(url)
}
myfunction(window.top.location.href);
myfunction("http://www.myname.com/index.html?id=dance&emp;cid=in_social_facebook-hhp-food-moonlight-influencer_s7_20160623");

นี่คือซอ

คุณสามารถใช้สิ่งนี้เพื่อค้นหาค่าโดยตรงผ่านชื่อพารามิเตอร์

const urlParams = new URLSearchParams(window.location.search);
const myParam = urlParams.get('myParam');

  window.location.href.slice(window.location.href.indexOf('?') + 1);

คุณสามารถใช้searchคุณสมบัติของwindow.locationอ็อบเจ็กต์เพื่อรับส่วนเคียวรีของ URL โปรดทราบว่ามีเครื่องหมายคำถาม (?) อยู่ตอนต้นในกรณีที่มีผลต่อวิธีที่คุณตั้งใจจะแยกวิเคราะห์

คุณควรดู URL API ที่มีวิธีการช่วยเหลือในการดำเนินการดังกล่าวในURLSearchParams: https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams

ปัจจุบันเบราว์เซอร์รุ่นใหม่ยังไม่รองรับการใช้งานดังนั้นอย่าลืมใส่โพลีฟิลล์ (Polyfill สามารถใช้ได้โดยใช้https://qa.polyfill.io/ )

  var queryObj = {};
   if(url.split("?").length>0){
     var queryString = url.split("?")[1];
   }

ตอนนี้คุณมีส่วนของแบบสอบถามใน queryString

การแทนที่ครั้งแรกจะลบช่องว่างสีขาวทั้งหมดส่วนที่สองจะแทนที่ส่วน "&" ทั้งหมดด้วย "," และสุดท้ายการแทนที่ครั้งที่สามจะใส่เครื่องหมาย ":" แทนเครื่องหมาย '='

queryObj = JSON.parse('{"' + queryString.replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g,'":"') + '"}')

จึงขอบอกว่าคุณมีแบบสอบถามเหมือนabc = 123 & EFG = 456 ก่อนที่จะแยกวิเคราะห์ข้อความค้นหาของคุณจะถูกแปลงเป็น {"abc": "123", "efg": "456"} ตอนนี้เมื่อคุณจะแยกวิเคราะห์สิ่งนี้มันจะทำให้คุณค้นหาในวัตถุ json

แปลงเป็นอาร์เรย์แล้วแยกด้วย "?"

var url= 'http://localhost/PMApp/temp.htm?ProjectID=462';

url.split('?')[1];     //ProjectID=462

q={};location.search.replace(/([^?&=]+)=([^&]+)/g,(_,k,v)=>q[k]=v);q;

ลองอันนี้

/**
 * Get the value of a querystring
 * @param  {String} field The field to get the value of
 * @param  {String} url   The URL to get the value from (optional)
 * @return {String}       The field value
 */
var getQueryString = function ( field, url ) {
    var href = url ? url : window.location.href;
    var reg = new RegExp( '[?&]' + field + '=([^&#]*)', 'i' );
    var string = reg.exec(href);
    return string ? string[1] : null;
};

สมมติว่า URL ของคุณคือhttp: //example.com&this=chicken&that=sandwich คุณต้องการได้รับค่าของสิ่งนี้และอื่น ๆ

var thisOne = getQueryString('this'); // returns 'chicken'
var thatOne = getQueryString('that'); // returns 'sandwich'
var anotherOne = getQueryString('another'); // returns null

หากคุณต้องการใช้ URL อื่นที่ไม่ใช่ URL ในหน้าต่างคุณสามารถส่งต่อหนึ่งในเป็นอาร์กิวเมนต์ที่สองได้

var yetAnotherOne = getQueryString('example', 'http://another-example.com&example=something'); // returns 'something'

ข้อมูลอ้างอิง

ฉันคิดว่ามันปลอดภัยกว่าที่จะพึ่งพาเบราว์เซอร์มากกว่า regex ที่ชาญฉลาด:

const parseUrl = function(url) { 
  const a = document.createElement('a')
  a.href = url
  return {
    protocol: a.protocol ? a.protocol : null,
    hostname: a.hostname ? a.hostname : null,
    port: a.port ? a.port : null,
    path: a.pathname ? a.pathname : null,
    query: a.search ? a.search : null,
    hash: a.hash ? a.hash : null,
    host: a.host ? a.host : null  
  }
}

console.log( parseUrl(window.location.href) ) //stacksnippet
//to obtain a query
console.log( parseUrl( 'https://example.com?qwery=this').query )