জাভাস্ক্রিপ্ট সহ বর্তমান ইউআরএল থেকে ক্যোরি স্ট্রিং কীভাবে পাবেন?


108

আমার এই মত ইউআরএল আছে:

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

আমাকে যা করতে হবে তা হল ?সাইন (ক্যোয়ারী স্ট্রিং) এর পরে বিশদটি পাওয়া - এটি ProjectID=462। আমি কীভাবে জাভাস্ক্রিপ্ট ব্যবহার করে এটি পেতে পারি?

আমি এখন পর্যন্ত যা করেছি তা হ'ল:

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

আমি জানি না এরপরে কী করতে হবে।


এই চেক করুন stackoverflow.com/questions/901115/...
slash197

@ ক্যাপকেক: এই প্রশ্নটি প্যারামিটারগুলি উত্তোলন সম্পর্কে, এটি কেবল এখানে পাওয়ার বিষয়েlocation.search
বার্গি

পুনরায় খোলার জন্য ভোট, চিহ্নিত নকলটি একটি লাইব্রেরির জন্য একটি অনুরোধ, যেখানে এই প্রশ্নটি জেএস কোড পাওয়ার বিষয়ে।
1615903


উত্তর:


238

সম্পর্কে MDN নিবন্ধটি দেখুন window.location

কোয়েরি স্ট্রিং পাওয়া যায় window.location.search

সমাধান যা উত্তরাধিকারী ব্রাউজারগুলিতেও কাজ করে

এমডিএন কোয়েরিস্ট্রিংয়ে কীভাবে উপলব্ধ একক কীটির মূল্য পেতে পারে তার একটি উদাহরণ (উপরের রেফারেন্সযুক্ত আর্টিকেলটিতে আর উপলব্ধ নেই) সরবরাহ করে। এটার মতো কিছু:

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ইউআরএল ইন্টারফেসের সম্পত্তি রয়েছে যা ইউআরএল সার্চপ্যারামস অবজেক্ট দেয়। প্রত্যাবর্তিত অবজেক্টটিতে গেট-মেথড সহ বেশ কয়েকটি সুবিধাজনক পদ্ধতি রয়েছে। সুতরাং উপরের উদাহরণটির সমতুল্য হ'ল:

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

URLSearchParams ইন্টারফেস একটি querystring বিন্যাসে পার্স স্ট্রিং ব্যবহার করা যেতে পারে, এবং সেগুলিকে একটি কুশলী URLSearchParams বস্তুর এ পরিণত হয়।

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

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

লক্ষ্য করুন যে ব্রাউজার সমর্থনটি এখনও এই ইন্টারফেসে সীমাবদ্ধ রয়েছে, সুতরাং যদি আপনাকে লিগ্যাসি ব্রাউজারগুলি সমর্থন করতে হয় তবে প্রথম উদাহরণটির সাথে আটকে থাকুন বা পলিফিল ব্যবহার করুন ।


শুধু একটি নোট: সবসময় ব্যবহার encodeURIComponent/decodeURIComponentপরিবর্তেescape/unescape
TSH

1
getQueryStringValueলিগ্যাসি ব্রাউজারগুলির জন্য প্রথম কাজটি কার্যকর হয় না ?foo=bar&foo1=bar1 যদি আমরা এর জন্য মান আনার চেষ্টা করি তবে fooএটি ফিরে আসে empty string
ফারহান চৌহান

পুরাতন ব্রাউজারগুলি ( ইউআরএল
প্রত্যুষ

@ প্রত্যুষ হ্যাঁ আমি উত্তরে উল্লেখ করেছি যে আরও জনপ্রিয় এবং প্রায়শই আপডেট হওয়া ইউআরএল-অনুসন্ধান-প্যারামস-পলিফিল প্যাকেজটির উল্লেখ রয়েছে।
ক্রিস্টোফার এলিয়াসন

57

ব্যবহার করুন window.location.searchপরে সবকিছু পেতে ? সহ?

উদাহরণ:

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

15
বা এমনকি সহজ:let querystring = window.location.search.substring(1);
ওলিব্রে

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

উজ্জ্বল! অনেক ধন্যবাদ.
রন 16

ভাল পদ্ধতির। ধন্যবাদ। একটি লিট বিট এটি ঠিক করুন: পুরো (!) স্ট্রিং চেক প্রতিস্থাপন করুন। আমাদের প্রথম চরটি সরিয়ে ফেলতে হবে। অপ্রয়োজনীয় লুপগুলি অপসারণ করা হচ্ছে। ফলাফল: উইন্ডো.লোকেশন.সর্চ উইন্ডো.লোকেশন.সিয়ার্ক.সুবস্ট্র (1) .স্প্লিট ("&") .ড্রেস ((অভি, পারম) => {কনস্ট [কী, মান] = প্যারাম.স্প্লিট ("=") ; রিটার্ন {... এ্যাক, [কী]: মান};}, {})
নিকিতা

7

এটি মানচিত্র হিসাবে ক্যোরিস্ট্রিং ভেরিয়েবলগুলিতে অ্যাক্সেসের জন্য একটি গ্লোবাল ফাংশন যুক্ত করবে।

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

উপভোগ করুন।


5

আপনি ব্যবহার করতে ঘটেছে টাইপ করা বিষয় এবং ডোম আপনার liberal এর সংক্ষিপ্ত রূপ এর 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');

4

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

এখানে হৈচৈ


4

আপনি এটি প্যারাম নামের মাধ্যমে সরাসরি অনুসন্ধানের জন্য ব্যবহার করতে পারেন।

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


2

আপনি ইউআরএল এর কোয়েরি অংশটি পেতে বস্তুর searchসম্পত্তিটি ব্যবহার করতে পারেন window.location। মনে রাখবেন যে এটির শুরুতে প্রশ্ন চিহ্নটি (?) অন্তর্ভুক্ত রয়েছে, কেবলমাত্র যদি আপনি এটির বিশ্লেষণের পরিকল্পনা কীভাবে প্রভাবিত করে।


2

এটিকে অর্জনের জন্য সহায়তার পদ্ধতি রয়েছে এমন ইউআরএল API এ আপনার নজর দেওয়া উচিত URLSearchParams: https://developer.mozilla.org/en-US/docs/Web/API/URLShopParams

এটি বর্তমানে সমস্ত আধুনিক ব্রাউজার দ্বারা সমর্থিত নয়, তাই এটি পলিফিল করতে ভুলবেন না ( https://qa.polyfill.io/ ব্যবহার করে পলিফিল উপলব্ধ )।


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

এখন আপনার ক্যোয়ারী স্ট্রিংয়ে ক্যোরির অংশ রয়েছে

প্রথমে প্রতিস্থাপন সমস্ত সাদা স্থান মুছে ফেলবে, দ্বিতীয়টি সমস্ত '&' অংশটি "," এর সাথে প্রতিস্থাপন করবে এবং শেষ পর্যন্ত তৃতীয় প্রতিস্থাপন ":" চিহ্নের জায়গায় ":" রাখবে।

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

সুতরাং ধরা যাক আপনার কাছে abc = 123 & efg = 456 এর মতো একটি প্রশ্ন ছিল । পার্সিংয়ের আগে, আপনার ক্যোয়ারীটি {"abc": "123", "efg": "456" like এর মতো কিছুতে রূপান্তরিত হচ্ছে} এখন আপনি যখন এটি বিশ্লেষণ করবেন, এটি আপনাকে জেসন অবজেক্টে আপনার ক্যোয়ারী দেবে।


যদিও এই কোডটি প্রশ্নের উত্তর দিতে পারে, কীভাবে এবং / বা কেন এটি সমস্যার সমাধান করে তা সম্পর্কিত অতিরিক্ত প্রসঙ্গ সরবরাহ করলে উত্তরের দীর্ঘমেয়াদী মান উন্নত হবে।
বাদচাডাবড়া

2

এটিকে অ্যারেতে রূপান্তর করুন তারপরে ভাগ করুন? '

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

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


0

আর একবার চেষ্টা কর

/**
 * 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 ব্যতীত অন্য কোনও ইউআরএল ব্যবহার করতে চান তবে আপনি একটি দ্বিতীয় যুক্তি হিসাবে পাস করতে পারেন can

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

উল্লেখ


0

আমি মনে করি যে কোনও বুদ্ধিমান রেজেক্সের চেয়ে ব্রাউজারের উপর নির্ভর করা আরও নিরাপদ:

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 )

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.