在Web开发中，经常需要获取当前网页的URL，以便进行一些操作，比如分享链接、获取参数等。JavaScript为我们提供了多种方法来轻松获取网页URL。本文将详细介绍如何使用JavaScript获取并输出网页URL，并分享一些实用的URL提取技巧。
获取当前网页URL
1. 使用window.location.href
这是最简单的方法，可以直接获取当前网页的完整URL。
console.log(window.location.href);
2. 使用window.location.protocol
获取当前网页的协议（如http或https）。
console.log(window.location.protocol);
3. 使用window.location.host
获取当前网页的主机名和端口号。
console.log(window.location.host);
4. 使用window.location.pathname
获取当前网页的路径。
console.log(window.location.pathname);
5. 使用window.location.search
获取当前网页的查询字符串。
console.log(window.location.search);
6. 使用window.location.hash
获取当前网页的锚点。
console.log(window.location.hash);
URL提取技巧
1. 获取查询参数
使用URLSearchParams对象可以方便地获取查询参数。
const params = new URLSearchParams(window.location.search);
console.log(params.get('paramName')); // 获取paramName参数的值
2. 获取URL片段
使用window.location.hash可以获取URL片段。
console.log(window.location.hash.substring(1)); // 获取hash后的内容
3. 替换URL
使用window.location.href可以替换当前网页的URL。
window.location.href = 'https://www.example.com';
4. 监听URL变化
使用window.addEventListener可以监听URL的变化。
window.addEventListener('popstate', function(event) {
console.log('URL changed:', window.location.href);
});
总结
通过以上方法，我们可以轻松地获取并输出网页URL，同时掌握一些实用的URL提取技巧。在实际开发中，灵活运用这些技巧可以帮助我们更好地处理与URL相关的任务。希望本文能对你有所帮助！