ฉันกำลังพยายามหาวิธีที่ง่ายและเชื่อถือได้ในการแยก URL พื้นฐานจากตัวแปรสตริงโดยใช้ JavaScript (หรือ jQuery)

ตัวอย่างเช่นให้บางสิ่งเช่น:

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

ฉันต้องการได้รับ:

http://www.sitename.com/

การแสดงออกปกติเป็นทางออกที่ดีที่สุดหรือไม่? ถ้าเป็นเช่นนั้นฉันสามารถใช้คำสั่งใดเพื่อกำหนด URL หลักที่แยกจากสตริงที่กำหนดให้กับตัวแปรใหม่

ฉันได้ทำการค้นหาบางอย่างแล้ว แต่ทุกสิ่งที่ฉันพบในโลก JavaScript ดูเหมือนว่าจะหมุนไปรอบ ๆ เพื่อรวบรวมข้อมูลนี้จาก URL เอกสารจริงโดยใช้location.hostหรือคล้ายกัน

แก้ไข: บางคนบ่นว่ามันไม่ได้คำนึงถึงโปรโตคอลบัญชี ดังนั้นฉันจึงตัดสินใจอัพเกรดรหัสเนื่องจากมันถูกทำเครื่องหมายเป็นคำตอบ สำหรับผู้ที่ชอบรหัสบรรทัดเดียว ... ขออภัยด้วยเหตุนี้เราจึงใช้รหัสตัวย่อขนาดเล็กรหัสควรเป็นแบบคนอ่านได้และวิธีนี้จะดีกว่า ... ในความคิดของฉัน

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

หรือใช้วิธีการแก้ปัญหา Davidsจากด้านล่าง

เบราว์เซอร์ WebKit-based, Firefox เป็นรุ่น 21 และรุ่นปัจจุบันของ Internet Explorer (IE 10 และ 11) location.originการดำเนินการ

location.originรวมถึงโปรโตคอลที่โดเมนและเลือกพอร์ตของ URL

ยกตัวอย่างเช่นlocation.originของ URL คือhttp://www.sitename.com/article/2009/09/14/this-is-an-article/http://www.sitename.com

ในการกำหนดเป้าหมายเบราว์เซอร์ที่ไม่รองรับการlocation.originใช้ polyfill ที่กระชับ

if (typeof location.origin === 'undefined')
    location.origin = location.protocol + '//' + location.host;

ไม่จำเป็นต้องใช้ jQuery เพียงใช้

location.hostname

ไม่มีเหตุผลที่จะทำการแยกเพื่อรับพา ธ ชื่อโฮสต์และอื่น ๆ จากสตริงที่เป็นลิงก์ คุณเพียงแค่ต้องใช้ลิงค์

//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 ต่อท้ายองค์ประกอบและอ่าน attr ของมัน

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

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"

เย็น!

หากคุณใช้ jQuery นี่เป็นวิธีที่ยอดเยี่ยมในการจัดการองค์ประกอบใน javascript โดยไม่ต้องเพิ่มลงใน DOM:

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

แนวทางแบบเบา ๆ แต่สมบูรณ์ในการรับค่าพื้นฐานจากการแสดงสตริงของ URL คือกฎ regexp ของ Douglas Crockford:

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

หากคุณกำลังมองหาชุดเครื่องมือการจัดการ URL ที่มีประสิทธิภาพยิ่งขึ้นลองใช้URI.jsซึ่งรองรับ getters, setter, url normalization และอื่น ๆ ทั้งหมดด้วย api chainable ที่ดี

หากคุณกำลังมองหาปลั๊กอิน jQuery jquery.url.js น่าจะช่วยคุณได้

วิธีที่ง่ายกว่าคือการใช้องค์ประกอบจุดยึดตามที่ @epascarello แนะนำ นี่เป็นข้อเสียที่คุณต้องสร้างองค์ประกอบ DOM อย่างไรก็ตามสิ่งนี้สามารถถูกแคชในการปิดและนำกลับมาใช้ใหม่สำหรับ URL หลายรายการ:

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

ดีวัตถุ URL APIหลีกเลี่ยงการแยกและการก่อสร้างที่ url ด้วยตนเอง

 let url = new URL('/programming/1420881');
 alert(url.origin);

หากคุณกำลังดึงข้อมูลจาก window.location.href (แถบที่อยู่) ให้ใช้รหัสนี้เพื่อรับhttp://www.sitename.com/:

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

หากคุณมีสตริงstrนั่นคือ URL ที่กำหนดเอง (ไม่ใช่ window.location.href) ดังนั้นให้ใช้นิพจน์ทั่วไป:

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

ฉันก็เหมือนกับทุกคนในจักรวาลที่เกลียดการอ่านการแสดงออกปกติดังนั้นฉันจะทำลายมันลงในภาษาอังกฤษ:

• ค้นหาศูนย์อักขระอัลฟาหรือมากกว่าตามด้วยเครื่องหมายโคลอน (โปรโตคอลซึ่งสามารถละเว้นได้)
• ตามด้วย // (สามารถละเว้นได้)
• ตามด้วยอักขระใด ๆ ยกเว้น / (ชื่อโฮสต์และพอร์ต)
• ติดตามโดย /
• ตามด้วยสิ่งใดก็ตาม (เส้นทางลดจุดเริ่มต้น /)

ไม่จำเป็นต้องสร้างองค์ประกอบ DOM หรือทำอะไรบ้าๆ

ฉันใช้ regex ง่าย ๆ ที่แยกโฮสต์ในรูปแบบ url:

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

คุณสามารถใช้รหัสด้านล่างเพื่อรับพารามิเตอร์ที่แตกต่างกันของ URL ปัจจุบัน

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

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

ในกรณีนี้ค่าของ paramQ จะเป็น 1

var allParameters = url.getParameters();

ค่าของ allParameters จะเป็นชื่อพารามิเตอร์เท่านั้น

["q","t"]

ทดสอบบน IE, chrome และ firefox

แทนที่จะต้องทำบัญชีกับ window.location.protocol และ window.location.origin และอาจหายไปจากหมายเลขพอร์ตที่ระบุและอื่น ๆ เพียงแค่คว้าทุกอย่างจนถึงอันดับ 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);
}

งานนี้:

location.href.split(location.pathname)[0];

คุณสามารถทำได้โดยใช้ regex:

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

พอดีไหม

ในการรับต้นกำเนิดของ URL ใด ๆ รวมถึงเส้นทางภายในเว็บไซต์ ( /my/path) หรือ schemaless ( //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'));

สิ่งนี้ใช้ได้กับฉัน:

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

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 tilllastbackslashregex.exec () เรียกใช้ regex และ retun สตริงที่ตรงกันจนถึง backslash ล่าสุดนั่นคือhttps : //stackoverflow.com/abc/หรือhttps://www.google.com/ตามลำดับ

วิธีที่ดีคือการใช้URLออบเจ็กต์api ดั้งเดิมของ JavaScript มีส่วน 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"

doc สำหรับURL