從 URL 獲取完整參數值的方法

Question

我正在嘗試從 URL 中的參數獲取數據

http://localhost:8080?test=1&redirectURL=http://localhost:8082/#/abc?param=1

我做了

const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const redirectURL = urlParams.get('redirectURL'); // result: http://localhost:8082

but currently, the URL contain the hash code inside URL so the value return just http://localhost:8082

有沒有辦法通過獲取參數 redirectURL 來獲得完整的 url http://localhost:8082/#/abc?param=1

非常感謝

Answer 1

我希望以下內容對您有用。

var url_string = window.location.href;
var url = new URL(url_string);
var paramsTest = url.searchParams.get("test");
var paramsRedirectURL = url.searchParams.get("redirectURL");

console.log(paramsRedirectURL)
console.log(paramsTest)

此處示例： https://codepen.io/yasgo/pen/dypWKoM

Answer 2

也許這對你有用

  var afterHash = window.location.hash;
        var beforeHash = window.location.href;
         var fullURL = beforeHash ;
         if(afterHash  != '') // if there is something after hash and hash is exists in url then add the afterHash value in full url
       {
         var fullURL = beforeHash +"#"+ afterHash ;
        }
        
         console.log(fullURL);

Answer 3

我認為這里最大的問題是您的redirectURL未編碼。 它應該在它最終進入 URL 之前進行編碼，因為否則來自嵌套 URL 的參數和哈希將溢出到父 ZE6B391A8D2C4D459702A23A8B6558 中。

我顯然不知道這對您的項目是否有意義，但我想我會使用domurl 。

也許您應該稍后使用encodeURIComponent和可能decodeURIComponent ，但我想指出 domurl 自動處理編碼和解碼。 舉個例子：

var url = new Url("http://localhost:8080?test=1");
url.query.redirectURL = 'http://localhost:8082/#/abc?param=1';
console.log( url.toString() );
// http://localhost:8080/?test=1&redirectURL=http%3A%2F%2Flocalhost%3A8082%2F%23%2Fabc%3Fparam%3D1

So again, what the encoded URL does is it prevents params from spilling from the nested URL to the parent URL and enables you to read redirectURL as a single string that you can then parse again to see/edit whatever params it has. 另一個重要的一點是，我正在使用replace('/#/','/')刪除主題標簽，以便從redirectURL讀取參數：

這是一個更苗條的jsfiddle ，我只是提取參數並將其他所有內容排除在外。

您肯定會想要檢查開發工具 consode 日志，而不是查看 stackoverflow 提供的日志，以了解這些對象。

 console.log(''); // I'm encoding the redirectURL here, but in the real world it should be encoded before it's added as a parameter. var url = new Url("http://localhost:8080?test=1&redirectURL="+ encodeURIComponent("http://localhost:8082/#/abc?param=1")); console.log('url', url); // So now that I've separated `url.query.redirectURL`, I can read that URL and its params separately... var redirectUrl = new Url( url.query.redirectURL.replace('/#/', '/') ); // The hashtag is removed console.log('redirectUrl:', redirectUrl ); console.log('redirectUrl - (param):', redirectUrl.query.param ); console.log('redirectUrl - path:', redirectUrl.path ); // If you need to use redirectURL without modifications you can just take the url param as is: console.log( 'redirectUrl - no edits:', url.query.redirectURL ); // If you need to edit the params, you could do that and put just back the hashtag redirectUrl.query.param = 'changed the param'; redirectUrl.path = '/#' + redirectUrl.path console.log('redirectUrl - edited:', redirectUrl.toString() );

 <script src="https://cdn.jsdelivr.net/npm/domurl@2.3.4/url.min.js"></script>