在前端开发中，我们经常需要将 URL 转换为普通URL，以便于展示、分享或者其他操作。本文将介绍如何使用 JavaScript 将 URL 转换为普通 URL，并提供了相关代码示例。
什么是普通 URL？
我们所见到的大部分网站链接都是普通 URL，例如：
---------------------------------
可以看到，这个 URL 很容易阅读和理解。而在 Web 开发中，我们有时会遇到一些不太友好的 URL，例如：
------------------------------------------------
这种情况下，URL 包含了一些参数，使得它难以直接阅读和理解。因此我们需要将其转换为普通 URL。
URL 转换方法
URL 转换的基本思路是将 URL 上的参数和值进行提取，并按照指定格式进行组合。以下是一个简单的 JavaScript 函数，用于将 URL 转换为普通 URL：
-------- ----------------- -
----- ------ - ----------------------------
----------- - ----
----- --------- - ---------------------------
----- ------- - -------------------------- - ---
--- -------- - ---
-- --------------- -
----- ---------- - -----------------------------------
-------- - --- - ---------------- -- ---------------------------
-
----- ------- - ------------------------ ----
------ ---------------------------------------------------------------------
-在这个函数中，首先使用 document.createElement('a') 创建一个虚拟的 <a> 标签，并将 URL 赋值给它。然后通过解析该标签上的各个属性，获取到原始 URL 中的各个部分，包括协议、域名、路径、查询参数和哈希。
接下来就是对这些部分进行组合，生成普通 URL。具体来说，我们需要做以下几件事情：
- 从路径中提取出文件名作为新的路径
- 对查询参数进行处理，将所有键值对的值连接起来，使用斜杠
/连接，作为新的查询参数 - 去掉哈希符号
#，作为新的哈希字符串
最后将这些部分拼接成一个新的 URL，即可得到普通 URL。
示例代码
以下是一个示例代码，用于演示如何将 URL 转换为普通 URL：
----- --- - ------------------------------------------------------------ ----- ------ - ------------------ -------------------- -- -----------------------------------------------------
在这个示例中，我们将一个包含查询参数和哈希的 URL 转换为了普通 URL，并将结果打印到了控制台上。
总结
将 URL 转换为普通 URL 是前端开发中一个比较常见的任务。在本文中，我们介绍了如何使用 JavaScript 实现这个功能，并提供了相关代码示例。希望这篇文章能够对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/13679