[英]JavaScript - Get Portion of URL Path
使用 JavaScript 從 URL 中提取路徑的正確方法是什么?
例子:
我有 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
事實證明,這個模式被標准化為一個名為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 示例進行測試。
還有一個即將到來的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];
有一個有用的 Web 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 字符串(不是來自當前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
如果您想獲取存儲在變量中的URL 的一部分,我可以推薦URL-Parse
const Url = require('url-parse');
const url = new Url('https://github.com/foo/bar');
根據文檔,它提取了以下部分:
返回的 url 實例包含以下屬性:
協議:URL 的協議方案(例如 http:)。 斜杠:一個布爾值,指示協議后面是否跟有兩個正斜杠 (//)。 auth:認證信息部分(例如用戶名:密碼)。 username:基本認證的用戶名。 password:基本認證密碼。 主機:帶有端口號的主機名。 hostname:不帶端口號的主機名。 端口:可選端口號。 路徑名:URL 路徑。 查詢:包含查詢字符串的解析對象,除非解析設置為 false。 hash:URL 的“片段”部分,包括井號 (#)。 href:完整網址。 來源:URL 的來源。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.