将 URL 转换为普通URL-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常需要将 URL 转换为普通URL，以便于展示、分享或者其他操作。本文将介绍如何使用 JavaScript 将 URL 转换为普通 URL，并提供了相关代码示例。

什么是普通 URL？

我们所见到的大部分网站链接都是普通 URL，例如：

https://www.example.com/page.html

可以看到，这个 URL 很容易阅读和理解。而在 Web 开发中，我们有时会遇到一些不太友好的 URL，例如：

https://www.example.com/page.html?id=123&cat=456

这种情况下，URL 包含了一些参数，使得它难以直接阅读和理解。因此我们需要将其转换为普通 URL。

URL 转换方法

URL 转换的基本思路是将 URL 上的参数和值进行提取，并按照指定格式进行组合。以下是一个简单的 JavaScript 函数，用于将 URL 转换为普通 URL：

-- -------------------- ---- -------
-------- ----------------- -
  ----- ------ - ----------------------------
  ----------- - ----
  
  ----- --------- - ---------------------------
  ----- ------- - -------------------------- - ---
  
  --- -------- - ---
  
  -- --------------- -
    ----- ---------- - -----------------------------------
    -------- - --- - ---------------- -- ---------------------------
  -
  
  ----- ------- - ------------------------ ----

  ------ ---------------------------------------------------------------------
-

在这个函数中，首先使用 document.createElement('a') 创建一个虚拟的 <a> 标签，并将 URL 赋值给它。然后通过解析该标签上的各个属性，获取到原始 URL 中的各个部分，包括协议、域名、路径、查询参数和哈希。

接下来就是对这些部分进行组合，生成普通 URL。具体来说，我们需要做以下几件事情：

从路径中提取出文件名作为新的路径
对查询参数进行处理，将所有键值对的值连接起来，使用斜杠 / 连接，作为新的查询参数
去掉哈希符号 #，作为新的哈希字符串

最后将这些部分拼接成一个新的 URL，即可得到普通 URL。

示例代码

以下是一个示例代码，用于演示如何将 URL 转换为普通 URL：

const url = 'https://www.example.com/page.html?id=123&cat=456#section1';
const newUrl = transformUrl(url);

console.log(newUrl);
// 输出：https://www.example.com/page.html/123/456/section1

在这个示例中，我们将一个包含查询参数和哈希的 URL 转换为了普通 URL，并将结果打印到了控制台上。

总结

将 URL 转换为普通 URL 是前端开发中一个比较常见的任务。在本文中，我们介绍了如何使用 JavaScript 实现这个功能，并提供了相关代码示例。希望这篇文章能够对你有所帮助！

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