如何使用JavaScript从网页中提取URL？

获取URL的JavaScript代码

在JavaScript中，可以使用window.location对象来获取当前页面的URL，以下是一个简单的示例：

// 获取完整的URL
var fullUrl = window.location.href;
console.log("完整的URL: " + fullUrl);
// 获取主机名（包括端口号）
var hostName = window.location.host;
console.log("主机名： " + hostName);
// 获取主机名（不包括端口号）
var hostnameWithoutPort = hostName.split(':')[0];
console.log("主机名（不包括端口号）： " + hostnameWithoutPort);
// 获取端口号
var port = window.location.port;
console.log("端口号： " + port);
// 获取路径名
var pathname = window.location.pathname;
console.log("路径名： " + pathname);
// 获取查询字符串
var queryString = window.location.search;
console.log("查询字符串： " + queryString);
// 获取URL的哈希部分
var hash = window.location.hash;
console.log("URL的哈希部分： " + hash);

单元表格

相关问题与解答

问题1：如何通过JavaScript获取URL中的特定参数？

答案：可以通过解析查询字符串来获取URL中的特定参数，以下是一个示例函数，用于从URL中提取指定的查询参数：

function getQueryParam(param) {
    var urlParams = new URLSearchParams(window.location.search);
    return urlParams.get(param);
}
// 使用示例：假设URL为http://example.com?name=John&age=30
var name = getQueryParam("name"); // 返回"John"
var age = getQueryParam("age");   // 返回"30"

问题2：如何在不刷新页面的情况下更新URL的查询参数？

答案：可以使用HTML5的History API来修改浏览器的历史记录，而无需重新加载页面，以下是一个示例函数，用于更新URL的查询参数：

function updateQueryParam(key, value) {
    var currentUrl = new URL(window.location.href);
    currentUrl.searchParams.set(key, value);
    window.history.pushState({}, '', currentUrl.toString());
}
// 使用示例：更新URL的查询参数name为"Jane"
updateQueryParam("name", "Jane"); // URL变为http://example.com?name=Jane&age=30