使用JS截取路径中最后一个“-”后的字符串

在前端开发中，我们常常需要对路径进行操作，其中一个常见的需求就是截取路径中最后一个“/”后的字符串。这个需求可以使用JS来实现。

1. 使用split方法

JS中的split方法可以将一个字符串分割成数组，我们可以使用该方法来实现截取路径中最后一个“/”后的字符串。

var url = "http://www.example.com/path/to/file.html";
var arr = url.split("/");
var filename = arr[arr.length-1];
console.log(filename); // 输出：file.html

在上面的代码中，我们首先定义了一个url变量，它的值是一个完整的URL路径。然后我们使用split方法将该路径按照“/”进行分割，得到一个数组。最后，我们通过数组的length属性和下标，获取了最后一个“/”后的字符串。

2. 使用lastIndexOf方法

除了使用split方法，JS中还有一个lastIndexOf方法可以帮助我们实现截取路径中最后一个“/”后的字符串。

var url = "http://www.example.com/path/to/file.html";
var index = url.lastIndexOf("/");
var filename = url.substring(index+1);
console.log(filename); // 输出：file.html

在上面的代码中，我们首先定义了一个url变量，它的值是一个完整的URL路径。然后我们使用lastIndexOf方法获取了最后一个“/”的下标，最后通过substring方法截取了最后一个“/”后的字符串。

3. 注意事项

在实现截取路径中最后一个“/”后的字符串时，需要注意以下几点：

3.1. 路径中可能没有“/”

有些路径可能没有“/”，比如http://www.example.com，这时我们需要对代码进行一定的处理，以避免出现错误。

var url = "http://www.example.com";
var arr = url.split("/");
var filename = arr[arr.length-1] || "";
console.log(filename); // 输出：空字符串

在上面的代码中，我们首先对路径进行了split操作，得到一个数组。然后我们使用了短路运算符，如果数组中不存在元素，则返回一个空字符串。

3.2. 路径中可能包含参数

有些路径中可能包含参数，比如http://www.example.com/path/to/file.html?id=123，这时我们需要对代码进行一定的处理，以避免出现错误。

var url = "http://www.example.com/path/to/file.html?id=123";
var arr = url.split("/");
var filename = arr[arr.length-1].split("?")[0];
console.log(filename); // 输出：file.html

在上面的代码中，我们首先对路径进行了split操作，得到一个数组。然后我们对最后一个数组元素进行了split操作，以去掉参数部分。

4. 常见问题

4.1. 如何获取路径中的文件名和扩展名？

我们可以使用split方法和lastIndexOf方法来获取路径中的文件名和扩展名：

var url = "http://www.example.com/path/to/file.html";
var arr = url.split("/");
var filename = arr[arr.length-1];
var dotIndex = filename.lastIndexOf(".");
var name = filename.substring(0, dotIndex);
var ext = filename.substring(dotIndex+1);
console.log(name); // 输出：file
console.log(ext); // 输出：html

4.2. 如何判断一个字符串是否是URL路径？

我们可以使用正则表达式来判断一个字符串是否是URL路径：

function isURL(str) {
  var pattern = /^(https?|ftp):\/\/[^\s\/$.?#].[^\s]*$/i;
  return pattern.test(str);
}

console.log(isURL("http://www.example.com/path/to/file.html")); // 输出：true
console.log(isURL("www.example.com")); // 输出：false

4.3. 如何获取当前页面的URL？

我们可以使用location对象来获取当前页面的URL：

console.log(location.href); // 输出：当前页面的URL

4.4. 如何获取当前页面的域名？

我们可以使用location对象来获取当前页面的域名：

console.log(location.hostname); // 输出：当前页面的域名