javascript আন্দালিব - জাভাস্ক্রিপ্টে হোস্টনাম এবং পাথের মধ্যে একটি URL কীভাবে পার্স করব?




রহমান পার্থ (17)

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

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

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

a.hostname == "example.com"

এবং

a.pathname == "/aa/bb"

Answers

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

বর্তমান ইউআরএল ফিরে।

আপনি যদি নিজের স্ট্রিংটি একটি ইউআরএল হিসাবে পাস করতে চান ( 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"

যারা 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 : '';
    }

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

আজ আমি এই সমস্যাটি পূরণ করি এবং আমি খুঁজে পেয়েছি: URL - MDN ওয়েব API গুলি

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: "" }

আমার প্রথম অবদান আশা করি আপনাকে সাহায্য করবে!


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

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/


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

আমি একটি JSFiddle বরাবর একটি Gist তৈরি 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"
}

কেন এটা ব্যবহার করবেন না?

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

আপনি Locutus প্রকল্প (পূর্ববর্তী php.js) থেকে parse_url() ফাংশন ব্যবহার করতে পারেন।

কোড:

parse_url('http://username:[email protected]/path?arg=value#anchor');

ফলাফল:

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

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

পেশাদাররা

  • প্রত্যাশিত আচরণ (কোন ক্রস ব্রাউজার সমস্যা)
  • DOM প্রয়োজন হয় না
  • এটা সত্যিই ছোট।

কনস

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

সহজ নিয়মিত অভিব্যক্তি সম্পর্কে কি?

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


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:[email protected]:257/deploy/?asd=asd#asd
            origin: m[1] || "",                  // http://username:[email protected]: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:[email protected]:257/deploy/?asd=asd#asd");

এটি পরম এবং আপেক্ষিক ইউআরএল উভয় সঙ্গে কাজ করে


js-uri (গুগল কোডে উপলব্ধ) একটি স্ট্রিং ইউআরএল নেয় এবং এটি থেকে একটি 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

চাকা reinventing বন্ধ করুন। 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");

এখানে পাওয়া যায়: 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"

শুধু url.js লাইব্রেরি ব্যবহার করুন (ওয়েব এবং node.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...

ঠিক আছে, 6 বছর বয়সী বন্ধন ফ্যান। আপনি বন্ধ করার সহজ উদাহরণ শুনতে চান?

চলুন পরবর্তী পরিস্থিতি কল্পনা করুন: একটি গাড়ি একটি গাড়িতে বসে আছে। যে গাড়ী একটি প্লেনে ভিতরে। প্লেন বিমানবন্দরে হয়। ড্রাইভারের গাড়িটি বাইরে গাড়ির জিনিসগুলি অ্যাক্সেস করার ক্ষমতা, কিন্তু সমতলের অভ্যন্তরে, বিমানটি যদি বিমানবন্দর ছেড়ে দেয় তবেও এটি বন্ধ হয়ে যায়। এটাই. যখন আপনি 27 ঘুরে যান, আরো বিস্তারিত ব্যাখ্যা বা নীচের উদাহরণে দেখুন।

এখানে আমি কিভাবে আমার সমতল গল্প কোড কোড রূপান্তর করতে পারেন।

var plane = function(defaultAirport) {

  var lastAirportLeft = defaultAirport;

  var car = {
    driver: {
      startAccessPlaneInfo: function() {
        setInterval(function() {
          console.log("Last airport was " + lastAirportLeft);
        }, 2000);
      }
    }
  };
  car.driver.startAccessPlaneInfo();

  return {
    leaveTheAirport: function(airPortName) {
      lastAirportLeft = airPortName;
    }
  }
}("Boryspil International Airport");

plane.leaveTheAirport("John F. Kennedy");





javascript url