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

Question

所以我有一个 url 这种格式。 :

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

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

Answer 2

您可以使用 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)

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

Get query strings as an object after a url with hash

javascript

node.js

typescript

url

url-routing