আমি কীভাবে জাভাস্ক্রিপ্টে হোস্টনাম এবং পাথের URL টি পার্স করব?

Question

আমি একটি স্ট্রিং নিতে চাই

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

এবং এটি যেমন একটি বস্তুর মধ্যে এটি প্রক্রিয়া

a.hostname == "example.com"

এবং

a.pathname == "/aa/bb"

Comments

যদি আপনি বর্তমান URL এ কাজ করছি, আপনি অ্যাক্সেস করতে পারেন hostnameএবং pathnameথেকে সরাসরি locationবস্তু।

— rvighne

"সর্বশেষপথ পার্ট" সম্পর্কে কী?

— ভিক্টর

রিজেক্স নয়, পাইথন মডিউলটি টেলডেক্সট্রাক্টটি হুবহু এটি করে: github.com/john-kurkowski/tldextract

— অলিভার অলিভার

Answer 1

আধুনিক উপায়:

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

বৈশিষ্ট্য সহ hostnameএবং অন্য কয়েকজনকেpathname সাথে নিয়ে একটি বস্তু ফেরত দেয় ।

প্রথম যুক্তিটি একটি আপেক্ষিক বা পরম URL; যদি এটি আপেক্ষিক হয় তবে আপনাকে দ্বিতীয় যুক্তি (বেস ইউআরএল) নির্দিষ্ট করতে হবে। উদাহরণস্বরূপ, বর্তমান পৃষ্ঠার তুলনায় একটি URL- এর জন্য:

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

ব্রাউজারগুলি ছাড়াও, এই এপিআইটি v7 থেকে নোড.জেএস-এও উপলব্ধrequire('url').URL ।

Comments

নিস! আপেক্ষিক URL গুলি ভঙ্গ যদিও ... :( new URL('/stuff?foo=bar#baz')->SyntaxError: Failed to construct 'URL': Invalid URL

— lakenen

পরীক্ষামূলক প্রযুক্তি: আইই এটি সমর্থন করে না! বিকাশকারী.মোজিলা.আর.ইন-

— ইউএস

@ ক্যুউটার: এটি এজে কাজ করে, যা আইই

— রভিঘনে

এটি করার উপায় এটি, প্রান্তটি ইতিমধ্যে 3 টি সংস্করণে শীর্ষে রয়েছে অর্থাত্ এটি কোনও ব্যাপার নয়

— ক্লাউডিউ ক্রিঙ্গা

জাভাস্ক্রিপ্টটিতে ব্রাউজার বা সার্ভারগুলিতে কাজ করা ইউআরএলগুলি পার্স করার অন্তর্নির্মিত উপায় নেই তা

— সত্যই

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

এটি লক্ষ করা উচিত যে এটির সাহায্যে / মূল পোস্টারটির উত্তর দিতে পারে, তবে এই উত্তরটি কেবলমাত্র ব্রাউজারে জেএস কাজ করা লোকদের পক্ষে কাজ করবে, কারণ এটি ডিওএম এর কাজটি করতে নির্ভর করে।

— অ্যাডাম বাটকিন

সাবলীলতার পাশাপাশি সরলতার আরও একটি উদাহরণ।

— সাইদ নেমতি

Href আপেক্ষিক হলে IE এ কাজ করে না। l.hostname খালি থাকবে। আপনি যদি কেবলমাত্র সম্পূর্ণ URL সরবরাহ করেন তবে এটি কার্যকর হবে।

— ডেরেক আগে

এমনকি পরম ইউআরএল সহ, আইই (আইই ১১ এ পরীক্ষিত) ক্রোম এবং ফায়ারফক্স থেকে আলাদা আচরণ করে। আইইগুলি 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

মনে রাখবেন যে আপনি যদি বর্তমান ব্রাউজারের অবস্থানের পার্সড অংশগুলি পেতে চান তবে 1 ম দুটি লাইন হয়ে যায় parser = location;এবং নীচের সমস্ত লাইন কাজ করে। এটি এখনই Chrome এবং IE9 এ চেষ্টা করেছেন।

— লি মায়াদোর

এছাড়াও নোট করুন যে pathnameIE এর মধ্যে শীর্ষস্থানীয় স্ল্যাশ অন্তর্ভুক্ত নয়। চিত্রে যান. : ডি

— নেভেলিস

আই-এর জন্য, "/" + পার্সার.পথনাম

— স্বেস ব্যবহার করুন

সতর্কতা: আপনি href (কোনও প্রোটোকল ছাড়াই) http:পাস করলেও এটি ফিরে আসবে domain.com। প্রোটোকলটি অনুপস্থিত ছিল কিনা তা যাচাই করার জন্য আমি এটি ব্যবহার করতে চেয়েছিলাম, এবং তাই হলে আমি এটি যুক্ত করতে পারি, তবে এটি HTTP ধরে নিয়েছে: সুতরাং এই উদ্দেশ্যে এটি ব্যবহার করতে অক্ষম ছিল।

— ম্যাক্স

হোস্টনামটি আসলে প্রোটোকল অন্তর্ভুক্ত করে। Chrome এর সর্বশেষতম সংস্করণে পরীক্ষা করুন।

— অ্যান্ড্রয়েড ডেভ

Answer 4

এখানে একটি regexp ব্যবহার করে একটি সাধারণ ফাংশন যা এর অনুকরণ করে aট্যাগ আচরণটি ।

পেশাদাররা

• অনুমানযোগ্য আচরণ (কোনও ক্রস ব্রাউজার সমস্যা নেই)
• ডোমের দরকার নেই
• এটা সত্যিই সংক্ষিপ্ত।

কনস

• রিজেক্সপ পড়া কিছুটা কঠিন

-

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

কোনও আপেক্ষিক ইউআরএল নিয়ে কাজ করে না। আপনি যখন রেজিএক্সপ্যাক তৈরি করার সময় আরএফসি -3986 অনুসরণ করেছিলেন? > getLocation ("// উদাহরণ.com/"); নাল> getLocation ("/ পথের নাম /? অনুসন্ধান"); নাল> getLocation ("/ পথের নাম /"); নাল> getLocation ("আপেক্ষিক"); নাল

— গ্রেগাররা

আমি পছন্দ করি এটি কীভাবে ডিওএমটি ব্যবহার করে না, তবে গ্রেগারদের একটি ভাল পয়েন্ট রয়েছে। এটি যদি আপেক্ষিক পাথ পরিচালনা করতে পারে তবে দুর্দান্ত হবে। শূন্যস্থান পূরণ এবং কোড যুক্ত করার জন্য এটি উইন্ডো.লোকেশন (একটি উপাদান) ব্যবহার করতে হবে। সেক্ষেত্রে পদ্ধতিটি ভন্ডামী হয়ে উঠত। বিকল্প না থাকলে এটিকে কীভাবে পুরোপুরি সমাধান করা যায় তা নিশ্চিত নন।

— টার্বো

আসল url সহ href কী যুক্ত করা হয়েছে, এটি ডোম বাস্তবায়নের সাথে সেই রিটার্ন অবজেক্টে ধারাবাহিকতা সরবরাহ করে।

— mattdlockyer

কারও যদি আপেক্ষিক ইউআরএলগুলি এখানে বিশ্লেষণ করতে হয় তবে তা আপডেট হওয়া রেজিএক্সপ্স: / ^ (? :( https? \:) \ / \ /)? (([^: \ /? #] *) (?: \: ([0 -9] +))?) ([\ /] {0,1} [^? #] *) (\? [^ #] * |) (#। * |) $ /

— শ্লেনস্কি

Answer 5

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

বর্তমান ইউআরএল প্রদান করে।

আপনি যদি url হিসাবে নিজের স্ট্রিংটি পাস করতে চান ( আই 11 এ কাজ করে না ):

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

ফ্রেডিফিজিওওয়ারার উত্তরটি বেশ ভাল তবে ইন্টারনেট এক্সপ্লোরার এর মধ্যে আমারও আপেক্ষিক ইউআরএল সমর্থন করা দরকার। আমি নিম্নলিখিত সমাধান নিয়ে এসেছি:

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

জেএসফিডাল উদাহরণ: http://jsfiddle.net/6AEAB/

Comments

এটি গ্রহণযোগ্য উত্তর হওয়া উচিত। আপেক্ষিক-থেকে-পরম ইউআরএল হ্যান্ডলিংয়ের খুব চালাক ব্যবহার। +1

— L0j1k

দৃশ্যত প্রথমবার নয় JSFiddle লিংক মারা যান; stackoverflow.com/questions/25179964/...

— ক্লজ

এটি দুর্দান্ত কাজ করেছে, তবে আমার কাছে একটি আপডেট ছিল যা আমি আশা করি অন্যকে সাহায্য করবে। আমি পোস্টমেসেজ অনুরোধে উত্স যাচাই করতে এটি ব্যবহার করছি এবং যখন পোর্টটি একটি ডিফল্ট বন্দর হয় (80 বা 443), তখন এটি পাথে সংযুক্ত হয় না। আমার ইউআরএল তৈরি করার সময় আমি শর্তসাপেক্ষে এটি পরীক্ষা করেছিলাম: var locationHost = (location.port !== '80' && location.port !== '443') ? location.host : location.hostname; var locationOrigin = location.protocol + '//' + locationHost;

— রোস্টার

আমি এই সমাধানটির আরও জনপ্রিয় রূপটিতে এই মন্তব্যটি অন্য কোথাও করেছি, তবে এটি আমার প্রিয় সমাধান হিসাবে, আমি এখানে এটি পুনরাবৃত্তি করতে চেয়েছিলাম। আইই 11 এ, href- তে একটি ব্যবহারকারীর নাম থাকার ফলে এই সমস্ত সম্পত্তি পড়ার কারণে সুরক্ষা ত্রুটি ঘটবে। উদাহরণ: " example.com " ঠিকঠাক কাজ করবে। তবে " ব্যবহারকারীর নাম www.www.example.com " বা " ব্যবহারকারীর নাম: পাসওয়ার্ড@www.example.com " অ্যাঙ্কর এলিমেন্টের অন্যান্য বৈশিষ্ট্যগুলির মধ্যে একটির (যেমন: হ্যাশ) ব্যর্থ হওয়ার জন্য এবং কোনও অযৌক্তিক ত্রুটি নিক্ষেপ করার জন্য কোনও প্রচেষ্টা করবে।

— ক্লিপি

Answer 7

js-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 = নতুন অবস্থান (" উদাহরণ. com/aa/bb " ) টাইপফ (উইন্ডো.লোকেশন) == টাইপফ (ইউরি)

— ফ্রেডডিফিজিওওয়ারা

উইন্ডো.লোকশন যেহেতু একটি স্ট্রিং, তাই কীভাবে সম্ভব বা সহায়ক হতে পারে তা আমি সত্যিই দেখছি না। যখন আপনি সহজেই এক থেকে অন্যটিতে রূপান্তর করতে পারেন তখন প্রকারগুলি কেন মেলানো দরকার?

— রেক্স এম

ডেভেলপার.মোজিলা.আর.ইন / ডম / উইন্ডো.লোকেশন খুব সুন্দর এপিআই !! সুতরাং আমি আশা করি স্ট্রিংটিকে উইন্ডোতে স্থানান্তর করুন oc লোকেশন অবজেক্টে

— ফ্রেডডিফিজিওওয়ারা

উইন্ডো.লোকশন সেট করা ব্রাউজারটিকে পরিবর্তন করে যাতে এটি ঘটে না।

— এপাসকারেলো

হুম ঠিক আছে। উইন্ডো.লোকশন কোনও স্ট্রিং নয়, তবে স্ট্রিং থেকে বরাদ্দ করা যেতে পারে। আমি নিশ্চিত নই যে এটির নকল করা যায় কিনা, আমি কোনও নতুন ইউরি অবজেক্টকে অবস্থানের প্রোটোটাইপ দেওয়ার চেষ্টা করেছি তবে এটি কার্যকর হয়নি।

— রেক্স এম

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

— মিক্কো রেন্টালাইনেন

সরল রেজেক্স সহজ সমস্যাগুলির জন্য :) তবে এটি আমার কাছে শোনাচ্ছে না যে রিগেক্সের দ্বারা এই জাতীয় ইউআরএল অপসারণযোগ্য, এটির জন্য আরও কয়েকটি টুইটের প্রয়োজন হবে। তবে আমার যদি আরও জটিল এবং বুলেটরুফের দরকার হয় তবে আমি সম্ভবত কিছু লাইব্রেরিতে যাব।

— soveka

Answer 9

আজ আমি এই সমস্যার মুখোমুখি হয়েছি এবং আমি পেয়েছি: URL - MDN ওয়েব APIs s

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

সদৃশ উত্তর

— মার্টিন ভ্যান ড্রিল

হ্যাঁ, তবে শীর্ষে থাকা লোকটি কেবল 2017 সালে তার অ্যাজার আপডেট করে, আমি এটি 2016 সালে পোস্ট করি

— এ। ময়েনেট

আহ আমার খারাপ, দুঃখিত

— মার্টিন ভ্যান ড্রিল

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

ক্রস ব্রাউজার ইউআরএল পার্সিং , 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;
}

ব্যবহার ( এখানে ডেমো জেএসফিডাল ):

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 পাস করেন তবে এটি সর্বদা হোস্টটিকে ফিরিয়ে আনবে যেখানে স্ক্রিপ্টটি ডাকা হয়েছিল return আইইতে আপনি খালি পাবেন, অন্যদিকে ক্রোমে আপনি লোকালহোস্ট পাবেন (বা যাই হোক না কেন)।

আপনি যদি রেফারটিকে দেখার চেষ্টা করছেন তবে এটি প্রতারণামূলক। আপনি এটি নিশ্চিত করতে চাইবেন যে আপনি যে হোস্টটি ফিরে পেয়েছেন তা সামাল দেওয়ার জন্য মূল ইউআরএল ছিল:

    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

এটি সম্পূর্ণ আপেক্ষিক ইউআরএলগুলি ভেঙে দেয়, যদিও!

— লাকেনেন

Answer 13

কৌণিক জেএস উপায় - এখানে ঝাঁকুনি: 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

মডিউল প্যাটার্নটি ব্যবহার করে সহজ এবং দৃust় সমাধান। এটিতে IE এর জন্য একটি স্থিরতা অন্তর্ভুক্ত যেখানে pathnameসর্বদা একটি অগ্রণী ফরোয়ার্ড-স্ল্যাশ থাকে না ( /)।

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

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

আপনি লোকুটাস প্রকল্প (প্রাক্তন php.js) parse_url()থেকেও ফাংশন ব্যবহার করতে পারেন ।

কোড:

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/function/url/parse_url.js

— Stan Quinn

@ স্ট্যানকুইন, কারণ পিএইচপি.জেএস এর নামটি লোকুটাসে পরিবর্তন করেছে। আমি আমার উত্তরটি নতুন লিঙ্কের সাথে আপডেট করেছি।

— আন্দ্রে রুডেনকো

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

এটি পরম এবং আপেক্ষিক উভয় url- এর সাথে কাজ করে

Comments

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

— 茶树 和 葡萄 树

@ 山 茶树 和 葡萄 user আমি ইউজারিনফো সাব-কম্পোনেন্টটি সঠিকভাবে পরিচালনা করার জন্য কোডটি আপডেট করেছি। আপনার মন্তব্যের জন্য ধন্যবাদ, আমি আগে এই সমস্যাটি লক্ষ্য করিনি

— নিকোলে

এই রেজেক্সকে ভালবাসুন

— কুণাল

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

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

— হুগো সিকুইরা

অন্য কোনও লাইব্রেরি দিয়ে চাকাটি পুনরায় সঞ্চার করার পরিবর্তে যা অন্তর্নির্মিত রয়েছে তা কীভাবে ব্যবহার করবেন? দেখুন stackoverflow.com/a/24006120/747739

— ফিল

অন্তর্নির্মিত ফাংশনটির জন্য কোনও আইই 11 সমর্থন নেই, সুতরাং এই গ্রন্থাগারটি দুর্দান্ত। কখনও লাইব্রেরি ব্যবহার না করা বলার মতো, আমাদের কখনই 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;
};

এটি বর্তমান হোস্টনামটি বের করার জন্য যুক্তি ছাড়াই ব্যবহার করতে পারে getLocation () host হোস্টনেম বর্তমান হোস্টনেম দেবে