Làm cách nào để lấy chuỗi truy vấn từ URL hiện tại bằng JavaScript?

Tôi có URL như thế này:

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

Những gì tôi cần làm là lấy chi tiết sau ?dấu (chuỗi truy vấn) - nghĩa là ProjectID=462. Làm thế nào tôi có thể nhận được điều đó bằng JavaScript?

Những gì tôi đã làm cho đến nay là:

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

Tôi không biết phải làm gì tiếp theo.

Hãy xem bài viết MDN về window.location.

QueryString có sẵn trong window.location.search.

Giải pháp cũng hoạt động trong các trình duyệt cũ

MDN cung cấp một ví dụ (không còn có sẵn trong bài viết tham chiếu ở trên) về cách lấy giá trị của một khóa duy nhất có sẵn trong QueryString. Một cái gì đó như thế này:

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")); 

Trong các trình duyệt hiện đại

Trong các trình duyệt hiện đại, bạn có thuộc searchParamstính của giao diện URL, giao diện này trả về một đối tượng URLSearchParams . Đối tượng trả về có một số phương thức thuận tiện, bao gồm một phương thức get. Vì vậy, tương đương với ví dụ trên sẽ là:

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

Các URLSearchParams giao diện cũng có thể được sử dụng để phân tích chuỗi trong một định dạng chuỗi truy vấn, và biến chúng thành một đối tượng URLSearchParams tiện dụng.

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

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

Lưu ý rằng hỗ trợ trình duyệt vẫn còn hạn chế trên giao diện này, vì vậy nếu bạn cần hỗ trợ các trình duyệt cũ, hãy sử dụng ví dụ đầu tiên hoặc sử dụng polyfill .

Sử dụng window.location.searchđể nhận mọi thứ sau khi ? bao gồm?

Thí dụ:

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
  }, {})

Điều này sẽ thêm một hàm toàn cục để truy cập vào các biến queryString dưới dạng bản đồ.

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

Thưởng thức.

Nếu bạn tình cờ sử dụng Typecript và có dom trong lib của mình tsconfig.json, bạn có thể làm:

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');

Bạn có thể sử dụng hàm này để tách chuỗi từ? 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");

đây là trò chơi

Bạn có thể sử dụng điều này cho giá trị tìm trực tiếp thông qua tên tham số.

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

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

Bạn có thể sử dụng thuộc searchtính của window.locationđối tượng để lấy phần truy vấn của URL. Lưu ý rằng nó bao gồm dấu chấm hỏi (?) Ở đầu, đề phòng ảnh hưởng đến cách bạn định phân tích cú pháp.

Bạn nên xem API URL có các phương thức trợ giúp để đạt được điều này trong đó như URLSearchParams: https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams

Điều này hiện không được hỗ trợ bởi tất cả các trình duyệt hiện đại, vì vậy đừng quên polyfill nó (Polyfill có sẵn bằng cách sử dụng https://qa.polyfill.io/ ).

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

bây giờ bạn có phần truy vấn trong queryString

Thay thế đầu tiên sẽ loại bỏ tất cả các khoảng trắng, thay thế thứ hai sẽ thay thế tất cả phần '&' bằng "," và cuối cùng thay thế thứ ba sẽ đặt ":" vào vị trí của dấu '='.

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

Vì vậy, giả sử bạn có một truy vấn như abc = 123 & efg = 456 . Bây giờ trước khi phân tích cú pháp, truy vấn của bạn đang được chuyển đổi thành một thứ như {"abc": "123", "efg": "456"}. Bây giờ khi bạn phân tích cú pháp này, nó sẽ cung cấp cho bạn truy vấn của bạn trong đối tượng json.

Chuyển nó thành mảng sau đó tách bằng '?'

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;

Hãy thử cái này

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

Giả sử URL của bạn là http: //example.com&this=chicken&that=sandwich . Bạn muốn nhận được giá trị của cái này, cái kia, và cái khác.

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

Nếu bạn muốn sử dụng URL khác với URL trong cửa sổ, bạn có thể chuyển một URL vào làm đối số thứ hai.

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

Tài liệu tham khảo

Tôi nghĩ rằng dựa vào trình duyệt là cách an toàn hơn bất kỳ regex khéo léo nào:

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 )