[前端JavaScript] 一文搞定URL路径、域名及路径参数的提取和解析现有一个URL：一、如何获取当前域名? （

现有一个URL：

https://stackblitz.com/edit/magiccard?file=main.js&terminal=dev

一、如何获取当前域名?

（1）

const currentDomain = document.domain; 
// 返回的结果：'stackblitz.com'

（2）

const currentDomain = window.location.host; 
// 返回的结果：'stackblitz.com'

二、如何获取当前 URL ？

（1）

const currentURL = window.location.href; 
// 返回的结果：'https://stackblitz.com/edit/magiccard?file=main.js&terminal=dev'

（2）

const currentURL = self.location.href; 
// 返回的结果：'https://stackblitz.com/edit/magiccard?file=main.js&terminal=dev'

（3）

const currentURL = document.URL; 
// 返回的结果：'https://stackblitz.com/edit/magiccard?file=main.js&terminal=dev'

（4）

const currentURL = document.location.pathname; 
// 返回的结果：'https://stackblitz.com/edit/magiccard?file=main.js&terminal=dev'

三、获取当前相对路径的方法

const relativePath = document.location.pathname;
// 返回的结果：'/edit/magiccard?file=main.js&terminal=dev'

四、获取当前Url参数的方法

（1）使用字符串的split()等方法拆分

const getURLParams = (url) => {
  const arrSearch = url.split('?').pop().split('#').shift().split('&');
  let obj = {};
  arrSearch.forEach((item) => {
    const [k, v] = item.split('=');
    obj[k] = v;
    return obj;
  });
  return obj;
};
const paramObj = getURLParams(document.URL)

// 返回的结果 paramObj：{file: "main.js", terminal: "dev"}

（2）使用 URL(), URLSearchParams() 类进行拆分

const getURLParams2 = (url) => {
  const u = new URL(url);
  const s = new URLSearchParams(u.search);
  const obj = {};
  s.forEach((v, k) => (obj[k] = v));
  return obj;
};
const paramObj = getURLParams2(document.URL)

// 返回的结果 paramObj：{file: "main.js", terminal: "dev"}

（3）用正则表达式提取

const getURLParams3 = (url) => {
  // 定义一个 parse url.search 的方法
  function parse(url) {
    const obj = {};
    url.replace(/([^?&=]+)=([^&]+)/g, (_, k, v) => (obj[k] = v));
    return obj;
  }
  url = url.split('#').shift();
  return parse(url);
};
const paramObj = getURLParams3(document.URL)

// 返回的结果 paramObj：{file: "main.js", terminal: "dev"}

参考文献：