URL से प्रोटोकॉल, डोमेन और पोर्ट प्राप्त करें

Question

मुझे दिए गए URL से पूरा प्रोटोकॉल, डोमेन और पोर्ट निकालने की आवश्यकता है। उदाहरण के लिए:

https://localhost:8181/ContactUs-1.0/contact?lang=it&report_type=consumer
>>>
https://localhost:8181

Comments

उन पाठकों के लिए जो उत्तर की तलाश कर रहे हैं जहां URL वर्तमान स्थान नहीं है, स्वीकृत उत्तर के नीचे देखें

— जनवरी को गाइ शल्नत

Answer 1

पहले वर्तमान पता प्राप्त करें

var url = window.location.href

तो बस उस स्ट्रिंग को पार्स करें

var arr = url.split("/");

आपका url है:

var result = arr[0] + "//" + arr[2]

उम्मीद है की यह मदद करेगा

Comments

यह URL स्ट्रिंग के साथ काम करता है जहाँ locationऑब्जेक्ट उपलब्ध नहीं है (ब्राउज़र के बाहर js!)

— थम्मे गौड़ा

डेविड केल्होन का उत्तर अंतर्निहित पार्सर (जैसे location) का उपयोग करता है, लेकिन किसी भी यूआरएल के लिए इस्तेमाल किया जा सकता है । यह साफ है कि यह जाँच करें।

— स्टिजन डे विट

या बस इसे एक-लाइनर में बदल दें:window.location.href.split('/').slice(0, 3).join('/')

— रयान मैक्ग्रे

और आप नोड पर यह कैसे करेंगे?

— डीडीडी

window.location.origin

— int soumen

Answer 2

var full = location.protocol+'//'+location.hostname+(location.port ? ':'+location.port: '');

Comments

@Randomblue इसके बारे में क्या? आपको मिलेगा about://। हालांकि, मैं यह जानने के लिए उत्सुक हूं कि इसके लिए उपयोग मामला क्या होगा about:blank? मुझे यकीन नहीं है कि कोई भी ब्राउज़र प्लग इन संसाधनों को इंजेक्ट करता है about:blank, लेकिन ऐसा लगता है कि केवल उपयोग का मामला हो सकता है।

— शेफ

यदि आपके पास URL स्ट्रिंग है, तो यह बिल्कुल भी काम नहीं करता है? (यानी आप करने की आवश्यकता है पर location काम करने के लिए इस बात के लिए)

— निक टी

देर से जवाब के लिए क्षमा करें, @NickT। हाँ, यह ऐसा नहीं करता है। कृपया, डेविड द्वारा दिए गए अच्छे समाधान का उपयोग करें ।

— शेफ

इस उत्तर को सही उत्तर के रूप में चुना जाना चाहिए। यह साफ है और मानक स्थान ऑब्जेक्ट का उपयोग करता है।

— मोहित गैंग्रेड

आप उपयोग नहीं कर सकते location.hostकरने के बजाय location.hostname+ location.port?

— 14:24 बजे c24w

Answer 3

इनमें से कोई भी उत्तर प्रश्न को पूरी तरह से संबोधित नहीं करता है, जो एक मनमाने ढंग से यूआरएल के लिए कहता है, विशेष रूप से वर्तमान पृष्ठ का यूआरएल नहीं।

विधि 1: URL API (चेतावनी: कोई IE11 समर्थन) का उपयोग करें

आप URL API का उपयोग कर सकते हैं (IE11 द्वारा समर्थित नहीं है, लेकिन हर जगह उपलब्ध है )।

इससे खोज पारमों तक पहुंचना आसान हो जाता है । एक और बोनस: इसका उपयोग वेब वर्कर में किया जा सकता है क्योंकि यह DOM पर निर्भर नहीं करता है।

const url = new URL('http://example.com:12345/blog/foo/bar?startIndex=1&pageSize=10');

विधि 2 (पुराना तरीका): DOM में ब्राउज़र के बिल्ट-इन पार्सर का उपयोग करें

यदि आपको पुराने ब्राउज़र पर काम करने के लिए इसकी आवश्यकता है तो इसका उपयोग करें।

//  Create an anchor element (note: no need to append this element to the document)
const url = document.createElement('a');
//  Set href to any path
url.setAttribute('href', 'http://example.com:12345/blog/foo/bar?startIndex=1&pageSize=10');

बस!

ब्राउज़र का बिल्ट-इन पार्सर पहले ही अपना काम कर चुका है। अब आप बस उन हिस्सों को पकड़ सकते हैं जिनकी आपको ज़रूरत है (ध्यान दें कि यह उपरोक्त दोनों तरीकों के लिए काम करता है):

//  Get any piece of the url you're interested in
url.hostname;  //  'example.com'
url.port;      //  12345
url.search;    //  '?startIndex=1&pageSize=10'
url.pathname;  //  '/blog/foo/bar'
url.protocol;  //  'http:'

बोनस: सर्च परमेस

संभावना है कि आप संभवतः खोज url params को अलग करना चाहते हैं, क्योंकि 'startIndex = 1 & pageSize = 10' अपने आप में बहुत उपयोगी नहीं है।

यदि आपने ऊपर दिए गए तरीके 1 (URL API) का उपयोग किया है, तो आप बस खोजप्रेमर्स गेटर्स का उपयोग करें:

url.searchParams.get('startIndex');  // '1'

या सभी पैरामीटर प्राप्त करने के लिए:

function searchParamsToObj(searchParams) {
  const paramsMap = Array
    .from(url.searchParams)
    .reduce((params, [key, val]) => params.set(key, val), new Map());
  return Object.fromEntries(paramsMap);
}
searchParamsToObj(url.searchParams);
// -> { startIndex: '1', pageSize: '10' }

यदि आपने विधि 2 (पुराना तरीका) का उपयोग किया है, तो आप कुछ इस तरह का उपयोग कर सकते हैं:

// Simple object output (note: does NOT preserve duplicate keys).
var params = url.search.substr(1); // remove '?' prefix
params
    .split('&')
    .reduce((accum, keyval) => {
        const [key, val] = keyval.split('=');
        accum[key] = val;
        return accum;
    }, {});
// -> { startIndex: '1', pageSize: '10' }

Comments

link.protocol मुझे एक "http:" मिलती है अगर मैं "google.com" के साथ एक औकर का निरीक्षण करता हूं:var link = document.createElement('a'); link.setAttribute('href', 'google.com'); console.log(link.protocol)

— eXe

क्या आप httpशायद एक पेज पर ऐसा कर रहे हैं ? यदि निर्दिष्ट नहीं किया गया है तो यह वर्तमान स्थान से 'वारिस' होगा

— स्टिजेन डेविट

यह एक शानदार उत्तर है और इसे अधिक वोट मिलने चाहिए, क्योंकि यह उत्तर केवल वर्तमान स्थान तक ही सीमित नहीं है, बल्कि किसी भी यूआरएल के लिए काम करता है , और क्योंकि यह उत्तर ब्राउज़र के अंतर्निहित पार्सर का उपयोग स्वयं करने के बजाय करता है (जिसे हम नहीं कर सकते हैं) के रूप में अच्छी तरह से या के रूप में जल्दी करने की उम्मीद!)।

— स्टिजन डे विट

इस चतुर चाल के लिए धन्यवाद! मैं एक बात जोड़ना चाहते हैं: वहाँ है दोनों hostऔर hostname। पूर्व में बंदरगाह (जैसे localhost:3000) शामिल है, जबकि बाद वाला केवल मेजबान का नाम (जैसे localhost) है।

— कोडरन

निरपेक्ष URL के मामले में यह अच्छी तरह से काम करता है। यह संबंधित URL और क्रॉस-ब्राउज़र के मामले में विफल रहता है। कोई सुझाव?

— गुरुराज

Answer 4

किसी कारण के लिए सभी जवाब सभी ओवरकिल हैं। यह सब यह लेता है:

window.location.origin

अधिक विवरण यहां देखे जा सकते हैं: https://developer.mozilla.org/en-US/docs/Web/API/window.location#Properties

Comments

FYI करें, मुझे यकीन है कि यह भविष्य में बहुत अच्छा होगा जब सभी लोकप्रिय ब्राउज़रों यह लागू किया है हूँ, लेकिन , यह वर्तमान में मामला है: developer.mozilla.org/en-US/docs/Web/API/... पर फ़ायरफ़ॉक्स और वेबकीट ब्राउज़र के केवल हाल के संस्करण लिखने का समय मेरे शोध के अनुसार मूल संपत्ति का समर्थन करता है।

— ज़ैक सेठ

बस पूरा करने के लिए: स्थान HTML5 पर परिभाषित किया गया है और यह URLUtilsइंटरफ़ेस को लागू करता है जिसे WHATWG पर परिभाषित किया गया है और इसमें originविशेषता शामिल है ।

— सिरो सेंटिल्ली 郝海东 i iro i 法轮功

नमस्ते, 2015 से .. दुर्भाग्य से URLUtils अभी भी एमडीएन पर इस संगतता तालिका के अनुसार, सभी ब्राउज़रों में ठीक से लागू नहीं किया गया है । हालांकि ऐसा लगता है कि मूल संपत्ति 2013 की तुलना में थोड़ी बेहतर है, यह अभी भी उत्पादन के लिए फिट नहीं है क्योंकि यह सफारी में ठीक से लागू नहीं हुई है। क्षमा करें दोस्तों :(

— NotLizards

अपडेट: अभी भी कई ब्राउज़रों के लिए समर्थित नहीं है (सफारी के रूप में अच्छी तरह से) :(:

— अहमद हमजा

यह IE में भी काम नहीं करता है, यह "अपरिभाषित" देता है।

— सिद्धार्थ चौधरी

Answer 5

जैसा कि पहले ही उल्लेख किया गया है कि अभी तक पूरी तरह से समर्थित नहीं है, window.location.originलेकिन इसका उपयोग करने के लिए या उपयोग करने के लिए एक नया चर बनाने के बजाय, मैं इसके लिए जांच करना पसंद करता हूं और अगर इसे सेट करने के लिए सेट नहीं है।

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

if (!window.location.origin) {
  window.location.origin = window.location.protocol + "//" + window.location.hostname + (window.location.port ? ':' + window.location.port: '');
}

मैंने वास्तव में इसके बारे में कुछ महीने पहले लिखा था। A fix for window.location.origin

Comments

यह पहली बार है कि मुझे पता window.location.originहै कि मौजूद है। धन्यवाद। ^ ^

— ईथिज़ोन जो

Answer 6

मेज़बान

var url = window.location.host;

रिटर्न localhost:2679

होस्ट नाम

var url = window.location.hostname;

रिटर्न localhost

Comments

धन्यवाद!!! मैं यह पता नहीं लगा सका कि लोकलहोस्ट ऐसा क्यों दिखा रहा localhost/है localhost:3000।

— टायलर यंगब्लड

Answer 7

window.location.origin समान पाने के लिए पर्याप्त होगा।

Comments

जिससे मेरी समस्या आसानी से हल हो गई। शुक्रिया @intsoumen

— Turker Tunali

Answer 8

प्रोटोकॉल गुण कोलन (:) सहित वर्तमान URL के प्रोटोकॉल को सेट या रिटर्न करता है।

इसका मतलब है कि यदि आप केवल HTTP / HTTPS हिस्सा प्राप्त करना चाहते हैं तो आप कुछ इस तरह से कर सकते हैं:

var protocol = window.location.protocol.replace(/:/g,'')

डोमेन के लिए आप इसका उपयोग कर सकते हैं:

var domain = window.location.hostname;

पोर्ट के लिए आप उपयोग कर सकते हैं:

var port = window.location.port;

ध्यान रखें कि पोर्ट खाली स्ट्रिंग होगा यदि वह URL में दिखाई नहीं दे रहा है। उदाहरण के लिए:

• http://example.com/ पोर्ट के लिए "" लौटेगा
• http://example.com:80/ पोर्ट के लिए 80 लौटेगा

यदि आपको कोई पोर्ट उपयोग नहीं है, तो आपको 80/443 दिखाने की आवश्यकता है

var port = window.location.port || (protocol === 'https' ? '443' : '80');

Answer 9

क्यों नहीं उपयोग करें:

let full = window.location.origin

Comments

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

— जेसन एलर

Answer 10

वास्तव में, window.location.origin मानकों का पालन करने वाले ब्राउज़रों में ठीक काम करता है, लेकिन क्या लगता है। IE मानकों का पालन नहीं कर रहा है।

तो इस वजह से, यह IE, फ़ायरफ़ॉक्स और क्रोम में मेरे लिए काम करता है:

var full = location.protocol+'//'+location.hostname+(location.port ? ':'+location.port: '');

लेकिन संभावित भविष्य के संवर्द्धन के लिए, जो संघर्ष का कारण बन सकता है, मैंने "स्थान" ऑब्जेक्ट से पहले "विंडो" संदर्भ निर्दिष्ट किया।

var full = window.location.protocol+'//'+window.location.hostname+(window.location.port ? ':'+window.location.port: '');

Answer 11

यहाँ समाधान मैं उपयोग कर रहा हूँ:

const result = `${ window.location.protocol }//${ window.location.host }`;

संपादित करें:

क्रॉस-ब्राउज़र संगतता जोड़ने के लिए, निम्नलिखित का उपयोग करें:

const result = `${ window.location.protocol }//${ window.location.hostname + (window.location.port ? ':' + window.location.port: '') }`;

Comments

अपवोटेड, लेकिन window.location.host

— nathanfranke

धन्यवाद, मैंने अपने मूल उत्तर में क्रॉस-ब्राउज़र संगतता जोड़ी है।

— JulienRioux

Answer 12

var http = location.protocol;
var slashes = http.concat("//");
var host = slashes.concat(window.location.hostname);

Answer 13

var getBasePath = function(url) {
    var r = ('' + url).match(/^(https?:)?\/\/[^/]+/i);
    return r ? r[0] : '';
};

Comments

अपने उत्तर की व्याख्या करने पर विचार करें। मत मानो कि ओपी आपके कोड के विभिन्न हिस्सों के महत्व को समझ सकता है।

— एडीसन

Answer 14

एक नियमित अभिव्यक्ति (रेगेक्स) का उपयोग करने की कोशिश करें, जो सामान को मान्य / निकालने या यहां तक ​​कि जावास्क्रिप्ट में कुछ सरल पार्सिंग करने के लिए काफी उपयोगी होगा।

रेगेक्स है:

/([a-zA-Z]+):\/\/([\-\w\.]+)(?:\:(\d{0,5}))?/

प्रदर्शन:

function breakURL(url){

     matches = /([a-zA-Z]+):\/\/([\-\w\.]+)(?:\:(\d{0,5}))?/.exec(url);

     foo = new Array();

     if(matches){
          for( i = 1; i < matches.length ; i++){ foo.push(matches[i]); }
     }

     return foo
}

url = "https://www.google.co.uk:55699/search?q=http%3A%2F%2F&oq=http%3A%2F%2F&aqs=chrome..69i57j69i60l3j69i65l2.2342j0j4&sourceid=chrome&ie=UTF-8"


breakURL(url);       // [https, www.google.co.uk, 55699] 
breakURL();          // []
breakURL("asf");     // []
breakURL("asd://");  // []
breakURL("asd://a"); // [asd, a, undefined]

अब आप वैधीकरण भी कर सकते हैं।

Comments

"एक वैध RFC 3986 URL स्कीम में" एक अक्षर और उसके बाद अक्षरों, अंकों, ("+"), अवधि (""), या हाइफ़न ("-") के किसी भी संयोजन का समावेश होना चाहिए। - stackoverflow। com / a / 9142331/188833 (यहाँ एक कलश है: ietf: rfc: 3897 (URI) / urn: ietf: rfc: 3897 (IRI) regex इस योजना के लिए, Python में एक URI / IRI का भाग: github.com/dgerber /rfc3987/blob/master/rfc3987.py#L147 )

— वेस टर्नर

Answer 15

सरल उत्तर जो सभी ब्राउज़रों के लिए काम करता है:

let origin;

if (!window.location.origin) {
  origin = window.location.protocol + "//" + window.location.hostname + 
     (window.location.port ? ':' + window.location.port: '');
}

origin = window.location.origin;

Answer 16

ES6 शैली विन्यास योग्य मापदंडों के साथ।

/**
 * Get the current URL from `window` context object.
 * Will return the fully qualified URL if neccessary:
 *   getCurrentBaseURL(true, false) // `http://localhost/` - `https://localhost:3000/`
 *   getCurrentBaseURL(true, true) // `http://www.example.com` - `https://www.example.com:8080`
 *   getCurrentBaseURL(false, true) // `www.example.com` - `localhost:3000`
 *
 * @param {boolean} [includeProtocol=true]
 * @param {boolean} [removeTrailingSlash=false]
 * @returns {string} The current base URL.
 */
export const getCurrentBaseURL = (includeProtocol = true, removeTrailingSlash = false) => {
  if (!window || !window.location || !window.location.hostname || !window.location.protocol) {
    console.error(
      `The getCurrentBaseURL function must be called from a context in which window object exists. Yet, window is ${window}`,
      [window, window.location, window.location.hostname, window.location.protocol],
    )
    throw new TypeError('Whole or part of window is not defined.')
  }

  const URL = `${includeProtocol ? `${window.location.protocol}//` : ''}${window.location.hostname}${
    window.location.port ? `:${window.location.port}` : ''
  }${removeTrailingSlash ? '' : '/'}`

  // console.log(`The URL is ${URL}`)

  return URL
}

Answer 17

window.location.protocol + '//' + window.location.host