জাভাস্ক্রিপ্টের কোনও স্ট্রিং থেকে বেস ইউআরএল কীভাবে বের করবেন?


168

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

উদাহরণস্বরূপ, কিছু দেওয়া হয়েছে:

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

আমি পেতে চাই:

http://www.sitename.com/

একটি নিয়মিত অভিব্যক্তি সেরা বাজি? যদি তা হয় তবে প্রদত্ত স্ট্রিং থেকে এক্সট্রাক্ট করা বেস ইউআরএলকে নতুন ভেরিয়েবলের জন্য আমি কী বিবৃতি ব্যবহার করতে পারি?

আমি এই কিছু অনুসন্ধানের কাজ করেছি, কিন্তু সবকিছু আমি জাভাস্ক্রিপ্ট বিশ্বের খুঁজে প্রকৃত দস্তাবেজের URL ব্যবহার থেকে এই তথ্য সংগ্রহ কাছাকাছি ঘুরা বলে মনে হয় location.host বা অনুরূপ।


এখনকার উত্তরগুলির উত্তরটি নীচে এটি
ডেভিডম্পাজ

উত্তর:


205

সম্পাদনা: কিছু লোক অভিযোগ করে যে এটি অ্যাকাউন্ট প্রোটোকল গ্রহণ করে না। তাই আমি কোডটি আপগ্রেড করার সিদ্ধান্ত নিয়েছি, কারণ এটি উত্তর হিসাবে চিহ্নিত হয়েছে। যারা এক-লাইন-কোড পছন্দ করেন তাদের জন্য ... খুব দুঃখিত এটি কেন আমরা কোড মিনিমাইজার ব্যবহার করি, কোডটি মানব পঠনযোগ্য হওয়া উচিত এবং এইভাবে আমার মতে ভাল better

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

বা নীচে থেকে ডেভিড সমাধান ব্যবহার করুন ।


6
উত্তরের জন্য ধন্যবাদ, তবে আবার, আমি আসল নথির URL না করে স্ট্রিং থেকে বেস ইউআরএলটি বের করার চেষ্টা করছি। আমি মনে করি না এটি আমাকে সাহায্য করবে - যদিও আমি ভুল হলে আমাকে সংশোধন করুন।
চরম বিশৃঙ্খল

2
pathArray = স্ট্রিং (" আপনারহস্ট.com / url / nic / or / not " ). split ('/'); হোস্ট = পথআরাই [2];

4
বুঝতে পেরেছি - ধন্যবাদ রাফাল এবং বাবা উডল্যান্ড! আমি ব্যবহার করে শেষ করেছি: url = ' sitename.com/article/2009/09/14/this-is-an-article '; pathArray = (url) .স্প্লিট ('/'); হোস্ট = 'http: //' + পথআর্রে [2]; আমি মনে করি যে রাফালের উদাহরণটি কেবলমাত্র "HTTP: //" বাদ দিয়েছে যা আমি প্রসেসিং করছি এমন সমস্ত স্ট্রিংয়ে উপস্থিত রয়েছে, সেই ক্ষেত্রে প্যাথআরাই [2] আপনার প্রয়োজন। "HTTP: //" উপসর্গ ব্যতীত, পথআর্রে [0] এক হবে would আবার ধন্যবাদ.
শে

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]; হোস্ট = পথআরাই [2]; url = প্রোটোকল + ': //' + হোস্ট; //now url === "http:://stackoverflow.com" চেকআউট::

154

ওয়েবকিট-ভিত্তিক ব্রাউজারগুলি, ফায়ারফক্স 21 সংস্করণ হিসাবে এবং ইন্টারনেট এক্সপ্লোরারের বর্তমান সংস্করণগুলি (IE 10 এবং 11) বাস্তবায়ন করে location.origin

location.originঅন্তর্ভুক্ত প্রোটোকল , ডোমেইন এবং ঐচ্ছিকরূপে পোর্ট URL এর।

উদাহরণস্বরূপ, location.originইউআরএল এর 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
আসলে, উইন্ডো.লোকেশন.হোস্টনামটি এখনও কার্যকর যদি আমার ক্ষেত্রে যেমন আপনার আলাদা পোর্ট নম্বর সরবরাহ করা প্রয়োজন।
ড্যারেল ব্রোগডন

44

JQuery ব্যবহার করার দরকার নেই, কেবল ব্যবহার করুন

location.hostname

5
ধন্যবাদ - আমি স্ট্রিং সহ এটি ব্যবহার করতে পারি না, যদিও আমি পারি? আমার বোধগম্যতা কেবলমাত্র ডকুমেন্ট ইউআরএল নিয়ে কাজ করবে।
চরম বিশৃঙ্খল

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 উপাদানটি যুক্ত করে এবং এটির পাঠককে সহজেই এটি করতে পারেন।


6
আপনি যখন কিছু বাইটে jQuery ছাড়াই এটি করবেন তা দেখিয়েছেন কেন jQuery এর 50K যুক্ত করবেন?
টিম ডাউন

13
কারণ পোস্টারটিতে বলা হয়েছে তারা jQuery ব্যবহার করছে।
এপাসকারেলো

1
আহ হ্যাঁ, যথেষ্ট ন্যায্য। যদিও এটি এর মতো সহজ যখনই আমি jQuery ব্যবহার করে অ্যাস্ট্রাকশনের অতিরিক্ত স্তর ব্যবহার করার কোনও মূল্য দেখি না।
টিম ডাউন

2
আমরা ধরে নিচ্ছি যে পুরো সাইটটি jqUERY এ চলেছে, kquery আসলে জিনিসগুলিকে সহজ করবে।
trusktr

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

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

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"

শান্ত!


12

আপনি যদি jQuery ব্যবহার করে থাকেন তবে এটি জাভাস্ক্রিপ্টে DOM এ যুক্ত না করে কৌশলগুলি হস্তক্ষেপ করার একটি দুর্দান্ত উপায় a

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

কোনও ইউআরএল এর স্ট্রিং প্রতিনিধিত্ব থেকে মৌলিক মান অর্জনের জন্য একটি হালকা পথ কিন্তু সম্পূর্ণ পদ্ধতির হ'ল ডগলাস ক্রকফোর্ডের রেজিপ এক্স নিয়ম:

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]+'/' ;

আপনি যদি আরও শক্তিশালী ইউআরএল ম্যানিপুলেশন সরঞ্জামদণ্ডের সন্ধান করছেন তবে ইউআরআই.জেস চেষ্টা করুন এটি , সেটার, ইউআরএল নরমালাইজেশন ইত্যাদিকে একটি দুর্দান্ত চেইনেবল এপিআই দিয়ে সহায়তা করে।

আপনি যদি কোনও jQuery প্লাগইন সন্ধান করেন তবে jquery.url.js আপনাকে সহায়তা করা উচিত

এটি করার একটি সহজ উপায় হ'ল অ্যাঙ্কর উপাদান ব্যবহার করে, যেমন @ পেসম্যাকেলো পরামর্শ দিয়েছেন। এটির একটি অসুবিধা রয়েছে যা আপনাকে একটি ডিওএম এলিমেন্ট তৈরি করতে হবে। তবে এটি বন্ধে ক্যাশে রাখা যায় এবং একাধিক ইউআরএলগুলির জন্য এটি পুনরায় ব্যবহার করা যেতে পারে:

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


8

আপনি যদি উইন্ডো.লোকেশন.ড্রাইফ (ঠিকানা দণ্ড) থেকে তথ্য আহরণ করছেন, তবে এই কোডটি ব্যবহার করতে ব্যবহার করুন http://www.sitename.com/:

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

আপনার যদি একটি স্ট্রিং থাকে, strএটি একটি স্বেচ্ছাসেবী ইউআরএল (উইন্ডো.লোকেশন.হিরফ নয়), তবে নিয়মিত এক্সপ্রেশন ব্যবহার করুন:

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

আমি, মহাবিশ্বের প্রত্যেকের মতো, নিয়মিত ভাব প্রকাশ করা ঘৃণা করি, তাই ইংরেজী ভাষায় আমি এটি ভেঙে দেব:

  • শূন্য বা আরও বেশি আলফা অক্ষর অনুসরণ করুন কোলন অনুসারে (প্রোটোকল, যা বাদ দেওয়া যেতে পারে)
  • // অনুসরণ করেছে (এছাড়াও বাদ দেওয়া যেতে পারে)
  • / (হোস্টনাম এবং পোর্ট) ব্যতীত অন্য কোনও অক্ষর অনুসরণ করেছে
  • অনুসরণ করেছে /
  • যা কিছু অনুসরণ করে (পথ, কম শুরু /)।

ডোম উপাদান তৈরি বা উন্মাদ কিছু করার দরকার নেই।


7

আমি একটি সাধারণ রেজেেক্স ব্যবহার করি যা হোস্টটি ইউআরএল তৈরি করে:

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/');
    });
});

6

বর্তমান ইউআরএলের বিভিন্ন পরামিতি পেতে আপনি নীচের কোডগুলি ব্যবহার করতে পারেন

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

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

এক্ষেত্রে প্যারাম কিউয়ের মান হবে।

var allParameters = url.getParameters();

সমস্ত প্যারামিটারগুলির মানটি কেবলমাত্র প্যারামিটারের নাম হবে।

["q","t"]

আইই, ক্রোম এবং ফায়ারফক্সে পরীক্ষিত।


1
আমার মনে হচ্ছে আমি কিছু মিস করছি ... টুআরএল কোথা থেকে আসছে?
থোমাসফ 1

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


1

আপনি একটি রেজেক্স ব্যবহার করে এটি করতে পারেন:

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

এটা কি সঠিক ?


1
হুঁ, আমার সীমিত রেগেক্স দক্ষতা থেকে দেখে মনে হচ্ছে এটি কমপক্ষে। আমি সেরা রেজেসকে সংকুচিত করতে সাহায্য করতে পারি কিনা তা দেখতে আমি আরও কিছু তথ্য যুক্ত করব।
চরম বিশৃঙ্খল

1
আমি স্ট্রিংয়ে .split ('/') ব্যবহার করে শেষ করেছি কারণ এটি আমার পক্ষে সহজ সমাধান। তারপরও আপনার সাহায্যের জন্য ধন্যবাদ!
চরম বিশৃঙ্খল

2
https ইউআরএল? হোস্টের নাম www দিয়ে শুরু হচ্ছে না? যেভাবেই হোক www ক্যাপচার করবেন?
টিম ডাউন

1
আমি জানি না, ওপি ইউআরএল কীভাবে ধরবে জিজ্ঞাসা করেছিল, এবং তার উদাহরণে http & www ছিল।
ক্লিমেন্ট হেরেম্যান

1

কোনও ওয়েবসাইটের ( /my/path) বা স্কিমহীন (রাস্তায় অন্তর্ভুক্ত) পাথ সহ যে কোনও url এর উত্স পেতে//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] + '/';
    }
  }
};


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

window.location.href ব্রাউজারের অ্যাড্রেস বার থেকে বর্তমান url ঠিকানা দেয়

এটি https://stackoverflow.com/abc/xyz বা https://www.google.com/search?q=abc yetlastbackslashregex.exec () চালানো রেইগেক্স এবং শেষ ব্যাকস্ল্যাশ অর্থাৎ https অবধি ম্যাচযুক্ত স্ট্রিং পুনরায় চালনার মতো যে কোনও জিনিস হতে পারে : যথাক্রমে //stackoverflow.com/abc/ বা https://www.google.com/


5
সংক্ষিপ্ত বিবরণ যোগ করুন।
প্রীত

6
পর্যালোচনা সারি থেকে : আমি আপনাকে অনুরোধ করতে দয়া করে আপনার উত্স-কোডের আশেপাশে কিছু প্রসঙ্গ যুক্ত করুন। কোড-কেবল উত্তরগুলি বোঝা মুশকিল। আপনি যদি আপনার পোস্টে আরও তথ্য যুক্ত করতে পারেন তবে এটি প্রশ্নকারী এবং ভবিষ্যতের পাঠকদের উভয়কেই সহায়তা করবে।
আরবিটি

0

জাভাস্ক্রিপ্ট নেটিভ এপিআই ব্যবহার করা ভাল উপায় URL অবজেক্ট । এটি অনেকগুলি ব্যবহারকারীর 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"

ইউআরএল জন্য ডক

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.