javascript - Varför visas inte URL-parametern jag vill hämta helt?

Jag spårar URL:er med "posName"-parametrar som:

example.com?posName=Innehålls- & communitychef (H/F)

Men min kod returnerar bara "Content":

function () {
    var uri = document.location.href;
    var uri_dec = decodeURIComponent(uri);
    var url = new URL(uri_dec);
    var posName= url.searchParams.get("posName");
    return posName;
}

Hur kan jag få hela parametern?

REDIGERA: Jag har en annan URL som:

exemple.com?posName=Club+&+Animator+(H/F)

Och koden returnerar hela parametern... Så är det längden på parametern som orsakar detta problem?

Svar #1

Jag har ändrat din funktion för att ta emot URI:n som ett argument. Du behöver koda parametern innan du lägger till den i frågesträngen (vi kan inte se den här koden här). decodeURIComponent i din funktion är också inte nödvändig.

function getPosName (URI) {
    //var uri_dec = decodeURIComponent(uri);
    var url = new URL(URI);
    var posName = url.searchParams.get("posName");
  return posName;
}

console.log("Using your current URI:", getPosName("http://exemple.com?posName=Content+&+Community+Manager+(H/F)"))

const encodedParam = encodeURIComponent("Content & Community Manager (H/F)")
console.log("Encoded Parameter:", encodedParam)
const wellFormedURI = `http://exemple.com?posName=${encodedParam}`
console.log("Well Formed URI:", wellFormedURI)
console.log("Using well formed URI:", getPosName(wellFormedURI))

Svar #2

Om du av någon anledning inte har kontroll över vad som finns i window.location.href, kan du lösa detta ganska enkelt med regex:

function getPosName(uri) {
    let match = uri.match(/(?<=posName=)(.+?)(?=\&\w+?\=|$)/); 
    return match[1]; 
}

console.log(getPosName( "xemple.com?posName=Content+&+Community+Manager+(H/F)")); //Content+&+Community+Manager+(H/F)
console.log(getPosName( "exemple.com?posName=Club+&+Animator+(H/F)")); //Club+&+Animator+(H/F)
console.log(getPosName( "exemple.com?posName=Club+&+Animator+(H/F)&test=1")); // Club+&+Animator+(H/F)

Regex förklaring:

(?=postName=) lookbehind för att hitta postName= för att starta matchningen

(.+?) matchar allt fram till lookahead-mönstret nedan

(?=\&\w+?\=|$) lookahead-mönster för bokstavlig & följt av någon text av valfri längd från 1 och uppåt \w+? följt av =. Allt det, eller så är vi i slutet av indatasträngen, betecknat med $

Uppdatering

Regex-lookbehind är relativt nytt. Om webbläsaren eller appen inte stödjer regex-lookbehind (t.ex. Google Tag Manager för närvarande), prova istället denna lösning:

function getPosName(uri) {
    let match = uri.match(/posName=(.+?)(?=\&\w+?\=|$)/);
    return match[1];
}

console.log(getPosName( "xemple.com?posName=Content+&+Community+Manager+(H/F)")); //Content+&+Community+Manager+(H/F)
console.log(getPosName( "exemple.com?posName=Club+&+Animator+(H/F)")); //Club+&+Animator+(H/F)
console.log(getPosName( "exemple.com?posName=Club+&+Animator+(H/F)&test=1")); // Club+&+Animator+(H/F)