JavaScript - รับส่วนของเส้นทาง URL

วิธีที่ถูกต้องในการดึงเพียงเส้นทางจาก URL โดยใช้ JavaScript คืออะไร?

ตัวอย่าง:
ฉันมี URL
http://www.somedomain.com/account/search?filter=a#top
แต่ฉันต้องการรับส่วน
/ บัญชี / การค้นหานี้

ฉันใช้ jQuery หากมีสิ่งใดที่สามารถยกระดับได้

มีคุณสมบัติของwindow.locationวัตถุในตัวที่จะให้สิ่งนั้นสำหรับหน้าต่างปัจจุบัน

// If URL is http://www.somedomain.com/account/search?filter=a#top

window.location.pathname // /account/search

// For reference:

window.location.host     // www.somedomain.com (includes port if there is one)
window.location.hostname // www.somedomain.com
window.location.hash     // #top
window.location.href     // http://www.somedomain.com/account/search?filter=a#top
window.location.port     // (empty string)
window.location.protocol // http:
window.location.search   // ?filter=a  

อัปเดตใช้คุณสมบัติเดียวกันสำหรับ URL ใด ๆ :

ปรากฎว่าสคีมานี้ได้รับการมาตรฐานเป็นส่วนต่อประสานที่เรียกว่าURLUtilsและคาดเดาอะไร ทั้งwindow.locationวัตถุที่มีอยู่และองค์ประกอบของสมอใช้อินเทอร์เฟซ

ดังนั้นคุณสามารถใช้คุณสมบัติเดียวกันด้านบนสำหรับURL ใด ๆ - เพียงแค่สร้างจุดยึดด้วย URL และเข้าถึงคุณสมบัติ:

var el = document.createElement('a');
el.href = "http://www.somedomain.com/account/search?filter=a#top";

el.host        // www.somedomain.com (includes port if there is one[1])
el.hostname    // www.somedomain.com
el.hash        // #top
el.href        // http://www.somedomain.com/account/search?filter=a#top
el.pathname    // /account/search
el.port        // (port if there is one[1])
el.protocol    // http:
el.search      // ?filter=a

[1]:การรองรับเบราว์เซอร์สำหรับคุณสมบัติที่มีพอร์ตไม่สอดคล้องกันโปรดดู: http://jessepollak.me/chrome-was-wrong-ie-was-right

งานนี้ในรุ่นล่าสุดของ Chrome และ Firefox ฉันไม่มีรุ่นของ Internet Explorer ที่จะทดสอบดังนั้นโปรดทดสอบด้วยตัวคุณเองด้วยตัวอย่างของ JSFiddle

ตัวอย่าง JSFiddle

นอกจากนี้ยังมีURLออบเจ็กต์ที่จะให้การสนับสนุน URL ด้วยตัวเองโดยไม่มีองค์ประกอบจุดยึด ดูเหมือนว่าเบราว์เซอร์ที่มีเสถียรภาพไม่สนับสนุนมันในเวลานี้ แต่มันก็บอกว่าจะมาใน Firefox 26. เมื่อคุณคิดว่าคุณอาจมีการสนับสนุนให้มันลองออกจากที่นี่

window.location.href.split('/');

จะให้อาร์เรย์ที่มีส่วนประกอบ URL ทั้งหมดซึ่งคุณสามารถเข้าถึงได้เหมือนอาร์เรย์ปกติ

หรือคำตอบที่สง่างามยิ่งกว่าที่ @Dylan แนะนำโดยมีเฉพาะส่วนของเส้นทาง:

window.location.pathname.split('/');

หากนี่คือurl ปัจจุบันให้ใช้window.location.pathnameมิฉะนั้นให้ใช้นิพจน์ทั่วไปนี้:

var reg = /.+?\:\/\/.+?(\/.+?)(?:#|\?|$)/;
var pathname = reg.exec( 'http://www.somedomain.com/account/search?filter=a#top' )[1];

มีวิธีใช้ API เว็บที่มีประโยชน์ชื่อURL

const url = new URL('http://www.somedomain.com/account/search?filter=a#top');
console.log(url.pathname.split('/'));
const params = new URLSearchParams(url.search)
console.log(params.get("filter"))

ในกรณีที่คุณต้องการรับส่วนของ URL ที่คุณเก็บไว้ในตัวแปรฉันสามารถแนะนำการแยกวิเคราะห์ URL

const Url = require('url-parse');
const url = new Url('https://github.com/foo/bar');

ตามเอกสารมันแยกส่วนต่อไปนี้:

อินสแตนซ์ url ที่ส่งคืนมีคุณสมบัติต่อไปนี้:

โปรโตคอล: รูปแบบโปรโตคอลของ URL (เช่น http :) เครื่องหมายทับ: บูลีนซึ่งระบุว่าโปรโตคอลนั้นตามมาด้วยเครื่องหมายสแลชสองตัว (//) รับรองความถูกต้อง: ส่วนข้อมูลการรับรองความถูกต้อง (เช่นชื่อผู้ใช้: รหัสผ่าน) ชื่อผู้ใช้: ชื่อผู้ใช้ของการรับรองความถูกต้องเบื้องต้น รหัสผ่าน: รหัสผ่านของการตรวจสอบขั้นพื้นฐาน โฮสต์: ชื่อโฮสต์พร้อมหมายเลขพอร์ต ชื่อโฮสต์: ชื่อโฮสต์ที่ไม่มีหมายเลขพอร์ต พอร์ต: หมายเลขพอร์ตที่เป็นตัวเลือก ชื่อพา ธ : พา ธ URL แบบสอบถาม: วัตถุแยกวิเคราะห์ที่มีสตริงแบบสอบถามยกเว้นว่าการแยกตั้งค่าเป็นเท็จ แฮช: ส่วน "ส่วน" ของ URL รวมถึงเครื่องหมายปอนด์ (#) href: URL แบบเต็ม origin: ที่มาของ URL

หากคุณมีสตริง URL นามธรรม (ไม่ใช่จากปัจจุบันwindow.location) คุณสามารถใช้เคล็ดลับนี้:

let yourUrlString = "http://example.com:3000/pathname/?search=test#hash";

let parser = document.createElement('a');
parser.href = yourUrlString;

parser.protocol; // => "http:"
parser.hostname; // => "example.com"
parser.port;     // => "3000"
parser.pathname; // => "/pathname/"
parser.search;   // => "?search=test"
parser.hash;     // => "#hash"
parser.host;     // => "example.com:3000"

ขอบคุณjlong