在带有哈希的 url 之后获取查询字符串作为对象

Question

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

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

我知道如何获取普通 url 的查询字符串，但我无法获取 # 之后的查询字符串

我使用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" 但是我怎样才能以动态方式获取查询字符串，因为查询字符串可能会或可能不会一直存在，而我没有也知道它们的名称，我怎样才能得到任何可能出现在 url 中 # 之后的查询字符串？

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

使用SearchParams

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"`));