What is difference between 'url.searchParams' and 'URLSearchParams' in Node.js?

Question

What is the main difference between URLSearchParams() and url.searchParams?

How are these different?

var searchParams = new URLSearchParams("q=URLUtils.searchParams&topic=api");

url = new URL(document.URL);

urlsrchprm = url.searchParams;

Answer 1

Until now, I believed that both were identical, and documents also indicated the same. However, there is a slight distinction in how they are accessed. One utilizes the URL object, while the other is a standalone class.

In this context, url.searchParams lacks access to parameters after the hash, whereas URLSearchParams can access them, allowing you to retrieve the values of those parameters.

This discrepancy may be a bug, as url.searchParams is of type URLSearchParams, but the output is entirely different.

You can verify this in the code snippet below.

const myURL = "https://my313815.host.com/ui?ui-version=untested&ui-debug=ui/generic/#so-a&/C_ARPostingRule(PostingRuleUUID=guid'abcd',IsActiveEntity=true)/?hasparam1=AS0REUAY6MZ32TWR56I6U7S8V53EKRGCKDHOW3VB&ui-xx-cardTitle=ManagePurchaseOrder&hashparam2=TASCRXFQ1JKDTO58DTIFMZOQQED762V9Y46X0F5UV";

const url = new URL(myURL);
const urlSearchParam = new URLSearchParams(myURL);

const hasCardTitleInUrl = url.searchParams.has('ui-xx-cardTitle');
const hasCardTitleInUrlSearchParam = urlSearchParam.has('ui-xx-cardTitle');

console.log('ui-xx-cardTitle:', hasCardTitleInUrl);
console.log('ui-xx-cardTitle:', hasCardTitleInUrlSearchParam);