Dapatkan protokol, domain, dan port dari URL

301

Saya perlu mengekstrak protokol, domain, dan port lengkap dari URL yang diberikan. Sebagai contoh:

https://localhost:8181/ContactUs-1.0/contact?lang=it&report_type=consumer
>>>
https://localhost:8181
yelo3
sumber
9
Bagi para pembaca yang mencari jawaban di mana URL bukan lokasi saat ini, lihat di bawah jawaban yang diterima
Guy Schalnat

Jawaban:

150

pertama-tama dapatkan alamat saat ini

var url = window.location.href

Kemudian parsing string itu

var arr = url.split("/");

url Anda adalah:

var result = arr[0] + "//" + arr[2]

Semoga ini membantu

Wezzy
sumber
8
Ini berfungsi dengan URL string di mana locationobjek tidak tersedia (js di luar browser!)
Thamme Gowda
Jawaban David Calhoun menggunakan parser built-in (seperti location) tetapi dapat digunakan untuk url apa pun . Lihat itu rapi.
Stijn de Witt
6
Atau hanya mengubahnya menjadi satu window.location.href.split('/').slice(0, 3).join('/')
kalimat
dan bagaimana Anda akan melakukan ini pada node?
DDD
5
window.location.origin
intumen
576
var full = location.protocol+'//'+location.hostname+(location.port ? ':'+location.port: '');
Shef
sumber
3
@Rombomblue Bagaimana? Anda akan mendapatkannya about://. Namun, saya ingin tahu, untuk apa gunanya about:blank? Saya tidak yakin apakah ada browser yang menyuntikkan sumber daya plugin about:blank, tetapi sepertinya itu bisa menjadi satu-satunya kasus penggunaan.
Shef
3
Ini tidak berfungsi sama sekali jika Anda memiliki string URL, bukan? (yaitu Anda harus di location untuk ini bekerja)
Nick T
1
Maaf atas jawaban yang terlambat, @NickT. Ya, itu tidak melakukan itu. Tolong, gunakan solusi bagus yang disediakan oleh David untuk itu.
Shef
1
Jawaban ini harus dipilih sebagai jawaban yang benar. Ini bersih dan menggunakan objek lokasi standar.
Mohit Gangrade
14
Tidak bisakah Anda menggunakan location.hostbukan location.hostname+ location.port?
c24w
180

Tidak satu pun dari jawaban ini yang tampaknya menjawab pertanyaan sepenuhnya, yang meminta url sewenang-wenang, tidak secara khusus url halaman saat ini.

Metode 1: Gunakan API URL (peringatan: tidak ada dukungan IE11)

Anda dapat menggunakan API URL (tidak didukung oleh IE11, tetapi tersedia di tempat lain ).

Ini juga memudahkan untuk mengakses params pencarian . Bonus lain: itu dapat digunakan dalam Pekerja Web karena tidak tergantung pada DOM.

const url = new URL('http://example.com:12345/blog/foo/bar?startIndex=1&pageSize=10');

Metode 2 (cara lama): Gunakan parser bawaan browser di DOM

Gunakan ini jika Anda memerlukan ini untuk bekerja di browser lama juga.

//  Create an anchor element (note: no need to append this element to the document)
const url = document.createElement('a');
//  Set href to any path
url.setAttribute('href', 'http://example.com:12345/blog/foo/bar?startIndex=1&pageSize=10');

Itu dia!

Parser bawaan browser sudah melakukan tugasnya. Sekarang Anda bisa mengambil bagian yang Anda butuhkan (perhatikan bahwa ini berfungsi untuk kedua metode di atas):

//  Get any piece of the url you're interested in
url.hostname;  //  'example.com'
url.port;      //  12345
url.search;    //  '?startIndex=1&pageSize=10'
url.pathname;  //  '/blog/foo/bar'
url.protocol;  //  'http:'

Bonus: Cari params

Kemungkinannya Anda mungkin ingin memecah params url pencarian juga, karena '? StartIndex = 1 & pageSize = 10' tidak terlalu bisa digunakan sendiri.

Jika Anda menggunakan Metode 1 (API URL) di atas, Anda cukup menggunakan getter searchParams:

url.searchParams.get('startIndex');  // '1'

Atau untuk mendapatkan semua parameter:

function searchParamsToObj(searchParams) {
  const paramsMap = Array
    .from(url.searchParams)
    .reduce((params, [key, val]) => params.set(key, val), new Map());
  return Object.fromEntries(paramsMap);
}
searchParamsToObj(url.searchParams);
// -> { startIndex: '1', pageSize: '10' }

Jika Anda menggunakan Metode 2 (cara lama), Anda dapat menggunakan sesuatu seperti ini:

// Simple object output (note: does NOT preserve duplicate keys).
var params = url.search.substr(1); // remove '?' prefix
params
    .split('&')
    .reduce((accum, keyval) => {
        const [key, val] = keyval.split('=');
        accum[key] = val;
        return accum;
    }, {});
// -> { startIndex: '1', pageSize: '10' }
David Calhoun
sumber
link.protocol memberi saya "http:" jika saya memeriksa anker dengan "google.com" :-(var link = document.createElement('a'); link.setAttribute('href', 'google.com'); console.log(link.protocol)
eXe
Apakah Anda melakukan itu pada httphalaman mungkin? Jika tidak ditentukan itu akan 'mewarisi' dari lokasi saat ini
Stijn de Witt
4
Ini adalah jawaban yang fantastis dan harus mendapatkan lebih banyak suara, karena jawaban ini tidak terbatas hanya pada lokasi saat ini tetapi berfungsi untuk url apa pun , dan karena jawaban ini menggunakan parser bawaan peramban alih-alih membangun sendiri (yang kami tidak bisa berharap untuk melakukannya juga atau secepatnya!).
Stijn de Witt
Terima kasih atas trik pintar ini! Saya ingin menambahkan satu hal: Ada keduanya hostdan hostname. Yang pertama termasuk port (misalnya localhost:3000), sedangkan yang terakhir hanya nama host (misalnya localhost).
codener
Ini berfungsi baik jika URL absolut. Gagal dalam hal Relative URL dan cross-browser. Ada saran?
Gururaj
133

Untuk beberapa alasan semua jawabannya adalah semua berlebihan. Ini yang dibutuhkan:

window.location.origin

Rincian lebih lanjut dapat ditemukan di sini: https://developer.mozilla.org/en-US/docs/Web/API/window.location#Properties

Pijusn
sumber
19
FYI, saya yakin ini akan menjadi hebat di masa depan ketika semua browser populer telah menerapkannya, namun , ini tidak terjadi pada saat ini: developer.mozilla.org/en-US/docs/Web/API/… Di saat menulis hanya versi terbaru dari Firefox dan browser WebKit mendukung properti asal menurut penelitian saya.
Zac Seth
2
Hanya untuk menyelesaikan: lokasi didefinisikan pada HTML5 dan mengimplementasikan URLUtilsantarmuka yang didefinisikan pada WHATWG dan termasuk originatribut.
Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功
5
Halo dari 2015 .. sayangnya URLUtils masih belum diterapkan dengan benar di semua browser, menurut tabel kompatibilitas ini di MDN. Namun sepertinya properti asal sedikit lebih baik didukung daripada pada tahun 2013, itu masih tidak cocok untuk produksi karena tidak diterapkan dengan benar di Safari. Maaf guys :(
totallyNotLizards
Pembaruan: Masih tidak didukung untuk banyak peramban (safari juga) :( :(
Ahmad hamza
Itu tidak bekerja di IE juga, ia mengembalikan "tidak terdefinisi".
Siddhartha Chowdhury
53

Seperti yang telah disebutkan ada yang belum sepenuhnya didukung window.location.origintetapi alih-alih menggunakannya atau membuat variabel baru untuk digunakan, saya lebih memilih untuk memeriksanya dan jika tidak diatur untuk mengaturnya.

Sebagai contoh;

if (!window.location.origin) {
  window.location.origin = window.location.protocol + "//" + window.location.hostname + (window.location.port ? ':' + window.location.port: '');
}

Saya benar-benar menulis tentang ini beberapa bulan yang lalu Perbaikan untuk window.location.origin

Toby
sumber
1
Ini pertama kalinya saya tahu window.location.originada. Terima kasih. ^^
EThaizone Jo
33

tuan rumah

var url = window.location.host;

kembali localhost:2679

nama host

var url = window.location.hostname;

kembali localhost

Miroslav Holec
sumber
Terima kasih!!! Saya tidak tahu mengapa localhost ditampilkan sebagai localhost/ganti localhost:3000.
Tyler Youngblood
23

window.location.origin akan cukup untuk mendapatkan yang sama.

soumen
sumber
1
Itu memecahkan masalah saya dengan mudah. Terima kasih @intsoumen
Turker Tunali
14

Properti protokol menetapkan atau mengembalikan protokol URL saat ini, termasuk titik dua (:).

Ini berarti bahwa jika Anda ingin mendapatkan hanya bagian HTTP / HTTPS Anda dapat melakukan sesuatu seperti ini:

var protocol = window.location.protocol.replace(/:/g,'')

Untuk domain Anda dapat menggunakan:

var domain = window.location.hostname;

Untuk port Anda dapat menggunakan:

var port = window.location.port;

Ingatlah bahwa port akan berupa string kosong jika tidak terlihat di URL. Sebagai contoh:

Jika Anda perlu menampilkan 80/443 saat Anda tidak menggunakan port

var port = window.location.port || (protocol === 'https' ? '443' : '80');
Дамян Станчев
sumber
9

Mengapa tidak menggunakan:

let full = window.location.origin
Maik de Kruif
sumber
3
Ketika menambahkan jawaban ke pertanyaan yang lebih lama dengan jawaban yang ada, akan berguna untuk menjelaskan informasi baru apa yang dibawakan oleh jawaban Anda, dan untuk mengakui jika berlalunya waktu mempengaruhi jawaban.
Jason Aller
8

Memang, window.location.origin berfungsi dengan baik di browser mengikuti standar, tapi coba tebak. IE tidak mengikuti standar.

Jadi karena itu, inilah yang bekerja untuk saya di IE, FireFox dan Chrome:

var full = location.protocol+'//'+location.hostname+(location.port ? ':'+location.port: '');

tetapi untuk kemungkinan peningkatan di masa depan yang dapat menyebabkan konflik, saya menentukan referensi "jendela" sebelum objek "lokasi".

var full = window.location.protocol+'//'+window.location.hostname+(window.location.port ? ':'+window.location.port: '');
cpu
sumber
6

Inilah solusi yang saya gunakan:

const result = `${ window.location.protocol }//${ window.location.host }`;

EDIT:

Untuk menambahkan kompatibilitas lintas-browser, gunakan yang berikut ini:

const result = `${ window.location.protocol }//${ window.location.hostname + (window.location.port ? ':' + window.location.port: '') }`;
JulienRioux
sumber
1
Terpilih, tetapi window.location.hostmungkin bukan peramban silang terbaik
nathanfranke
1
Terima kasih, saya telah menambahkan kompatibilitas lintas-browser ke jawaban asli saya.
JulienRioux
3
var http = location.protocol;
var slashes = http.concat("//");
var host = slashes.concat(window.location.hostname);
Elankeeran
sumber
3
var getBasePath = function(url) {
    var r = ('' + url).match(/^(https?:)?\/\/[^/]+/i);
    return r ? r[0] : '';
};
haipeng
sumber
2
pertimbangkan untuk menjelaskan jawaban Anda. Jangan menganggap OP dapat memahami arti penting dari berbagai bagian kode Anda.
ADyson
3

Coba gunakan ekspresi reguler (Regex), yang akan sangat berguna ketika Anda ingin memvalidasi / mengekstrak hal-hal atau bahkan melakukan parsing sederhana dalam javascript.

Regex adalah:

/([a-zA-Z]+):\/\/([\-\w\.]+)(?:\:(\d{0,5}))?/

Demonstrasi:

function breakURL(url){

     matches = /([a-zA-Z]+):\/\/([\-\w\.]+)(?:\:(\d{0,5}))?/.exec(url);

     foo = new Array();

     if(matches){
          for( i = 1; i < matches.length ; i++){ foo.push(matches[i]); }
     }

     return foo
}

url = "https://www.google.co.uk:55699/search?q=http%3A%2F%2F&oq=http%3A%2F%2F&aqs=chrome..69i57j69i60l3j69i65l2.2342j0j4&sourceid=chrome&ie=UTF-8"


breakURL(url);       // [https, www.google.co.uk, 55699] 
breakURL();          // []
breakURL("asf");     // []
breakURL("asd://");  // []
breakURL("asd://a"); // [asd, a, undefined]

Sekarang Anda dapat melakukan validasi juga.

ed9w2in6
sumber
"Skema URL RFC 3986 yang valid harus terdiri dari" huruf dan diikuti oleh kombinasi huruf, digit, plus ("+"), titik ("."), Atau tanda hubung ("-"). "- stackoverflow. com / a / 9142331/188833 (Berikut sebuah guci: ietf: rfc: 3897 (URI) / urn: ietf: rfc: 3897 (IRI) regex untuk skema: bagian dari URI / IRI dengan Python: github.com/dgerber /rfc3987/blob/master/rfc3987.py#L147 )
Wes Turner
2

Jawaban sederhana yang berfungsi untuk semua browser:

let origin;

if (!window.location.origin) {
  origin = window.location.protocol + "//" + window.location.hostname + 
     (window.location.port ? ':' + window.location.port: '');
}

origin = window.location.origin;
Mike Hawes
sumber
1

Gaya ES6 dengan parameter yang dapat dikonfigurasi.

/**
 * Get the current URL from `window` context object.
 * Will return the fully qualified URL if neccessary:
 *   getCurrentBaseURL(true, false) // `http://localhost/` - `https://localhost:3000/`
 *   getCurrentBaseURL(true, true) // `http://www.example.com` - `https://www.example.com:8080`
 *   getCurrentBaseURL(false, true) // `www.example.com` - `localhost:3000`
 *
 * @param {boolean} [includeProtocol=true]
 * @param {boolean} [removeTrailingSlash=false]
 * @returns {string} The current base URL.
 */
export const getCurrentBaseURL = (includeProtocol = true, removeTrailingSlash = false) => {
  if (!window || !window.location || !window.location.hostname || !window.location.protocol) {
    console.error(
      `The getCurrentBaseURL function must be called from a context in which window object exists. Yet, window is ${window}`,
      [window, window.location, window.location.hostname, window.location.protocol],
    )
    throw new TypeError('Whole or part of window is not defined.')
  }

  const URL = `${includeProtocol ? `${window.location.protocol}//` : ''}${window.location.hostname}${
    window.location.port ? `:${window.location.port}` : ''
  }${removeTrailingSlash ? '' : '/'}`

  // console.log(`The URL is ${URL}`)

  return URL
}
Sébastien
sumber
0

window.location.protocol + '//' + window.location.host

Code_Worm
sumber