删除 URL 开头的字符串

在前端开发中，我们经常需要对 URL 进行操作。其中一个常见的需求是删除 URL 开头的字符串，例如删除协议部分（http://、https://）或者域名部分。

本文将介绍如何使用 JavaScript 和正则表达式来实现这个功能，并提供示例代码和解释。

方法一：使用 replace 函数

JavaScript 中的 replace() 函数可以用来替换字符串中的内容。我们可以利用它来删除 URL 开头的字符串。

以下是一个示例代码：

const url = 'https://www.example.com/path/to/resource';
const newUrl = url.replace(/^https?:\/\/[^/]+/, '');
console.log(newUrl); // "/path/to/resource"

上面的代码中，我们首先定义了一个变量 url，它存储了一个完整的 URL 字符串。然后，我们使用 replace() 函数来删除协议和域名部分。具体来说，我们使用正则表达式 /^https?:\/\/[^/]+/ 来匹配协议和域名部分，然后将其替换为空字符串。

需要注意的是，上面的正则表达式中，^ 表示匹配字符串的开头，https? 表示匹配 http 或 https 协议，\/\/ 表示匹配双斜杠，[^/]+ 表示匹配除斜杠之外的任意字符（不包括换行符），加上 + 表示匹配一个或多个字符。

方法二：使用 URL 对象

JavaScript 中的 URL 对象可以用来解析和操作 URL。我们可以将 URL 字符串传入构造函数，然后访问对象的属性来获取协议、域名、路径等信息。利用这些信息，我们可以构建一个新的 URL 字符串，去掉开头的部分。

以下是一个示例代码：

const url = 'https://www.example.com/path/to/resource';
const parsedUrl = new URL(url);
const newUrl = parsedUrl.pathname;
console.log(newUrl); // "/path/to/resource"

上面的代码中，我们首先定义了一个变量 url，它存储了一个完整的 URL 字符串。然后，我们使用 new URL() 构造函数来创建一个 URL 对象。最后，我们访问对象的 pathname 属性，它表示 URL 的路径部分，即不包括协议和域名部分。

需要注意的是，如果 URL 字符串不合法，例如缺少协议部分或者包含非法字符，那么构造函数会抛出异常。因此，在实际应用中，我们需要对输入进行验证和处理。

总结

本文介绍了两种方法来删除 URL 开头的字符串。第一种方法使用正则表达式的 replace() 函数，通过匹配协议和域名部分来替换掉。第二种方法使用 JavaScript 中的 URL 对象，通过访问对象的属性来获取路径部分。这两种方法各有优缺点，具体使用取决于实际场景和需求。

如果你想深入学习正则表达式和 JavaScript 的字符串操作，可以参考以下资源：

• MDN Web 文档：正则表达式
• MDN Web 文档：字符串操作

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/13867