热衷于从包含哈希的 url 中以对象形式获取搜索参数？

Question

所以我有一个这种格式的网址：

https://my-app.com/my-route/someOtherRoute#register?param1="122"&param2="333"

我知道如何获取普通网址的查询字符串，但我无法获取

#

之后的查询字符串

我使用 node-url 并且到目前为止我已经做到了：

import * as urlTool from 'url'
const url = `https://my-app.com/my-route/someOtherRoute#register?param1="122"&param2="333"`
const parsedUrl = urlTool.parse(url, true)
const { pathName, hash } = parsedUrl

所以到目前为止，我的

hash

有这个值

#register?param1="122"&param2="333"

但是我怎样才能以动态的方式获取查询字符串呢？查询字符串可能一直存在，也可能不存在，而且我也不知道它们的名称，我怎样才能获取网址中

#

之后的任何查询字符串？

Answer 1

您可以使用

split

和

Object.fromEntries

与

URLSearchParams

将查询参数提取到对象中：

const url = `https://my-app.com/my-route/someOtherRoute#register?param1="122"&param2="333"`

const [hash, query] = url.split('#')[1].split('?')
const params = Object.fromEntries(new URLSearchParams(query))

console.log(hash)
console.log(params)

Answer 2

使用搜索参数

var url = `https://my-app.com/my-route/someOtherRoute#register?param1="122"&param2="333"`;
console.log(new URL(`https://1.com?${url.split("?")[1]}`).searchParams.get("param1"));

使用 String#split 和 Array#reduce

构建对象

var url = `https://my-app.com/my-route/someOtherRoute#register?param1="122"&param2="333"`;
console.log(url.split("?")[1].split("&").reduce(function(result, param) {
  var [key, value] = param.split("=");
  result[key] = value;
  return result;
}, {}));

认为写这样的东西会更安全：

function getParamsAfterHash(url) {
  if (typeof url !== "string" || !url) url = location.href;
  url = url.split("#")[1];
  if (!url) return {};
  url = url.split("?")[1];
  if (!url) return {};
  return url.split("&").reduce(function(result, param) {
    var [key, value] = param.split("=");
    result[key] = value;
    return result;
  }, {});
}

console.log(getParamsAfterHash(`https://my-app.com/my-route/someOtherRoute#register?param1="122"&param2="333"`));