详解javascript获取url信息的常见方法

下面我会详细讲解“详解javascript获取url信息的常见方法”的完整攻略。

获取url信息

在javascript中，获取url信息可以通过window.location对象来实现。window.location提供了一系列属性，能够帮助我们轻松获取当前网页的各种信息。

获取url

获取当前页面url的方法是直接访问window.location属性，如下所示：

console.log(window.location.href); // 打印当前页面url

解析url

获取url仅是获取整个url字符串，如果仅仅需要其中某些部分，比如查询参数，就需要对url进行解析。解析可以使用window.location对象提供的其它属性，如下所示：

protocol

获取协议名，返回值为'http:'或'https:'等。

console.log(window.location.protocol); // 打印协议名（http或https）

host

获取主机名（包括端口号）。返回值为'www.example.com:8000'这样的字符串格式。

console.log(window.location.host); // 打印主机名和端口号

hostname

获取主机名，与host不同的是不包括端口号。返回值为'www.example.com'这样的字符串格式。

console.log(window.location.hostname); // 打印主机名（不包括端口号）

port

获取端口号，如果没有端口则返回空字符串。

console.log(window.location.port); // 打印端口号

pathname

获取路径部分，即域名之后和查询参数之前的部分。

console.log(window.location.pathname); // 打印路径部分

search

获取查询参数部分，即'?'后面到'#'前面的部分。

console.log(window.location.search); // 打印查询参数部分

hash

获取锚点部分，即'#'后面的部分。

console.log(window.location.hash); // 打印锚点部分

示例

示例1：解析查询参数

假设当前页面url为https://www.example.com/search?keyword=javascript&page=1#result，我们希望获取查询参数中关键词(keyword)和页数(page)。

let searchParams = new URLSearchParams(window.location.search);
// 获取关键词
let keyword = searchParams.get('keyword');
// 获取页数
let page = searchParams.get('page');
console.log(`关键词：${keyword}，页数：${page}`); // 打印：关键词：javascript，页数：1

示例2：拼接url

假设我们有一个搜索框和一个搜索按钮，用户输入关键字后点击搜索按钮，页面需要跳转到https://www.example.com/search?keyword=xxx&page=1#result，其中xxx是用户输入的关键字。

let searchInput = document.querySelector('#search-input');
let searchButton = document.querySelector('#search-button');
searchButton.addEventListener('click', function() {
  let keyword = searchInput.value;
  let url = `${window.location.protocol}//${window.location.host}/search?keyword=${keyword}&page=1#result`;
  window.location.href = url; // 跳转到新的url
});

以上就是“详解javascript获取url信息的常见方法”的完整攻略，希望对你有所帮助。