JavaScript获取URI

在前端开发中，JavaScript可以用于获取当前页面的URI（统一资源标识符）。URI 是用于在互联网上唯一标识和定位信息资源的字符串。可以通过URI获得页面的URL，查询参数，路径等信息。

下面是一些常用的方法和代码片段，用于获取和处理URI。

方法1：使用location对象

可以使用window.location对象来获取当前页面的URI信息。

// 获取当前页面的完整URL
const currentUrl = window.location.href;

// 获取当前页面的主机名
const hostname = window.location.hostname;

// 获取当前页面的路径
const path = window.location.pathname;

// 获取当前页面的查询参数
const searchParams = window.location.search;

// 获取当前页面的哈希值
const hash = window.location.hash;

// 获取当前页面的协议
const protocol = window.location.protocol;

方法2：使用URL对象

JavaScript中的URL对象提供了更多处理URI的功能，并且可以解析和构建URI。

// 创建URL对象
const url = new URL('https://www.example.com/path?param1=value1#hash');

// 获取主机名
const hostname = url.hostname;

// 获取路径
const path = url.pathname;

// 获取查询参数
const searchParams = url.search;

// 获取哈希值
const hash = url.hash;

// 获取协议
const protocol = url.protocol;

方法3：正则表达式匹配

还可以使用正则表达式匹配URI来提取所需的信息。

// 获取当前页面的完整URL
const currentUrl = window.location.href;

// 使用正则表达式提取主机名
const hostname = currentUrl.match(/^(?:https?:\/\/)?(?:[^@\/\n]+@)?(?:www\.)?([^:\/?\n]+)/)[1];

// 使用正则表达式提取路径
const path = currentUrl.match(/^(?:https?:\/\/)?[^\/\n]+(\/[^?#\n]*)/)[1];

// 使用正则表达式提取查询参数
const searchParams = currentUrl.match(/[\?&]([^=#]+)=([^&#]*)/g);

// 使用正则表达式提取哈希值
const hash = currentUrl.match(/#([^\/?\n]+)/)[1];

// 使用正则表达式提取协议
const protocol = currentUrl.match(/^([^:\/?\n]+)/)[1];

以上是一些常用的方法和代码片段，可以根据具体需求选择合适的方法来获取和处理URI。获取URI信息有助于开发人员在前端处理URL和解析查询参数等任务。