a

Câu hỏi Nhận giao thức, tên miền và cổng từ URL


Tôi cần trích xuất toàn bộ giao thức, miền và cổng từ một URL đã cho. Ví dụ:

https://localhost:8181/ContactUs-1.0/contact?lang=it&report_type=consumer
>>>
https://localhost:8181

223
2017-08-04 12:38


gốc


Đối với những người đọc đang tìm kiếm câu trả lời trong đó URL không phải là vị trí hiện tại, hãy xem bên dưới câu trả lời được chấp nhận - Guy Schalnat


Các câu trả lời:


đầu tiên lấy địa chỉ hiện tại

var url = window.location.href

Sau đó, chỉ phân tích chuỗi đó

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

url của bạn là:

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

Hi vọng điêu nay co ich


110
2017-08-04 12:43



-1, location.protocol ít hacky - naugtur
Điều này làm việc với chuỗi URL location đối tượng không có sẵn (js bên ngoài trình duyệt!) - Thamme Gowda
David Calhoun's câu trả lời sử dụng trình phân tích cú pháp được tích hợp sẵn (như location) nhưng có thể được sử dụng cho bất kì url. Kiểm tra nó ra nó gọn gàng. - Stijn de Witt
Hoặc chỉ cần biến nó thành một lớp lót: window.location.href.split('/').slice(0, 3).join('/') - Ryan McGeary
và cách bạn thực hiện điều này trên nút? - Azarus


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

456
2017-08-04 12:45



@ Randomblue Điều gì về nó? Bạn sẽ nhận được about://. Tuy nhiên, tôi tò mò muốn biết, điều gì sẽ là trường hợp sử dụng cho about:blank? Tôi không chắc liệu trình duyệt nào có chèn tài nguyên plugin vào about:blank, nhưng có vẻ như đó có thể là trường hợp sử dụng duy nhất. - Shef
Tôi tìm thấy javascript của tôi không bao giờ tải khi tôi truy cập về: trống ... - toxaq
Điều này không hoạt động chút nào nếu bạn có chuỗi URL, đúng không? (nghĩa là bạn cần phải tại  location để làm việc này) - Nick T
Xin lỗi vì trả lời muộn, @NickT. Vâng, nó không làm điều đó. Vui lòng sử dụng giải pháp tốt đẹp được cung cấp bởi David cho điều đó. - Shef
Bạn không thể dùng location.host thay vì location.hostname + location.port? - c24w


Không có câu trả lời nào trong số này có vẻ như hoàn toàn giải quyết câu hỏi, mà yêu cầu một url tùy ý, chứ không phải là url của trang hiện tại.

Phương pháp 1: Sử dụng API URL (báo trước: không hỗ trợ IE11)

Bạn có thể dùng API URL (không được hỗ trợ bởi IE11, nhưng có sẵn ở mọi nơi khác).

Điều này cũng giúp dễ dàng truy cập thông số tìm kiếm. Một tiền thưởng khác: nó có thể được sử dụng trong một Web Worker vì nó không phụ thuộc vào DOM.

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

Phương pháp 2 (cách cũ): Sử dụng trình phân tích cú pháp dựng sẵn của trình duyệt trong DOM

Sử dụng điều này nếu bạn cần điều này để làm việc trên các trình duyệt cũ hơn là tốt.

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

Đó là nó!

Trình phân tích cú pháp dựng sẵn của trình duyệt đã thực hiện công việc của mình. Bây giờ bạn có thể chỉ cần lấy các phần bạn cần (lưu ý rằng điều này làm việc cho cả hai phương pháp trên):

//  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:'

Tiền thưởng: Thông số tìm kiếm

Rất có thể bạn sẽ muốn chia nhỏ các thông số url tìm kiếm, vì '? StartIndex = 1 & pageSize = 10' không phải là quá dễ sử dụng.

Nếu bạn đã sử dụng Phương pháp 1 (API URL) ở trên, bạn chỉ cần sử dụng gettersams tìm kiếm:

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

Hoặc để có được tất cả các thông số:

Array.from(url.searchParams).reduce((accum, [key, val]) => {
  accum[key] = val;
  return accum;
}, {});
// -> { startIndex: '1', pageSize: '10' }

Nếu bạn sử dụng Phương pháp 2 (cách cũ), bạn có thể sử dụng một cái gì đó như thế này:

// Simple object output (note: does NOT preserve duplicate keys).
var parms = 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' }

127
2017-10-17 22:12



link.protocol đưa cho tôi một "http:" nếu tôi kiểm tra một người anker với "google.com" :-( var link = document.createElement('a'); link.setAttribute('href', 'google.com'); console.log(link.protocol) - exxecc
Bạn đang làm điều đó trên một http trang có lẽ? Nếu không được chỉ định, nó sẽ 'kế thừa' từ vị trí hiện tại - Stijn de Witt
Đây là một câu trả lời tuyệt vời và sẽ nhận được nhiều phiếu bầu hơn, bởi vì câu trả lời này không chỉ giới hạn ở hiện hành vị trí nhưng hoạt động cho bất kỳ url nàovà bởi vì câu trả lời này sử dụng trình phân tích cú pháp tích hợp của trình duyệt thay vì xây dựng một trình phân tích (mà chúng ta không thể hy vọng làm tốt hay nhanh chóng!). - Stijn de Witt
Cảm ơn bạn đã lừa thông minh này! Tôi muốn thêm một điều: Có cả hai host và hostname. Phần trước bao gồm cổng (ví dụ: localhost:3000), trong khi sau chỉ là tên của máy chủ (ví dụ: localhost). - codener
Điều này hoạt động tốt trong trường hợp URL tuyệt đối. Nó không thành công trong trường hợp URL tương đối và trình duyệt chéo. Bất kỳ đề xuất? - Gururaj


Đối với một số lý do tất cả các câu trả lời là tất cả overkills. Đây là tất cả phải mất:

window.location.origin

Nhiều thông tin thêm có thế được tìm thấy ở đây: https://developer.mozilla.org/en-US/docs/Web/API/window.location#Properties


105
2018-05-30 18:35



FYI, tôi chắc chắn điều này sẽ tuyệt vời trong tương lai khi tất cả các trình duyệt phổ biến đã triển khai nó, Tuy nhiên, đây không phải là trường hợp hiện tại: developer.mozilla.org/en-US/docs/Web/API/… Tại thời điểm viết các phiên bản Firefox và trình duyệt WebKit gần đây chỉ hỗ trợ thuộc tính gốc theo nghiên cứu của tôi. - Zac Seth
Chỉ cần hoàn thành: vị trí là được xác định trên HTML5 và nó thực hiện URLUtils giao diện là được xác định trên WHATWG và bao gồm origin thuộc tính. - Ciro Santilli 新疆改造中心 六四事件 法轮功
Xin chào từ 2015 .. không may URLUtils vẫn không được triển khai đúng trên tất cả các trình duyệt, theo bảng tương thích này trên MDN. Tuy nhiên có vẻ như tài sản gốc được hỗ trợ tốt hơn một chút so với năm 2013, nó vẫn còn không phù hợp cho sản xuất vì nó không được triển khai đúng trong Safari. Xin lỗi các bạn :( - totallyNotLizards
Cập nhật: Vẫn không được hỗ trợ cho nhiều trình duyệt (safari) :( :( - Ahmad hamza
Nó không hoạt động trong IE, nó trả về "không xác định". - Siddhartha Chowdhury


Như đã được đề cập, đó là chưa được hỗ trợ đầy đủ window.location.origin nhưng thay vì sử dụng nó hoặc tạo biến mới để sử dụng, tôi muốn kiểm tra và nếu nó không được đặt để đặt biến đó.

Ví dụ;

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

Tôi thực sự đã viết về điều này một vài tháng trước Bản sửa lỗi cho window.location.origin


46
2017-10-10 00:26



Đây là lần đầu tiên tôi biết window.location.origin tồn tại. Cảm ơn bạn. ^^ - EThaizone Jo


chủ nhà

var url = window.location.host;

trả về localhost:2679

tên máy chủ

var url = window.location.hostname;

trả về localhost


26
2017-07-19 07:42



Làm việc trong chrome, cảm ơn :) - Meeh
Upvoted cho câu trả lời tốt nhất. - John Simoes
Rõ ràng đây là câu trả lời được chấp nhận. - Marco Lavagnino
Các awnser dưới đây> window.location.origin <thậm chí còn tốt hơn - Johan Hoeksma


Thuộc tính giao thức đặt hoặc trả về giao thức của URL hiện tại, bao gồm dấu hai chấm (:).

Điều này có nghĩa là nếu bạn muốn chỉ nhận được phần HTTP / HTTPS, bạn có thể thực hiện một việc như sau:

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

Đối với tên miền bạn có thể sử dụng:

var domain = window.location.hostname;

Đối với cổng bạn có thể sử dụng:

var port = window.location.port;

Hãy nhớ rằng cổng sẽ là một chuỗi rỗng nếu nó không hiển thị trong URL. Ví dụ:

Nếu bạn cần hiển thị 80/443 khi bạn không sử dụng cổng

var port = window.location.port || (protocol === 'https' ? '443' : '80');

10
2018-03-19 13:39



Mã cuối cùng không chính xác cho https (vì nó sẽ là cổng 443). - Robert
Lưu ý và cố định. - Дамян Станчев