在网页开发过程中，获取完整的URL是一个常见的需求。无论是用于构建请求、分享链接，还是进行页面跳转，了解如何在JavaScript中获取完整的URL都是非常有用的。下面，我们就来揭秘在网页中获取URL的全面技巧。
1. 获取当前页面的完整URL
要获取当前页面的完整URL，可以使用window.location.href属性。这个属性会返回当前页面的URL，包括协议（如http或https）、域名、路径、查询参数等。
console.log(window.location.href);
2. 获取URL的特定部分
2.1 协议（Scheme）
使用window.location.protocol可以获取当前页面的协议。
console.log(window.location.protocol); // 输出：http:
2.2 域名（Hostname）
使用window.location.hostname可以获取当前页面的域名。
console.log(window.location.hostname); // 输出：example.com
2.3 路径（Pathname）
使用window.location.pathname可以获取当前页面的路径。
console.log(window.location.pathname); // 输出：/about
2.4 查询参数（Search）
使用window.location.search可以获取当前页面的查询参数。
console.log(window.location.search); // 输出：?id=123&name=John
2.5 整个URL（Hostname + Pathname + Search）
使用window.location.href可以获取当前页面的完整URL，但如果你想组合域名、路径和查询参数，可以使用以下方法：
var protocol = window.location.protocol;
var hostname = window.location.hostname;
var pathname = window.location.pathname;
var search = window.location.search;
var fullUrl = protocol + "//" + hostname + pathname + search;
console.log(fullUrl);
3. 构建新的URL
如果你需要根据现有URL构建一个新的URL，可以使用window.location.assign()方法。
window.location.assign("https://www.example.com/new-page");
4. 获取URL参数
有时候，你可能需要从URL中获取特定的参数值。可以使用URLSearchParams对象来实现。
var url = new URL("https://www.example.com/?id=123&name=John");
var id = url.searchParams.get("id");
console.log(id); // 输出：123
总结
通过以上方法，你可以在JavaScript中轻松获取和操作网页中的URL。这些技巧不仅适用于日常开发，而且在构建复杂的Web应用程序时也非常有用。希望这篇文章能够帮助你更好地理解如何在网页中获取完整的URL。