JS URL处理 Location对象

START

• 最近的需求，经常会遇到浏览器url参数截取的操作。
• 写一写笔记，把一些可以直CV的相关逻辑，记录一下。

location

说到浏览器url参数截取，那就不得不提一下location对象。

• Javascript就包含三大内容：（DOM,BOM,ECMA5）

• Location 就属于 BOM中顶级对象window下。

• Location 对象包含有关当前 URL 的信息。

• Location 对象是 Window 对象的一个部分，可通过 window.location 属性来访问。

常用的参数

属性	说明
href	声明了当前显示文档的完整 URL，与其他 location 属性只声明部分 URL 不同，把该属性设置为新的 URL 会使浏览器读取并显示新 URL 的内容
protocol	声明了 URL 的协议部分，包括后缀的冒号。例如：“http:”
host	声明了当前 URL 中的主机名和端口部分。例如：“www.123.cn:80”
hostname	声明了当前 URL 中的主机名。例如：“www.123.cn”
port	声明了当前 URL 的端口部分。例如：“80”
pathname	声明了当前 URL的路径部分。例如：“news/index.asp”
search	声明了当前 URL 的查询部分，包括前导问号。例如：“?id=123&name=location”
hash	声明了当前 URL 中锚部分，包括前导符（#）。例如：“#top”,指定在文档中锚记的名称

图例

1.png

常用代码总结

1.截取？后的参数，并处理为对象

 function generateQueryParam(queryUrl) {
    const query = {};
    queryUrl.split("&").map(item => {
      const tempArr = item.split("=");
      query[tempArr[0]] = tempArr[1];
    });
    return query;
  }
  
  // 使用方法
 if (window.location.href.indexOf("?") > -1) {
      const queryUrl = window.location.href.slice(
        window.location.href.indexOf("?") + 1
      );
}
 generateQueryParam(queryUrl);  // 这里 就是打印对应的？后面的参数

图例

2.jpg

2.在url中添加内容

 let start =reqUrl.indexOf("?")
 let JSESS="插入内容"
 reqUrl = reqUrl.slice(0, start) + JSESS + reqUrl.slice(start);

// 在问号后面插入一个字符串

3.直接获取url后面 ? 后面的url

location.href="https://cn.bing.com/search?q=lazy_tomato&qs=n"

location.search  // "?q=lazy_tomato&qs=n"