मैं जावास्क्रिप्ट में होस्टनाम और पथ में URL कैसे पार्स करूं?

Question

मैं एक स्ट्रिंग लेना चाहूंगा

var a = "http://example.com/aa/bb/"

और इसे एक ऐसी वस्तु में संसाधित करें

a.hostname == "example.com"

तथा

a.pathname == "/aa/bb"

Comments

यदि आप वर्तमान URL पर काम कर रहे हैं, तो आप ऑब्जेक्ट से सीधे hostnameऔर pathnameसीधे पहुँच सकते हैं location।

— rvighne

"lastPathPart" के बारे में क्या?

— विक्टर

रेगेक्स नहीं, लेकिन पायथन मॉड्यूल tldextract ठीक यही करता है: github.com/john-kurkowski/tldextract

— ओलिवर ओलिवर

Answer 1

आधुनिक तरीका:

new URL("http://example.com/aa/bb/")

गुणों के साथ एक वस्तु लौटाता है hostnameऔर कुछ अन्य लोगोंpathname के साथ ।

पहला तर्क एक रिश्तेदार या पूर्ण URL है; यदि यह सापेक्ष है, तो आपको दूसरा तर्क (आधार URL) निर्दिष्ट करने की आवश्यकता है। उदाहरण के लिए, वर्तमान पृष्ठ के सापेक्ष URL के लिए:

new URL("/aa/bb/", location)

ब्राउज़रों के अलावा, यह एपीआई v7 के माध्यम से Node.js में भी उपलब्ध हैrequire('url').URL ।

Comments

अच्छा! सापेक्ष URL हालांकि इसे तोड़ देते हैं: :( new URL('/stuff?foo=bar#baz')->SyntaxError: Failed to construct 'URL': Invalid URL

— 20

प्रायोगिक तकनीक: IE इस का समर्थन नहीं करता! developer.mozilla.org/en-US/docs/Web/API/URL/…

— cwouter

@cwouter: यह एज में काम करता है, जो IE

— rvighne

यह ऐसा करने का तरीका है, बढ़त पहले से ही 3 संस्करणों के शीर्ष पर है, इसलिए यह कोई फर्क नहीं पड़ता है

— क्लाउडीयू क्रेन्गा

तथ्य यह है कि जावास्क्रिप्ट के पास ब्राउज़र या सर्वर पर काम करने वाले URL को पार्स करने का बिल्ट-इन तरीका नहीं है ... बहुत ही दुख की बात है ...

— Skitterm

Answer 2

var getLocation = function(href) {
    var l = document.createElement("a");
    l.href = href;
    return l;
};
var l = getLocation("http://example.com/path");
console.debug(l.hostname)
>> "example.com"
console.debug(l.pathname)
>> "/path"

Comments

क्या आप सुनिश्चित हैं कि यह एक क्रॉस-ब्राउज़र संगत समाधान है?

— cllpse

यह ध्यान दिया जाना चाहिए कि, जबकि यह मूल पोस्टर की मदद / उत्तर दे सकता है, यह उत्तर केवल एक ब्राउज़र में JS काम करने वाले लोगों के लिए काम करेगा, क्योंकि यह अपना काम करने के लिए DOM पर निर्भर करता है।

— एडम बाटकिन

सरलता का एक और उदाहरण, सरलता के साथ।

— सईद नेमाटी

IE में काम नहीं करता है यदि href सापेक्ष है। l.hostname खाली हो जाएगा। यदि आप केवल पूर्ण URL प्रदान कर रहे हैं तो यह काम करेगा।

— डेरेक प्री

यहां तक ​​कि निरपेक्ष URL के साथ, IE (IE 11 में परीक्षण) क्रोम और फ़ायरफ़ॉक्स से अलग व्यवहार करता है। IE के pathnameप्रमुख स्लेश को हटा देता है, जबकि अन्य ब्राउज़र नहीं करते हैं। तो आप अपने ब्राउज़र पर निर्भर करते हुए /pathया के साथ समाप्त करेंगे path।

— ट्रूविल

Answer 3

यहाँ पाया गया: https://gist.github.com/jlong/2428561

var parser = document.createElement('a');
parser.href = "http://example.com:3000/pathname/?search=test#hash";

parser.protocol; // => "http:"
parser.host;     // => "example.com:3000"
parser.hostname; // => "example.com"
parser.port;     // => "3000"
parser.pathname; // => "/pathname/"
parser.hash;     // => "#hash"
parser.search;   // => "?search=test"
parser.origin;   // => "http://example.com:3000"

Comments

ध्यान दें कि यदि आप वर्तमान ब्राउज़र स्थान के पार्स किए गए हिस्सों को प्राप्त करना चाहते हैं, तो पहली दो लाइनें बन जाती हैं parser = location;और निम्नलिखित सभी लाइनें काम करती हैं। इसे अभी क्रोम और IE9 में आज़माया।

— ली मीडोर

यह भी ध्यान दें कि pathnameIE में अग्रणी स्लैश शामिल नहीं है। जाओ पता लगाओ। : डी

— नेवेलिस

IE के लिए, "/" + parser.pathname

— sbose

चेतावनी: यह http:तब भी लौटेगा जब आप सिर्फ domain.comhref (बिना किसी प्रोटोकॉल के) पास होंगे। यदि प्रोटोकॉल गायब था, और यदि मैं इसे जोड़ सकता हूं, तो यह जांचने के लिए मैं इसका उपयोग करना चाहता था, लेकिन यह http मानता है: इसलिए इस उद्देश्य के लिए इसका उपयोग करने में असमर्थ था।

— मैक्स हॉजेस

होस्टनाम में वास्तव में प्रोटोकॉल शामिल है। Chrome के नवीनतम संस्करण पर परीक्षण करें।

— AndroidDev

Answer 4

aटैग व्यवहार का अनुकरण करने वाले regexp का उपयोग करते हुए यहां एक सरल कार्य किया गया है।

पेशेवरों

• पूर्वानुमानित व्यवहार (कोई क्रॉस ब्राउज़र समस्याएँ)
• डोम की जरूरत नहीं है
• यह वास्तव में छोटा है।

विपक्ष

• रीडगेक्स को पढ़ना थोड़ा मुश्किल है

-

function getLocation(href) {
    var match = href.match(/^(https?\:)\/\/(([^:\/?#]*)(?:\:([0-9]+))?)([\/]{0,1}[^?#]*)(\?[^#]*|)(#.*|)$/);
    return match && {
        href: href,
        protocol: match[1],
        host: match[2],
        hostname: match[3],
        port: match[4],
        pathname: match[5],
        search: match[6],
        hash: match[7]
    }
}

-

getLocation("http://example.com/");
/*
{
    "protocol": "http:",
    "host": "example.com",
    "hostname": "example.com",
    "port": undefined,
    "pathname": "/"
    "search": "",
    "hash": "",
}
*/

getLocation("http://example.com:3000/pathname/?search=test#hash");
/*
{
    "protocol": "http:",
    "host": "example.com:3000",
    "hostname": "example.com",
    "port": "3000",
    "pathname": "/pathname/",
    "search": "?search=test",
    "hash": "#hash"
}
*/

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

यहाँ नियमित अभिव्यक्ति का टूटना है

var reURLInformation = new RegExp([
    '^(https?:)//', // protocol
    '(([^:/?#]*)(?::([0-9]+))?)', // host (hostname and port)
    '(/{0,1}[^?#]*)', // pathname
    '(\\?[^#]*|)', // search
    '(#.*|)$' // hash
].join(''));
var match = href.match(reURLInformation);

Comments

किसी भी संबंधित URL के साथ काम नहीं करता है। क्या आपने regexp बनाते समय RFC-3986 का अनुसरण किया था? > getLocation ("// example.com/"); null> getLocation ("/ pathname /? search"); null> getLocation ("/ pathname /"); null> getLocation ("रिश्तेदार"); अशक्त

— gregers

मुझे पसंद है कि यह डोम का उपयोग कैसे नहीं करता है, लेकिन ग्रेगर्स के पास एक अच्छा बिंदु है। यह अच्छा होगा यदि यह सापेक्ष पथों को संभाल सकता है। इसे रिक्त स्थान और कोड जोड़ने के लिए window.location (एक तत्व) का उपयोग करना होगा। उस स्थिति में, विधि पाखंडी बन जाएगी। जब तक कोई विकल्प नहीं है, तब तक यह सुनिश्चित नहीं है कि यह पूरी तरह से कैसे हल किया जा सकता है।

— टर्बो

मूल url के साथ href कुंजी को जोड़ा गया, यह डोम कार्यान्वयन के साथ उस रिटर्न ऑब्जेक्ट पर स्थिरता प्रदान करता है।

— Mattdlockyer

यदि किसी को रिश्तेदार URL को पार्स करने की आवश्यकता है, तो यहां अपडेट किया गया regexp: / ^ (? :( https;?): \ / \ /)? (([^: \ /? #] *) (?: \: ([0) -9] +))?) ([\ /] {0,1} [^? #] *) (\ _ [^ #] * *) (# *। *) $ /

— shlensky

Answer 5

var loc = window.location;  // => "http://example.com:3000/pathname/?search=test#hash"

currentUrl लौटाता है।

यदि आप url के रूप में अपना स्ट्रिंग पास करना चाहते हैं ( IE11 में काम नहीं करता है ):

var loc = new URL("http://example.com:3000/pathname/?search=test#hash")

तो आप इसे पसंद कर सकते हैं:

loc.protocol; // => "http:"
loc.host;     // => "example.com:3000"
loc.hostname; // => "example.com"
loc.port;     // => "3000"
loc.pathname; // => "/pathname/"
loc.hash;     // => "#hash"
loc.search;   // => "?search=test"

Answer 6

freddiefujiwara का जवाब बहुत अच्छा है, लेकिन मुझे इंटरनेट एक्सप्लोरर के भीतर रिश्तेदार URL का समर्थन करने की भी आवश्यकता है। मैं निम्नलिखित समाधान के साथ आया:

function getLocation(href) {
    var location = document.createElement("a");
    location.href = href;
    // IE doesn't populate all link properties when setting .href with a relative URL,
    // however .href will return an absolute URL which then can be used on itself
    // to populate these additional fields.
    if (location.host == "") {
      location.href = location.href;
    }
    return location;
};

अब इसका उपयोग आवश्यक गुण प्राप्त करने के लिए करें:

var a = getLocation('http://example.com/aa/bb/');
document.write(a.hostname);
document.write(a.pathname);

JSFiddle उदाहरण: http://jsfiddle.net/6AEAB/

Comments

यह स्वीकृत उत्तर होना चाहिए। सापेक्ष-से-निरपेक्ष URL हैंडलिंग का बहुत चालाक उपयोग। +1

— L0j1k

जाहिरा तौर पर पहली बार नहीं जब JSFiddle लिंक का निधन हो गया: stackoverflow.com/questions/25179964/…

— क्लॉस

इसने बहुत अच्छा काम किया, हालाँकि मेरे पास एक अपडेट था कि मुझे उम्मीद है कि इससे दूसरों को मदद मिलेगी। मैं इसका उपयोग पोस्टमैसेज रिक्वेस्ट पर ओरिजिनल चेक करने के लिए कर रहा हूं और जब पोर्ट डिफॉल्ट पोर्ट (80 या 443) है, तो यह रास्ते में नहीं जाता है। मैंने अपना URL बनाते समय इसके लिए सशर्त जाँच की: var locationHost = (location.port !== '80' && location.port !== '443') ? location.host : location.hostname; var locationOrigin = location.protocol + '//' + locationHost;

— rhoster

मैंने इस समाधान के अधिक लोकप्रिय संस्करण पर यह टिप्पणी कहीं और की, लेकिन जैसा कि यह मेरा पसंदीदा समाधान था, मैं इसे यहां दोहराना चाहता था। IE11 में, href में यूजरनेम होने के कारण ये सभी प्रॉपर्टी सिक्योरिटी एरर को पढ़ने के लिए पढ़ती है। उदाहरण: " example.com " ठीक काम करेगा। लेकिन " [e-mail] " या " उपयोगकर्ता नाम: [e-mail] " एंकर तत्व के अन्य गुणों में से एक को संदर्भित करने का कोई भी प्रयास करेगा (उदाहरण: हैश) विफल करने और एक अप्रिय त्रुटि को फेंकने के लिए।

— क्लिप्पी

Answer 7

js-uri (Google कोड पर उपलब्ध) एक स्ट्रिंग URL लेता है और इससे एक URI ऑब्जेक्ट को हल करता है:

var some_uri = new URI("http://www.example.com/foo/bar");

alert(some_uri.authority); // www.example.com
alert(some_uri);           // http://www.example.com/foo/bar

var blah      = new URI("blah");
var blah_full = blah.resolve(some_uri);
alert(blah_full);         // http://www.example.com/foo/blah

Comments

धन्यवाद!!! लेकिन मैं uri = नया स्थान (" example.com/aa/bb" ) टाइपोफ़ (window.location) ==

— टाइपोफ़

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

— रेक्स एम

developer.mozilla.org/en/DOM/window.location बहुत ही बढ़िया है !! इसलिए मुझे आशा है कि स्ट्रिंग को window.location ऑब्जेक्ट में परिवर्तित करें

— freddiefujiwara

Window.location सेट करने से ब्राउज़र बदल जाता है इसलिए ऐसा होने वाला नहीं है।

— 3

हम्म वह सही है। window.location एक स्ट्रिंग नहीं है, लेकिन इसे स्ट्रिंग से असाइन किया जा सकता है। मुझे यकीन नहीं है कि अगर नकल की जा सकती है, तो मैंने एक नई uri ऑब्जेक्ट को स्थान का प्रोटोटाइप असाइन करने की कोशिश की है लेकिन यह काम नहीं किया।

— रेक्स एम

Answer 8

सरल नियमित अभिव्यक्ति के बारे में क्या?

url = "http://www.example.com/path/to/somwhere";
urlParts = /^(?:\w+\:\/\/)?([^\/]+)(.*)$/.exec(url);
hostname = urlParts[1]; // www.example.com
path = urlParts[2]; // /path/to/somwhere

Comments

किसी मान्य चीज़ को पार्स करने की कोशिश करें //user:[e-mail]/path/x?y=zऔर आप देखेंगे कि सरल नियमित अभिव्यक्ति इसे काटती क्यों नहीं है। अब इसे कुछ अवैध रूप से फेंक दें और इसे पूर्वानुमेय तरीके से भी जमानत देनी चाहिए।

— मिकको रैंटलैनेन

साधारण रेगेक्स सरल समस्याओं के लिए है :) लेकिन यह मुझे नहीं लगता है कि इस तरह url regex द्वारा अप्राप्य है, इसे बस कुछ और ट्वीक की आवश्यकता होगी। लेकिन मैं शायद कुछ लाइब्रेरी के लिए जाऊंगा अगर मुझे कुछ और जटिल और बुलेटप्रूफ चाहिए।

— svestka

Answer 9

आज मैं इस समस्या को पूरा करता हूं और मैंने पाया: URL - MDN वेब एपीआई

var url = new URL("http://test.example.com/dir/subdir/file.html#hash");

यह वापसी:

{ hash:"#hash", host:"test.example.com", hostname:"test.example.com", href:"http://test.example.com/dir/subdir/file.html#hash", origin:"http://test.example.com", password:"", pathname:"/dir/subdir/file.html", port:"", protocol:"http:", search: "", username: "" }

मेरे पहले योगदान की आशा करना आपकी सहायता करता है!

Comments

डुप्लिकेट उत्तर

— मार्टिन वैन Driel

हाँ, लेकिन सबसे ऊपर वाला लड़का 2017 में अपने अवेयर को अपडेट करता है, मैं इसे 2016 में पोस्ट करता हूँ।

— ए। मोयनेट

आह मेरा बुरा, माफ करना

— मार्टिन वैन Driel

Answer 10

यहाँ एक संस्करण है जिसे मैंने https://gist.github.com/1847816 से कॉपी किया है , लेकिन फिर से लिखा गया है इसलिए इसे पढ़ना और डीबग करना आसान है। एंकर डेटा के किसी दूसरे वेरिएबल को "परिणाम" नाम से कॉपी करने का उद्देश्य है क्योंकि एंकर डेटा बहुत लंबा है, और इसलिए सीमित संख्या में मूल्यों को कॉपी करने से परिणाम को सरल बनाने में मदद मिलेगी।

/**
 * See: https://gist.github.com/1847816
 * Parse a URI, returning an object similar to Location
 * Usage: var uri = parseUri("hello?search#hash")
 */
function parseUri(url) {

  var result = {};

  var anchor = document.createElement('a');
  anchor.href = url;

  var keys = 'protocol hostname host pathname port search hash href'.split(' ');
  for (var keyIndex in keys) {
    var currentKey = keys[keyIndex]; 
    result[currentKey] = anchor[currentKey];
  }

  result.toString = function() { return anchor.href; };
  result.requestUri = result.pathname + result.search;  
  return result;

}

Answer 11

क्रॉस-ब्राउज़र URL पार्सिंग , IE 6, 7, 8 और 9 के लिए सापेक्ष पथ समस्या के आसपास काम करता है :

function ParsedUrl(url) {
    var parser = document.createElement("a");
    parser.href = url;

    // IE 8 and 9 dont load the attributes "protocol" and "host" in case the source URL
    // is just a pathname, that is, "/example" and not "http://domain.com/example".
    parser.href = parser.href;

    // IE 7 and 6 wont load "protocol" and "host" even with the above workaround,
    // so we take the protocol/host from window.location and place them manually
    if (parser.host === "") {
        var newProtocolAndHost = window.location.protocol + "//" + window.location.host;
        if (url.charAt(1) === "/") {
            parser.href = newProtocolAndHost + url;
        } else {
            // the regex gets everything up to the last "/"
            // /path/takesEverythingUpToAndIncludingTheLastForwardSlash/thisIsIgnored
            // "/" is inserted before because IE takes it of from pathname
            var currentFolder = ("/"+parser.pathname).match(/.*\//)[0];
            parser.href = newProtocolAndHost + currentFolder + url;
        }
    }

    // copies all the properties to this object
    var properties = ['host', 'hostname', 'hash', 'href', 'port', 'protocol', 'search'];
    for (var i = 0, n = properties.length; i < n; i++) {
      this[properties[i]] = parser[properties[i]];
    }

    // pathname is special because IE takes the "/" of the starting of pathname
    this.pathname = (parser.pathname.charAt(0) !== "/" ? "/" : "") + parser.pathname;
}

उपयोग ( डेमो JSFiddle यहाँ ):

var myUrl = new ParsedUrl("http://www.example.com:8080/path?query=123#fragment");

परिणाम:

{
    hash: "#fragment"
    host: "www.example.com:8080"
    hostname: "www.example.com"
    href: "http://www.example.com:8080/path?query=123#fragment"
    pathname: "/path"
    port: "8080"
    protocol: "http:"
    search: "?query=123"
}

Answer 12

IE, फ़ायरफ़ॉक्स और क्रोम में काम करने वाले आधुनिक समाधान की तलाश करने वालों के लिए:

हाइपरलिंक तत्व का उपयोग करने वाला इनमें से कोई भी समाधान क्रोम में समान काम नहीं करेगा।यदि आप किसी अमान्य (या रिक्त) URL को क्रोम में पास करते हैं, तो यह हमेशा उस होस्ट को लौटा देगा जहां से स्क्रिप्ट को कॉल किया जाता है। तो IE में आपको खाली मिलेगा, जबकि क्रोम में आपको लोकलहोस्ट (या जो भी) मिलेगा।

यदि आप रेफरल को देखने की कोशिश कर रहे हैं, तो यह धोखा है। आप यह सुनिश्चित करना चाहेंगे कि जो होस्ट आपको वापस मिले, वह इससे निपटने के लिए मूल url में था:

    function getHostNameFromUrl(url) {
        // <summary>Parses the domain/host from a given url.</summary>
        var a = document.createElement("a");
        a.href = url;

        // Handle chrome which will default to domain where script is called from if invalid
        return url.indexOf(a.hostname) != -1 ? a.hostname : '';
    }

Comments

यह एक बहुत ही महत्वपूर्ण बात है!

— 2rs2ts

यह पूरी तरह से रिश्तेदार urls को तोड़ता है, हालांकि!

— 20

Answer 13

AngularJS तरीका - यहाँ की बेला: पढ़ें http://jsfiddle.net/PT5BG/4/

<!DOCTYPE html>
<html>
<head>
    <title>Parse URL using AngularJS</title>
</head>
<body ng-app ng-controller="AppCtrl" ng-init="init()">

<h3>Parse URL using AngularJS</h3>

url: <input type="text" ng-model="url" value="" style="width:780px;">

<ul>
    <li>href = {{parser.href}}</li>
    <li>protocol = {{parser.protocol}}</li>
    <li>host = {{parser.host}}</li>
    <li>hostname = {{parser.hostname}}</li>
    <li>port = {{parser.port}}</li>
    <li>pathname = {{parser.pathname}}</li>
    <li>hash = {{parser.hash}}</li>
    <li>search = {{parser.search}}</li>
</ul>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>

<script>
function AppCtrl($scope) {

    $scope.$watch('url', function() {
        $scope.parser.href = $scope.url;
    });

    $scope.init = function() {
        $scope.parser = document.createElement('a');
        $scope.url = window.location;
    }

}
</script>

</body>
</html>

Comments

यदि आप सेवाओं $documentऔर $windowसेवाओं का उपयोग करेंगे तो यह अधिक कोणीय होगा

— चेर्निव

Answer 14

मॉड्यूल पैटर्न का उपयोग करके सरल और मजबूत समाधान। इसमें IE के लिए एक फिक्स शामिल है जहां pathnameहमेशा एक अग्रणी फ़ॉरवर्ड-स्लैश नहीं होता है (/ ) नहीं होता है।

मैं एक बनाया है सार एक साथ JSFiddle जो एक और अधिक गतिशील पार्सर प्रदान करता है। मैं आपको इसकी जांच करने और प्रतिक्रिया प्रदान करने की सलाह देता हूं।

var URLParser = (function (document) {
    var PROPS = 'protocol hostname host pathname port search hash href'.split(' ');
    var self = function (url) {
        this.aEl = document.createElement('a');
        this.parse(url);
    };
    self.prototype.parse = function (url) {
        this.aEl.href = url;
        if (this.aEl.host == "") {
           this.aEl.href = this.aEl.href;
        }
        PROPS.forEach(function (prop) {
            switch (prop) {
                case 'hash':
                    this[prop] = this.aEl[prop].substr(1);
                    break;
                default:
                    this[prop] = this.aEl[prop];
            }
        }, this);
        if (this.pathname.indexOf('/') !== 0) {
            this.pathname = '/' + this.pathname;
        }
        this.requestUri = this.pathname + this.search;
    };
    self.prototype.toObj = function () {
        var obj = {};
        PROPS.forEach(function (prop) {
            obj[prop] = this[prop];
        }, this);
        obj.requestUri = this.requestUri;
        return obj;
    };
    self.prototype.toString = function () {
        return this.href;
    };
    return self;
})(document);

डेमो

var URLParser = (function(document) {
  var PROPS = 'protocol hostname host pathname port search hash href'.split(' ');
  var self = function(url) {
    this.aEl = document.createElement('a');
    this.parse(url);
  };
  self.prototype.parse = function(url) {
    this.aEl.href = url;
    if (this.aEl.host == "") {
      this.aEl.href = this.aEl.href;
    }
    PROPS.forEach(function(prop) {
      switch (prop) {
        case 'hash':
          this[prop] = this.aEl[prop].substr(1);
          break;
        default:
          this[prop] = this.aEl[prop];
      }
    }, this);
    if (this.pathname.indexOf('/') !== 0) {
      this.pathname = '/' + this.pathname;
    }
    this.requestUri = this.pathname + this.search;
  };
  self.prototype.toObj = function() {
    var obj = {};
    PROPS.forEach(function(prop) {
      obj[prop] = this[prop];
    }, this);
    obj.requestUri = this.requestUri;
    return obj;
  };
  self.prototype.toString = function() {
    return this.href;
  };
  return self;
})(document);

/* Main */
var out = document.getElementById('out');
var urls = [
  'https://www.example.org:5887/foo/bar?a=1&b=2#section-1',
  'ftp://www.files.com:22/folder?id=7'
];
var parser = new URLParser();
urls.forEach(function(url) {
  parser.parse(url);
  println(out, JSON.stringify(parser.toObj(), undefined, ' '), 0, '#0000A7');
});

/* Utility functions */
function print(el, text, bgColor, fgColor) {
  var span = document.createElement('span');
  span.innerHTML = text;
  span.style['backgroundColor'] = bgColor || '#FFFFFF';
  span.style['color'] = fgColor || '#000000';
  el.appendChild(span);
}
function println(el, text, bgColor, fgColor) {
  print(el, text, bgColor, fgColor);
  el.appendChild(document.createElement('br'));
}

body {
  background: #444;
}
span {
  background-color: #fff;
  border: thin solid black;
  display: inline-block;
}
#out {
  display: block;
  font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
  font-size: 12px;
  white-space: pre;
}

<div id="out"></div>

उत्पादन

{
 "protocol": "https:",
 "hostname": "www.example.org",
 "host": "www.example.org:5887",
 "pathname": "/foo/bar",
 "port": "5887",
 "search": "?a=1&b=2",
 "hash": "section-1",
 "href": "https://www.example.org:5887/foo/bar?a=1&b=2#section-1",
 "requestUri": "/foo/bar?a=1&b=2"
}
{
 "protocol": "ftp:",
 "hostname": "www.files.com",
 "host": "www.files.com:22",
 "pathname": "/folder",
 "port": "22",
 "search": "?id=7",
 "hash": "",
 "href": "ftp://www.files.com:22/folder?id=7",
 "requestUri": "/folder?id=7"
}

Answer 15

का प्रयोग करें https://www.npmjs.com/package/uri-parse-lib इस के लिए

var t = parserURI("http://user:[e-mail]:8080/directory/file.ext?query=1&next=4&sed=5#anchor");

Answer 16

इसका उपयोग क्यों नहीं करते?

        $scope.get_location=function(url_str){
        var parser = document.createElement('a');
        parser.href =url_str;//"http://example.com:3000/pathname/?search=test#hash";
        var info={
            protocol:parser.protocol,   
            hostname:parser.hostname, // => "example.com"
            port:parser.port,     // => "3000"
            pathname:parser.pathname, // => "/pathname/"
            search:parser.search,   // => "?search=test"
            hash:parser.hash,     // => "#hash"
            host:parser.host, // => "example.com:3000"      
        }
        return info;
    }
    alert( JSON.stringify( $scope.get_location("http://localhost:257/index.php/deploy/?asd=asd#asd"),null,4 ) );

Answer 17

तुम भी उपयोग कर सकते हैं parse_url()से समारोह Locutus परियोजना (पूर्व php.js)।

कोड:

parse_url('http://username:password@hostname/path?arg=value#anchor');

परिणाम:

{
  scheme: 'http',
  host: 'hostname',
  user: 'username',
  pass: 'password',
  path: '/path',
  query: 'arg=value',
  fragment: 'anchor'
}

Comments

उस url ने मेरे लिए काम नहीं किया, लेकिन मैंने इसे यहाँ पर github.com/hirak/phpjs/blob/master/functions/url/parse_url.js

— Stan Quinn

@StanQuinn, ऐसा इसलिए है क्योंकि php.js ने इसका नाम बदलकर Locutus कर दिया है। मैंने नए लिंक के साथ अपना उत्तर अपडेट कर दिया है।

— एंड्रे रुडेंको

Answer 18

function parseUrl(url) {
    var m = url.match(/^(([^:\/?#]+:)?(?:\/\/((?:([^\/?#:]*):([^\/?#:]*)@)?([^\/?#:]*)(?::([^\/?#:]*))?)))?([^?#]*)(\?[^#]*)?(#.*)?$/),
        r = {
            hash: m[10] || "",                   // #asd
            host: m[3] || "",                    // localhost:257
            hostname: m[6] || "",                // localhost
            href: m[0] || "",                    // http://username:password@localhost:257/deploy/?asd=asd#asd
            origin: m[1] || "",                  // http://username:password@localhost:257
            pathname: m[8] || (m[1] ? "/" : ""), // /deploy/
            port: m[7] || "",                    // 257
            protocol: m[2] || "",                // http:
            search: m[9] || "",                  // ?asd=asd
            username: m[4] || "",                // username
            password: m[5] || ""                 // password
        };
    if (r.protocol.length == 2) {
        r.protocol = "file:///" + r.protocol.toUpperCase();
        r.origin = r.protocol + "//" + r.host;
    }
    r.href = r.origin + r.pathname + r.search + r.hash;
    return m && r;
};
parseUrl("http://username:password@localhost:257/deploy/?asd=asd#asd");

यह निरपेक्ष और सापेक्ष दोनों तरह के काम करता है

Comments

abc://username:[e-mail]:123/path/data?key=value&key2=value2#fragid1

— 山 和 葡萄

@ @ Updated 和 葡萄 山 मैंने ठीक से userinfo उपसमिति को संभालने के लिए कोड को अपडेट किया है। आपकी टिप्पणी के लिए धन्यवाद, मैंने उस समस्या को पहले नहीं देखा

— निकोले

इस रेगेक्स से प्यार करें

— कुणाल

Answer 19

पहिए को फिर से लगाना बंद करें। Https://github.com/medialize/URI.js/ का उपयोग करें

var uri = new URI("http://example.org:80/foo/hello.html");
// get host
uri.host(); // returns string "example.org:80"
// set host
uri.host("example.org:80");

Comments

क्योंकि हर बार जब आप एक समस्या को हल करना चाहते हैं ... एक पुस्तकालय का उपयोग करें? ठीक है ... (नहीं)

— jiminikiz

हमेशा नहीं (वास्तव में लगभग कभी नहीं) लेकिन URL पार्स करने के लिए बहुत मुश्किल हैं, RFC में कई विवरण हैं। एक पुस्तकालय का उपयोग करने के लिए बेहतर है जिसे हजारों द्वारा उपयोग और परीक्षण किया गया है।

— ह्यूगो सेकेरा

कैसे के बारे में बस का उपयोग करें जो किसी अन्य पुस्तकालय के साथ पहिया को सुदृढ़ करने के बजाय में बनाया गया है? देखें stackoverflow.com/a/24006120/747739

— फिल

अंतर्निहित फ़ंक्शन के लिए कोई IE11 समर्थन नहीं है, इसलिए यह लाइब्रेरी उत्कृष्ट है। लाइब्रेरी का उपयोग न करने के लिए कहना यह है कि हमें कभी jQuery का उपयोग नहीं करना चाहिए और केवल मूल कोड लिखना चाहिए, जो कि बिल्कुल हास्यास्पद है। हर डेवलपर के पास एक अलग उपयोग का मामला होता है, कोई 'सर्वश्रेष्ठ' तरीका नहीं होता है, कभी-कभी वेनिला / देशी सबसे अच्छा काम करता है, कभी-कभी ऐसा नहीं होता ... कुछ 92% डेवलपर्स को अभी भी सीखना है।

— tno2007

Answer 20

बस url.js लाइब्रेरी (वेब ​​और नोड.जेएस के लिए) का उपयोग करें।

https://github.com/websanova/js-url

url: http://example.com?param=test#param=again

url('?param'); // test
url('#param'); // again
url('protocol'); // http
url('port'); // 80
url('domain'); // example.com
url('tld'); // com

etc...

Answer 21

पहले जवाब के साथ एक साधारण हैक

var getLocation = function(href=window.location.href) {
    var l = document.createElement("a");
    l.href = href;
    return l;
};

इसका उपयोग बिना तर्क के भी किया जा सकता है ताकि मौजूदा hostname getLocation () का पता लगाया जा सके । hostname वर्तमान होस्टनाम देगा