168

मैं जावास्क्रिप्ट (या jQuery) का उपयोग करके एक स्ट्रिंग चर से बेस URL निकालने के लिए एक अपेक्षाकृत आसान और विश्वसनीय तरीका खोजने की कोशिश कर रहा हूं।

उदाहरण के लिए, कुछ इस तरह दिया गया:

http://www.sitename.com/article/2009/09/14/this-is-an-article/

मैं पाना चाहूंगा:

http://www.sitename.com/

क्या एक नियमित अभिव्यक्ति सबसे अच्छी शर्त है? यदि हां, तो किसी दिए गए स्ट्रिंग से निकाले गए आधार URL को एक नए चर में निर्दिष्ट करने के लिए मैं किस कथन का उपयोग कर सकता हूं?

मैं इस पर कुछ खोज किया है, लेकिन सब कुछ मैं जावास्क्रिप्ट दुनिया में मिल वास्तविक दस्तावेज़ URL का उपयोग करने से यह जानकारी एकत्र करने के चारों ओर घूमना करने लगता है location.host या इसी तरह की।

— घपला
स्रोत

अब दिनों का जवाब यह एक

— davidmpaz

205

संपादित करें: कुछ लोग शिकायत करते हैं कि यह प्रोटोकॉल में नहीं है। इसलिए मैंने कोड को अपग्रेड करने का फैसला किया, क्योंकि यह उत्तर के रूप में चिह्नित है। उन लोगों के लिए जो एक-लाइन-कोड पसंद करते हैं ... अच्छी तरह से खेद है कि हम कोड मिनिमाइज़र का उपयोग क्यों करते हैं, कोड मानव पठनीय होना चाहिए और यह तरीका बेहतर है ... मेरी राय में।

var pathArray = "https://somedomain.com".split( '/' );
var protocol = pathArray[0];
var host = pathArray[2];
var url = protocol + '//' + host;

या नीचे से डेविड्स समाधान का उपयोग करें।

— itzhar
स्रोत

6

उत्तर के लिए धन्यवाद, लेकिन फिर से, मैं वास्तविक दस्तावेज़ URL के बजाय एक स्ट्रिंग से आधार URL निकालने का प्रयास कर रहा हूं। मुझे नहीं लगता कि इससे मुझे मदद मिलेगी - हालाँकि अगर मैं गलत हूं तो कृपया मुझे सुधारें।

— जंगल

2

pathArray = स्ट्रिंग (" YourHost.com/url/nic/or/not").split ('/'); host = pathArray [2];

4

मिल गया - धन्यवाद रफाल और डैडीवुडलैंड! मैंने प्रयोग करके समाप्त किया: url = ' sitename.com/article/2009/09/09/14/this-is-an-article '; pathArray = (url) .split ('/'); मेजबान = 'http: //' + pathArray [2]; मुझे लगता है कि रफाल के उदाहरण ने "http: //" को छोड़ दिया है, जो उन सभी स्ट्रिंग्स में मौजूद है जो मैं प्रसंस्करण कर रहा हूं, इस मामले में pathArray [2] वह है जो आपको चाहिए। बिना "http: //" उपसर्ग के, pathArray [0] एक होगा। एक बार फिर धन्यवाद।

— जंगल सेप

4

सभी चर घोषणा क्यों? url = 'sitename.com/article/2009/09/14/this-is-an-article'; newurl = 'http://' + url.split('/')[0];

— एरिक

1

pathArray = window.location.href.split ('/'); प्रोटोकॉल = pathArray [0]; host = pathArray [2]; url = प्रोटोकॉल + ': //' + मेजबान; //now url === "http:://stackoverflow.com" चेकआउट::

154

WebKit- आधारित ब्राउज़र, फ़ायरफ़ॉक्स 21 संस्करण के रूप में और Internet Explorer के वर्तमान संस्करण (IE 10 और 11) लागू होते हैं location.origin।

location.originइसमें प्रोटोकॉल , डोमेन और वैकल्पिक रूप से URL का पोर्ट शामिल है।

उदाहरण के लिए, location.originURL http://www.sitename.com/article/2009/09/14/this-is-an-article/है http://www.sitename.com।

location.originनिम्नलिखित संक्षिप्त पॉलीफिल के उपयोग के लिए समर्थन के बिना ब्राउज़रों को लक्षित करने के लिए :

if (typeof location.origin === 'undefined')
    location.origin = location.protocol + '//' + location.host;

— डेविड
स्रोत

36

window.location.hostnameयदि दिया गया है तो पोर्ट नंबर की कमी होगी window.location.host। तो अनुगामी स्लेश सहित पूरा 'बेसनेम' होगा:window.location.protocol+"//"+window.location.host + "/";

— सरबक

4

वास्तव में, window.location.hostname अभी भी उपयोगी है यदि, मेरे मामले में, आपको एक अलग पोर्ट नंबर प्रदान करने की आवश्यकता है।

— डेरेल ब्रोगडन

44

JQuery का उपयोग करने की जरूरत नहीं है, बस उपयोग करें

location.hostname

— daddywoodland
स्रोत

5

धन्यवाद - मैं इसे एक स्ट्रिंग के साथ उपयोग नहीं कर सकता, हालांकि, क्या मैं कर सकता हूं? मेरी समझ यह है कि केवल दस्तावेज़ URL के साथ काम करना होगा।

— जंगल

2

इसमें प्रोटोकॉल और पोर्ट शामिल नहीं होंगे।

— डेविड

32

पथ, होस्टनाम, आदि को एक स्ट्रिंग से लिंक करने के लिए विभाजन करने का कोई कारण नहीं है जो एक लिंक है। आपको बस एक लिंक का उपयोग करने की आवश्यकता है

//create a new element link with your link
var a = document.createElement("a");
a.href="http://www.sitename.com/article/2009/09/14/this-is-an-article/";

//hide it from view when it is added
a.style.display="none";

//add it
document.body.appendChild(a);

//read the links "features"
alert(a.protocol);
alert(a.hostname)
alert(a.pathname)
alert(a.port);
alert(a.hash);

//remove it
document.body.removeChild(a);

आप इसे आसानी से jQuery के तत्व को जोड़ सकते हैं और इसके एट्री को पढ़ सकते हैं।

— epascarello
स्रोत

6

जब आपने यह दिखाया हो कि 50K jQuery को कुछ बाइट्स में jQuery के बिना कैसे करें?

— टिम डाउन

13

क्योंकि पोस्टर का कहना है कि वे jQuery का उपयोग कर रहे हैं।

— उपसंहारक

1

आह हाँ, काफी उचित है। हालाँकि जब यह इतना सरल होता है तो मुझे एब्स्ट्रेक्शन की अतिरिक्त परत का उपयोग करने में कोई मूल्य नहीं दिखता है जो कि jQuery का उपयोग करेगा।

— टिम डाउन

2

हम यह मानकर चल रहे हैं कि पूरी साइट उस मामले में jqUERY पर चलती है, kquery वास्तव में चीजों को सरल बनाएगी।

— 23

2

Ewww ... यह ऐसा करने का सबसे अच्छा तरीका नहीं है ... अगर window.location.href से निकाल रहे हैं, तो window.location का उपयोग करें। अन्यथा, एक रेगेक्स का उपयोग करें।

— बीएमएनर

21

var host = location.protocol + '//' + location.host + '/';

— KTA
स्रोत

2

इसे सही उत्तर माना जाना चाहिए - यह प्रोटोकॉल रखता है

— कटाई

16

String.prototype.url = function() {
  const a = $('<a />').attr('href', this)[0];
  // or if you are not using jQuery 👇🏻
  // const a = document.createElement('a'); a.setAttribute('href', this);
  let origin = a.protocol + '//' + a.hostname;
  if (a.port.length > 0) {
    origin = `${origin}:${a.port}`;
  }
  const {host, hostname, pathname, port, protocol, search, hash} = a;
  return {origin, host, hostname, pathname, port, protocol, search, hash};

}

फिर :

'http://mysite:5050/pke45#23'.url()
 //OUTPUT : {host: "mysite:5050", hostname: "mysite", pathname: "/pke45", port: "5050", protocol: "http:",hash:"#23",origin:"http://mysite:5050"}

आपके अनुरोध के लिए, आपको चाहिए:

 'http://mysite:5050/pke45#23'.url().origin

07-2017 की समीक्षा करें: यह अधिक सुरुचिपूर्ण भी हो सकती है और इसमें अधिक विशेषताएं हैं

const parseUrl = (string, prop) =>  {
  const a = document.createElement('a'); 
  a.setAttribute('href', string);
  const {host, hostname, pathname, port, protocol, search, hash} = a;
  const origin = `${protocol}//${hostname}${port.length ? `:${port}`:''}`;
  return prop ? eval(prop) : {origin, host, hostname, pathname, port, protocol, search, hash}
}

फिर

parseUrl('http://mysite:5050/pke45#23')
// {origin: "http://mysite:5050", host: "mysite:5050", hostname: "mysite", pathname: "/pke45", port: "5050"…}


parseUrl('http://mysite:5050/pke45#23', 'origin')
// "http://mysite:5050"

ठंडा!

— अब्देनूर TOUMI
स्रोत

12

यदि आप jQuery का उपयोग कर रहे हैं, तो यह जावास्क्रिप्ट में तत्वों को हेरफेर करने का एक अच्छा तरीका है, उन्हें DOM में जोड़े बिना:

var myAnchor = $("<a />");

//set href    
myAnchor.attr('href', 'http://example.com/path/to/myfile')

//your link's features
var hostname = myAnchor.attr('hostname'); // http://example.com
var pathname = myAnchor.attr('pathname'); // /path/to/my/file
//...etc

— वेन
स्रोत

1

मुझे लगता है कि यह होना चाहिए myAnchor.prop('hostname')। मुझे लगता है कि jQuery पिछले 5 वर्षों में बदल गया है ... उत्तर के लिए धन्यवाद!

— देहली

11

URL के स्ट्रिंग प्रतिनिधित्व से बुनियादी मूल्यों को प्राप्त करने के लिए एक लाइटवे लेकिन पूर्ण दृष्टिकोण डगलस क्रॉफोर्ड की रेगेक्स नियम है:

var yourUrl = "http://www.sitename.com/article/2009/09/14/this-is-an-article/";
var parse_url = /^(?:([A-Za-z]+):)?(\/{0,3})([0-9.\-A-Za-z]+)(?::(\d+))?(?:\/([^?#]*))?(?:\?([^#]*))?(?:#(.*))?$/;
var parts = parse_url.exec( yourUrl );
var result = parts[1]+':'+parts[2]+parts[3]+'/' ;

यदि आप एक अधिक शक्तिशाली URL हेरफेर टूलकिट की तलाश कर रहे हैं, तो URI.js को आज़माएं, यह एक अच्छा श्रृंखला योग्य एपीआई के साथ गेटर्स, सेटर, यूआरएल सामान्यीकरण आदि का समर्थन करता है।

यदि आप jQuery प्लगइन की तलाश कर रहे हैं, तो jquery.url.js को आपकी मदद करनी चाहिए

ऐसा करने का एक सरल तरीका एक एंकर तत्व का उपयोग करना है, जैसा कि @epascarello ने सुझाव दिया है। इसका नुकसान यह है कि आपको DOM एलिमेंट बनाना है। हालांकि यह एक बंद में बंद किया जा सकता है और कई यूआरएल के लिए पुन: उपयोग किया जा सकता है:

var parseUrl = (function () {
  var a = document.createElement('a');
  return function (url) {
    a.href = url;
    return {
      host: a.host,
      hostname: a.hostname,
      pathname: a.pathname,
      port: a.port,
      protocol: a.protocol,
      search: a.search,
      hash: a.hash
    };
  }
})();

इसका उपयोग ऐसे करें:

paserUrl('http://google.com');

— alexandru.topliceanu
स्रोत

10

खैर, URL API ऑब्जेक्ट url के मैन्युअल रूप से विभाजन और निर्माण से बचता है।

 let url = new URL('/programming/1420881');
 alert(url.origin);

— devansvd
स्रोत

8

यदि आप window.location.href (पता बार) से जानकारी निकाल रहे हैं, तो पाने के लिए इस कोड का उपयोग करें http://www.sitename.com/:

var loc = location;
var url = loc.protocol + "//" + loc.host + "/";

यदि आपके पास एक स्ट्रिंग है, strजो एक मनमाना URL है (window.location.href नहीं), तो नियमित अभिव्यक्तियों का उपयोग करें:

var url = str.match(/^(([a-z]+:)?(\/\/)?[^\/]+\/).*$/)[1];

मैं, यूनिवर्स में हर किसी की तरह, नियमित अभिव्यक्ति पढ़ने से नफरत करता हूं, इसलिए मैं इसे अंग्रेजी में तोड़ दूंगा:

एक बृहदान्त्र द्वारा पीछा शून्य या अधिक अल्फा वर्ण खोजें (प्रोटोकॉल, जिसे छोड़ा जा सकता है)
// द्वारा अनुसरण किया जा सकता है (छोड़ा भी जा सकता है)
(होस्टनाम और पोर्ट) को छोड़कर किसी भी वर्ण द्वारा अनुसरण किया गया
के बाद /
जो भी (पथ, कम शुरुआत /) द्वारा पीछा किया।

DOM तत्वों को बनाने या किसी भी चीज़ को क्रेजी करने की आवश्यकता नहीं है।

— BMiner
स्रोत

7

मैं एक साधारण रेगेक्स का उपयोग करता हूं जो मेजबान के url को निकालता है:

function get_host(url){
    return url.replace(/^((\w+:)?\/\/[^\/]+\/?).*$/,'$1');
}

और इसे इस तरह से उपयोग करें

var url = 'http://www.sitename.com/article/2009/09/14/this-is-an-article/'
var host = get_host(url);

ध्यान दें, यदि urlएक साथ अंत नहीं है एक में अंत नहीं होगा ।/host/

यहाँ कुछ परीक्षण दिए गए हैं:

describe('get_host', function(){
    it('should return the host', function(){
        var url = 'http://www.sitename.com/article/2009/09/14/this-is-an-article/';
        assert.equal(get_host(url),'http://www.sitename.com/');
    });
    it('should not have a / if the url has no /', function(){
        var url = 'http://www.sitename.com';
        assert.equal(get_host(url),'http://www.sitename.com');
    });
    it('should deal with https', function(){
        var url = 'https://www.sitename.com/article/2009/09/14/this-is-an-article/';
        assert.equal(get_host(url),'https://www.sitename.com/');
    });
    it('should deal with no protocol urls', function(){
        var url = '//www.sitename.com/article/2009/09/14/this-is-an-article/';
        assert.equal(get_host(url),'//www.sitename.com/');
    });
    it('should deal with ports', function(){
        var url = 'http://www.sitename.com:8080/article/2009/09/14/this-is-an-article/';
        assert.equal(get_host(url),'http://www.sitename.com:8080/');
    });
    it('should deal with localhost', function(){
        var url = 'http://localhost/article/2009/09/14/this-is-an-article/';
        assert.equal(get_host(url),'http://localhost/');
    });
    it('should deal with numeric ip', function(){
        var url = 'http://192.168.18.1/article/2009/09/14/this-is-an-article/';
        assert.equal(get_host(url),'http://192.168.18.1/');
    });
});

— Michael_Scharf
स्रोत

6

आप वर्तमान URL के विभिन्न मापदंडों को प्राप्त करने के लिए नीचे दिए गए कोड का उपयोग कर सकते हैं

alert("document.URL : "+document.URL);
alert("document.location.href : "+document.location.href);
alert("document.location.origin : "+document.location.origin);
alert("document.location.hostname : "+document.location.hostname);
alert("document.location.host : "+document.location.host);
alert("document.location.pathname : "+document.location.pathname);

— Nimesh07
स्रोत

4

function getBaseURL() {
    var url = location.href;  // entire url including querystring - also: window.location.href;
    var baseURL = url.substring(0, url.indexOf('/', 14));


    if (baseURL.indexOf('http://localhost') != -1) {
        // Base Url for localhost
        var url = location.href;  // window.location.href;
        var pathname = location.pathname;  // window.location.pathname;
        var index1 = url.indexOf(pathname);
        var index2 = url.indexOf("/", index1 + 1);
        var baseLocalUrl = url.substr(0, index2);

        return baseLocalUrl + "/";
    }
    else {
        // Root Url for domain name
        return baseURL + "/";
    }

}

आप फिर इसे इस तरह से उपयोग कर सकते हैं ...

var str = 'http://en.wikipedia.org/wiki/Knopf?q=1&t=2';
var url = str.toUrl();

Url का मान होगा ...

{
"original":"http://en.wikipedia.org/wiki/Knopf?q=1&t=2",<br/>"protocol":"http:",
"domain":"wikipedia.org",<br/>"host":"en.wikipedia.org",<br/>"relativePath":"wiki"
}

"Var url" में दो विधियाँ शामिल हैं।

var paramQ = url.getParameter('q');

इस मामले में paramQ का मान 1 होगा।

var allParameters = url.getParameters();

AllParameters का मान केवल पैरामीटर नाम होगा।

["q","t"]

IE, क्रोम और फ़ायरफ़ॉक्स पर परीक्षण किया गया।

— शेख
स्रोत

1

मुझे लगता है कि मुझे कुछ याद आ रहा है ... कहां से आ रहा है?

— thomasf1

3

इसके बजाय window.location.protocol और window.location.origin के लिए खाता है, और संभवतः एक निर्दिष्ट पोर्ट नंबर, आदि को याद करने के लिए, बस सब कुछ हड़पने के लिए 3 जी / ":

// get nth occurrence of a character c in the calling string
String.prototype.nthIndex = function (n, c) {
    var index = -1;
    while (n-- > 0) {
        index++;
        if (this.substring(index) == "") return -1; // don't run off the end
        index += this.substring(index).indexOf(c);
    }
    return index;
}

// get the base URL of the current page by taking everything up to the third "/" in the URL
function getBaseURL() {
    return document.URL.substring(0, document.URL.nthIndex(3,"/") + 1);
}

— सोवा
स्रोत

2

यह काम:

location.href.split(location.pathname)[0];

— एलेन ब्यूवोइस
स्रोत

1

मामले में विफल रहता है, जहांlocation.pathname = '/'

— mido

1

आप इसे regex का उपयोग करके कर सकते हैं:

/(http:\/\/)?(www)[^\/]+\//i

क्या यह सही है ?

— क्लेमेंट हेरमैन
स्रोत

1

हम्म, मेरे सीमित रेगेक्स कौशल से, ऐसा लगता है कि यह कम से कम करीब है। मैं इस सवाल के लिए कुछ और जानकारी जोड़ूंगा कि क्या मैं सर्वश्रेष्ठ रेगेक्स को कम करने में मदद कर सकता हूं।

— जंगल

1

मैंने तार पर .split ('/') का उपयोग कर समाप्त कर दिया, क्योंकि यह मेरे लिए एक आसान समाधान था। यद्यपि कि आपकी इस सहायता के लिए धन्यवाद!

— जंगल

2

https URL होस्ट नाम www से शुरू नहीं हो रहे हैं? वैसे भी www पर कब्जा क्यों?

— टिम डाउन

1

मुझे नहीं पता, ओपी ने पूछा कि एक यूआरएल कैसे पकड़ा जाए, और उनके उदाहरण में http और www था।

— क्लेमेंट हेरमैन

1

किसी भी यूआरएल की उत्पत्ति प्राप्त करने के लिए, एक वेबसाइट ( /my/path) या योजनाबद्ध ( //example.com/my/path), या पूर्ण ( http://example.com/my/path) के भीतर पथों सहित , मैंने एक त्वरित फ़ंक्शन को एक साथ रखा।

नीचे दिए गए स्निपेट में, तीनों कॉल लॉग होनी चाहिए https://stacksnippets.net।

function getOrigin(url)
{
  if(/^\/\//.test(url))
  { // no scheme, use current scheme, extract domain
    url = window.location.protocol + url;
  }
  else if(/^\//.test(url))
  { // just path, use whole origin
    url = window.location.origin + url;
  }
  return url.match(/^([^/]+\/\/[^/]+)/)[0];
}

console.log(getOrigin('https://stacksnippets.net/my/path'));
console.log(getOrigin('//stacksnippets.net/my/path'));
console.log(getOrigin('/my/path'));

स्निपेट का विस्तार करें

— टॉम के
स्रोत

0

यह, मेरे लिए काम करता है:

var getBaseUrl = function (url) {
  if (url) {
    var parts = url.split('://');
    
    if (parts.length > 1) {
      return parts[0] + '://' + parts[1].split('/')[0] + '/';
    } else {
      return parts[0].split('/')[0] + '/';
    }
  }
};

स्निपेट का विस्तार करें

— abelabbesnabi
स्रोत

0

var tilllastbackslashregex = new RegExp(/^.*\//);
baseUrl = tilllastbackslashregex.exec(window.location.href);

window.location.href ब्राउज़र एड्रेस बार से वर्तमान यूआरएल एड्रेस देता है

यह किसी भी चीज की तरह हो सकता है जैसे https://stackoverflow.com/abc/xyz या https://www.google.com/search?q=abc Tilllastbackslashregex.exec () रन regex और अंतिम बैकलैश यानी https तक मिलान किए गए स्ट्रिंग को फिर से चलाएँ। : //stackoverflow.com/abc/ या https://www.google.com/ क्रमशः

— हसीब उल्लाह खान
स्रोत

5

कृपया संक्षिप्त विवरण जोड़ें।

— प्रीत

6

समीक्षा कतार से : मई मैं आपसे अनुरोध करता हूं कि कृपया अपने स्रोत-कोड के आसपास कुछ संदर्भ जोड़ें। कोड-केवल उत्तर समझना मुश्किल है। यह पूछने वाले और भविष्य के पाठकों दोनों की मदद करेगा यदि आप अपनी पोस्ट में अधिक जानकारी जोड़ सकते हैं।

— आरबीटी

0

जावास्क्रिप्ट देशी एपीआई URLऑब्जेक्ट का उपयोग करने का एक अच्छा तरीका है । यह कई उपयोगी यूआरएल भागों प्रदान करता है।

उदाहरण के लिए:

const url = '/programming/1420881/how-to-extract-base-url-from-a-string-in-javascript'

const urlObject = new URL(url);

console.log(urlObject);


// RESULT: 
//________________________________
hash: "",
host: "stackoverflow.com",
hostname: "stackoverflow.com",
href: "/programming/1420881/how-to-extract-base-url-from-a-string-in-javascript",
origin: "https://stackoverflow.com",
password: "",
pathname: "/questions/1420881/how-to-extract-base-url-from-a-string-in-javaript",
port: "",
protocol: "https:",
search: "",
searchParams: [object URLSearchParams]
... + some other methods

जैसा कि आप यहाँ देख सकते हैं कि आप अपनी ज़रूरत के हिसाब से बस पहुँच सकते हैं।

उदाहरण के लिए: console.log(urlObject.host); // "stackoverflow.com"

URL के लिए डॉक्टर

— वी। सांभर
स्रोत

जावास्क्रिप्ट में स्ट्रिंग से बेस URL कैसे निकालें?

07-2017 की समीक्षा करें: यह अधिक सुरुचिपूर्ण भी हो सकती है और इसमें अधिक विशेषताएं हैं