在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中#之后的任何查询字符串？

- Emad Dehnavi

---

你不能只是在 ? 上分割并使用 URLSearchParams 吗？ URL 中任何关于 ? 的引用都表示查询参数，因此您不必担心 URL 的结构。 - Kobe

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)

- Kobe

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

- nick zoum

---

很好，我不知道你可以直接从URL对象获取URLSearchParams对象。 - Kobe