在前端开发中，我们通常需要使用 JavaScript 来解析 URL。URL（Uniform Resource Locator）是指网络上资源的地址，它包含了很多信息，例如协议、主机名、端口、路径和查询字符串等。本文将介绍如何使用 JavaScript 解析 URL，并提供详细示例代码。
解析 URL 的方法
JavaScript 中有两种解析 URL 的方法：使用 window.location 对象和使用正则表达式。下面分别介绍这两种方法的实现方式。
使用 window.location 对象
window.location 对象包含了当前文档的 URL 信息，包括协议、主机名、端口、路径和查询字符串等。我们可以通过该对象的属性获取 URL 的各个部分，例如：
const url = window.location.href; // 获取当前页面的完整 URL const protocol = window.location.protocol; // 获取协议部分（例如 http: 或 https:) const hostname = window.location.hostname; // 获取主机名部分（例如 www.example.com） const port = window.location.port; // 获取端口号部分（例如 80 或 443） const pathname = window.location.pathname; // 获取路径部分（例如 /path/to/file.html） const search = window.location.search; // 获取查询字符串部分（例如 ?name=value&age=18）
使用正则表达式
除了使用 window.location 对象之外，我们还可以使用正则表达式来解析 URL。例如，以下代码展示了如何使用正则表达式从一个 URL 字符串中提取出协议、主机名、端口、路径和查询字符串等部分：
-- -------------------- ---- ------- ----- --- - ------------------------------------------------------------------- ----- ------- - ----------------------------------------------- ----- ------- - ------------------- ----- -------- - ----------- -- --------- ---- - ------ ----- -------- - ----------- -- ---------- ---------------- ----- ---- - ---------- - ----------------------- - --- -- ---------- ------------- ----- -------- - ----------- -- --------- ------------------- ----- ------ - ---------- - ---------- - --- -- ------------ ---------------------------
解析 URL 的应用
解析 URL 在前端开发中有很多实际应用。以下是一些常见的应用场景：
获取当前页面的 URL
我们可以使用 window.location.href 属性获取当前页面的完整 URL。例如，以下代码展示了如何将当前页面的 URL 显示在一个文本框中：
<input type="text" value="" id="url-input">
<script>
const urlInput = document.getElementById("url-input");
urlInput.value = window.location.href;
</script>根据 URL 加载不同的内容
我们可以根据 URL 的不同部分来判断用户需要加载哪些内容。例如，以下代码展示了如何根据 URL 的查询字符串参数来加载不同的广告内容：
-- -------------------- ---- ------- ----- ------------ - --- ---------------------------------------- ----- ------ - ------------------------- -- ------- --- ------------ - ------------------ - ---- -- ------- --- -------------- - -------------------- - ---- - ---------------- -
构建动态链接
我们可以使用 JavaScript 动态构建链接，例如将用户输入的搜索关键字添加到 Google 搜索的链接中。以下代码展示了如何使用 window.open() 方法在新窗口中打开 Google 搜索页面：
-- -------------------- ---- ------- ------ ----------- -------- ------------------ ------- ---------------------------------------- -------- -------- -------------- - ----- ------- - ---------------------------------------------- ----- --- - ---------------------------------- - ---------------------------- ---------------- ---------- - ---------
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/30562