JavaScript - 获取 URL 路径的一部分

Posted 2023-02-22

【中文标题】JavaScript - 获取 URL 路径的一部分

【英文标题】：JavaScript - Get Portion of URL Path

【发布时间】：2011-10-20 03:50:02

【问题描述】：

使用 javascript 从 URL 中提取路径的正确方法是什么？

示例： 我有网址http://www.somedomain.com/account/search?filter=a#top 但我只想得到这部分/account/search

如果有任何可以利用的东西，我正在使用 jQuery。

【参考方案1】：

如果这是 当前 url，则使用 window.location.pathname 否则使用此正则表达式：

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

【讨论】：

几乎完美 -- 但与 window.location.pathname 不同的是，它在 Windows 的路径名中不包含驱动器号。

对于即使没有路径名也能工作的正则表达式，请使用：/.+?\:\/\/.+?(\/.+?)?(?:#|\?|)?$/

【参考方案2】：

有一个有用的 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"))

【参考方案3】：

如果你有一个抽象的 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

【参考方案4】：

如果您想获取存储在变量中的部分 URL，我可以推荐 URL-Parse

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

根据文档，它提取了以下部分：

返回的 url 实例包含以下属性：

protocol：URL 的协议方案（例如 http:）。 slashes：一个布尔值，指示协议是否后跟两个正斜杠 (//)。 auth：身份验证信息部分（例如用户名：密码）。 username：基本认证的用户名。 password：基本认证的密码。 host：主机名和端口号。 主机名：没有端口号的主机名。 端口：可选端口号。 路径名：URL 路径。 查询：包含查询字符串的已解析对象，除非解析设置为 false。 哈希：URL 的“片段”部分，包括井号 (#)。 href：完整的网址。 origin：URL 的来源。

【参考方案5】：

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

会给你一个包含所有 URL 部分的数组，你可以像普通数组一样访问它。

或者@Dylan 建议的更优雅的解决方案，只有路径部分：

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

【讨论】：

window.location.pathname.split('/');如果您尝试访问超出标准协议和 www 等的 URL 的不同部分，在大多数情况下是一个更优雅的解决方案。

window.location.pathname.split('/').filter(function(v) return v; );将删除 Javascript 1.6 及更高版本的空元素。

【参考方案6】：

内置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 example

还有一个即将推出的 URL 对象，它将为 URL 本身提供这种支持，而无需锚元素。看起来目前没有稳定的浏览器支持它，但据说它会在 Firefox 26 中出现。When you think you might have support for it, try it out here。

【讨论】：

OP 要求提供“一个 URL”，而不是“窗口的当前 URL”。如果你有一个 url 作为字符串呢？

@JoshNoe 原来你现在可以在锚元素上使用相同的属性。查看更新的答案。

感谢您提供的好信息。我用 IE 9 和 IE 8（使用 IE 9 模拟）进行了测试，两者都可以。当然适用于 Chrome 和 Firefox 最新版本:)