JavaScript中URL的最后一段

Question

如何获取url的最后一部分？我有以下脚本，它会显示单击的锚点标签的完整url：

$(".tag_name_goes_here").live('click', function(event)
{
    event.preventDefault();  
    alert($(this).attr("href"));
});

如果URL是

http://mywebsite/folder/file

如何仅在警告框中显示URL的“file”部分？

- oshirowanen

---

请不要使用简单的方法通过 / 分割 href。一个 URL 包括路径之后的部分：查询参数（在 ? 后面）和片段（在 # 后面）。如果您将 URL 作为字符串处理，请先使用 new URL( 字符串 ).pathname。如果您正在查找当前页面的 URL，请使用 location.pathname。然后 在结果上使用 .split("/")。.filter(Boolean) 可去除空部分（比如尾斜杠后面的部分）。.at(-1)（或 .pop() 或 .slice(-1)[0]）可获取路径的最后一部分。 - Sebastian Simon

Answer 1

您还可以使用 lastIndexOf() 函数来定位您的URL中最后一个 / 字符的位置，然后使用 substring() 函数从该位置开始返回子字符串：

console.log(this.href.substring(this.href.lastIndexOf('/') + 1));

这样，您将避免创建包含所有URL段的数组，就像split()函数一样。

- Frédéric Hamidi

---

@oshirowanen，不会创建每个URL段的数组元素。由于您仅对最后一个段感兴趣，因此分配许多永远不会使用的数组元素可能是浪费的。 - Frédéric Hamidi

如果URL变成像admin/store/tour/-1/，那么它会变成一个空字符串''吗？ - Set Kyar Wa Lar

如果URL末尾包含“/”会怎么样？ - Sнаđошƒаӽ

对于未来的读者，请不要依赖href属性，它是未解析的，可能包含像../这样的东西，表示上一级目录。相反，应该使用本地的属性，例如this.href。 - Walf

注意：@Set Kyar Wa Lar Aug 和 @Sнаđошƒаӽ针对URL末尾包含“/”的解决方案： var url = window.location.href.replace(/\/$/, ''); /* 删除可选的结尾/ */ var lastSeg = url.substr(url.lastIndexOf('/') + 1); - Ross

Answer 2

var parts = 'http://mywebsite/folder/file'.split('/');
var lastSegment = parts.pop() || parts.pop();  // handle potential trailing slash

console.log(lastSegment);

- Tim van Oostrom

---

你能解释一下它是如何工作的吗？据我所知，.pop() 用于删除数组的最后一个元素。但这里它显示了我的 URL 的最后一个元素！ - Inspire Shahin

Split将把您的URL转换为一个数组，取每个由“ /”分隔的URL部分。因此，最后一个段是URL和随后创建的数组的最后一个元素。 - stephen

注：如果 URL 中设置了查询参数（例如 .../file?var=value&foo=bar），此解决方案将无法起作用。下面这个方案是更加健壮和现代的解决方法：https://dev59.com/u2445IYBdhLWcg3wpb4P#51795122 - Sebastian Barth

@SebastianBarth：var lastSegment = parts.pop().split('?')[0] || parts.pop(); - Mori

Answer 3

window.location.pathname.split("/").pop()

- Dblock247

---

这正是我一直在寻找的。使用react-router-dom，这是我发现的最干净的解决方案，以查找URL中最后一个斜杠“/”后面的最后一部分。 console.log(history.location.pathname.split("/").pop())如果有更好的方法，我想知道！希望这个评论可以让更多的人看到你的答案。谢谢@Dblock247 - tralawar

Answer 4

其他答案可能在路径简单，仅由简单的路径元素组成时有效。但当它包含查询参数时，它们会失败。最好使用URL对象来获取更强大的解决方案。它是当前URL的解析解释。 输入： const href = 'https://stackoverflow.com/boo?q=foo&s=bar'

const segments = new URL(href).pathname.split('/');
const last = segments.pop() || segments.pop(); // Handle potential trailing slash
console.log(last);

输出：'boo'

这适用于所有常见的浏览器。只有我们即将消失的IE不支持此功能（也不会支持）。但是，对于IE，有一个polyfills可用（如果您在意的话）。

- Sebastian Barth

---

如果有人不理解这里发生了什么：segments 将是所有路径的数组，所以如果你有一个 URL，比如：https://a.com/b/c/d/?letters=true，那么在这个例子中 segments 等于 ['b', 'c', 'd', '']，因为 d 后面的斜杠导致出现空字符串 ''。然后 last 变量表示“获取 segments 数组中的最后一项并将其删除。如果该项为假，则再次执行相同的操作”（逻辑或），这将导致在我的示例中返回 d。 - maxshuty

@Sebastian Barth，如何获取等号后面的最后一部分。我的意思是bar。 - Kaizur

@Kaizur 这些是查询参数。请参阅如何在JavaScript中获取查询字符串值？。 - Sebastian Simon

Answer 5

只是另一种使用正则表达式的解决方案。

var href = location.href;
console.log(href.match(/([^\/]*)\/*$/)[1]);

- Avirtum

Answer 6

Javascript有一个与字符串对象相关联的split函数，可以帮助你：

const url = "http://mywebsite/folder/file";
const array = url.split('/');

const lastsegment = array[array.length-1];

- Fran Verona

Answer 7

使用 split()、filter() 和 pop() 获取 URL 最后一段的最短方法。

function getLastUrlSegment(url) {
  return new URL(url).pathname.split('/').filter(Boolean).pop();
}

console.log(getLastUrlSegment(window.location.href));
console.log(getLastUrlSegment('https://x.com/boo'));
console.log(getLastUrlSegment('https://x.com/boo/'));
console.log(getLastUrlSegment('https://x.com/boo?q=foo&s=bar=aaa'));
console.log(getLastUrlSegment('https://x.com/boo?q=foo#this'));
console.log(getLastUrlSegment('https://x.com/last segment with spaces'));

对我而言是有效的。

- sanyaissues

---

这似乎是最佳解决方案，可行。 - OzzyCzech

Answer 8

或者您可以使用正则表达式：

alert(href.replace(/.*\//, ''));

- jasssonpet

---

更好的做法是将此代码与 https://dev59.com/u2445IYBdhLWcg3wpb4P#_bChEYcBWogLw_1btbV8 结合使用：alert(window.location.href.replace(/\/$/, '').replace(/.*\//, '')) - samson

Answer 9

var urlChunks = 'mywebsite/folder/file'.split('/');
alert(urlChunks[urlChunks.length - 1]);

- acme

Answer 10

返回最后一个段落，无论是否有尾随斜杠：

var val = 'http://mywebsite/folder/file//'.split('/').filter(Boolean).pop();

console.log(val);

- John Doherty

---

你可能想要使用 path.sep 而不是一个字面上的斜杠。请参阅 https://nodejs.org/api/path.html#path_path_sep。这将使你的代码在不同操作系统之间具有可移植性。 - Aaron

不错的想法，但它在浏览器中将不再起作用。 - John Doherty

好主意。我应该说，在命令行脚本/服务器端的nodejs中，这是首选。 - Aaron

好的，我推荐这个解决方案。我在我的React项目中使用过。 - Hassan Khan