URL transformation in Chrome javascript bookmarklet showing "undefined"-CodePudding

I'm trying to create a Chrome bookmarklet that will take a part of the pathname from one URL and navigate to a new URL using that variable as a parameter (the variable is 1234567 in the example below).

From: 'https://example.com/reporting-dashboard/#/dashboard/1234567?pageId=Page_3a7c73c6-34c9-4ab3-8d1f-5bd437c07115'

To: 'https://example.com/tool/permissions/resources?namespace=1234567'

The hostname differs depending on the environment I'm working in but will always stay the same when I transform it with the bookmarklet so I'm trying to pull that info when I compose the new URL. This is what I've got so far, but I keep getting "undefined" in the transformed URL (below) when I run the code. Any ideas on what I've got wrong here?

'https://example.com/tool/permissions/resources?namespace=undefined'

My code:

//Sample URL: https://example.com/reporting-dashboard/#/dashboard/1234567?pageId=Page_3a7c73c6-34c9-4ab3-8d1f-5bd437c07115

var pathArray = location.pathname.split('/');

let secondLevelLocation = pathArray[3];

var newUrl = location.protocol   '//'   location.hostname   '/tool/permissions/resources?namespace='   secondLevelLocation;

var w=window.open();w.location=newUrl;w.document.close();

CodePudding user response：

In the code you've shown, there is an assumption that the URL hash (fragment identifier) will be included when accessing the pathname:

//Sample URL: https://example.com/reporting-dashboard/#/dashboard/1234567?pageId=Page_3a7c73c6-34c9-4ab3-8d1f-5bd437c07115

var pathArray = location.pathname.split('/');

let secondLevelLocation = pathArray[3];

This is where the problem occurs. In a URL, the pathname ends when one of the following characters are first encountered:

? (which begins the query string), or
# (which begins the fragment identifier)

The format of the hash / fragment identifier portion of the URL in your example is that of a fully-resolved URL without the origin (starting at the pathname).

Using this knowledge, you can use the native URL class to help you select the desired part of the input URL, then use it again to construct the target URL, as shown in the code below. Once you have the target URL, you can use it to navigate, etc.

function parseNamespace (url) {
  const fragment = url.hash.slice(1);
  if (!fragment.startsWith('/')) throw new Error('Path fragment not found');
  url = new URL(fragment, url);
  const namespace = url.pathname.split('/').at(-1);
  return namespace;
}

function createUrl (address = window.location.href) {
  let url = new URL(address);
  const namespace = parseNamespace(url);
  const pathname = '/tool/permissions/resources';
  url = new URL(pathname, url.origin);
  url.searchParams.set('namespace', namespace);
  return url;
}

const url = createUrl('https://example.com/reporting-dashboard/#/dashboard/1234567?pageId=Page_3a7c73c6-34c9-4ab3-8d1f-5bd437c07115');
// You can omit the argument when you want to get the address from the current document:
// const url = createUrl();

console.log(url.href); // "https://example.com/tool/permissions/resources?namespace=1234567"