JavaScript - 获取URL路径的一部分

Question

JavaScript - 获取URL路径的一部分

javascriptjqueryurl

263

如何使用JavaScript从URL中提取路径的正确方法?

例子：
我有一个URL
http://www.somedomain.com/account/search?filter=a#top
但我只想获取这部分
/account/search

如果有jQuery可以利用的话，我正在使用它。

- BuddyJoe

6个回答

70

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

这将给您一个包含所有URL部件的数组，您可以像正常数组一样访问它们。

或者根据@Dylan提出的更加优雅的解决方案，只包含路径部分：

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

- Jose Faeti

2

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

6

window.location.pathname.split('/')方法会移除JavaScript 1.6及以上版本中的空元素。过程包括将URL路径分割成数组并使用filter方法过滤空元素。 - Dhaval Desai

@DhavalDesai 现在我们也可以执行 window.location.pathname.split('/').filter( e => e )。 - Herbert Van-Vliet

37

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

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

- nobody

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

1

为了使正则表达式即使在没有路径名的情况下也能工作，请使用：/.+?\:\/\/.+?(\/.+?)?(?:#|\?|)?$/。 - Scottmas

24

有一个非常有用的 Web API 方法被称为 URL

const url = new URL('https://www.somedomain.com/account/search?filter=a#top');
console.log(url.pathname.split('/').slice(1)); // drop the leading slash
const params = new URLSearchParams(url.search)
console.log("filter:",params.get("filter"))

- mplungjan

如果你需要支持旧版浏览器，就不幸地需要使用URL()。详情请见：https://caniuse.com/?search=URL() - nikelone

@nikelone https://www.npmjs.com/package/core-js - mplungjan

6

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

提供的帮助。

- krolovolk

1

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

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

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

返回的url实例包含以下属性：协议：URL的协议方案（例如http:)。斜杠：一个布尔值，指示协议是否后跟两个正斜杠（//）。认证：身份验证信息部分（例如用户名:密码）。用户名：基本身份验证的用户名。密码：基本身份验证的密码。主机：带端口号的主机名。主机名：不带端口号的主机名。端口：可选端口号。路径名：URL路径。查询：解析为对象的查询字符串，除非将解析设置为false。哈希：包括井号（#）的URL的“片段”部分。 href：完整的URL。起源：URL的起源。

- Marian Klühspies

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nicole · Accepted Answer

内置的 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中推出。当您认为可能已经支持它时，请在此处尝试。