xxxxxxxxxx
// Get URL parameters using URLSearchParams
const params = new URLSearchParams(window.location.search);
const paramValue = params.get('paramName');
console.log(paramValue); // The value of 'paramName' parameter
// Set URL parameter
params.set('anotherParam', 'exampleValue');
const newUrl = window.location.origin + window.location.pathname + '?' + params.toString();
console.log(newUrl); // New URL with the added parameter
xxxxxxxxxx
const url = new URL(window.location.href);
const parameterValue = url.searchParams.get('pramaName');
console.log(parameterValue);
// another method
let url = "https://example.com?param1=value1¶m2=value2";
let params = new URLSearchParams(url);
console.log(params.get("param1")); // "value1"
console.log(params.get("param2")); // "value2"
xxxxxxxxxx
let url = new URL("https://www.codegrepper.com?s=cool+beans&user_id=4");
let urlParams = new URLSearchParams(url.search);
console.log(urlParams.get('s'));//cool beans
console.log(urlParams.get('user_id'));//4
xxxxxxxxxx
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const code = urlParams.get('code')
xxxxxxxxxx
<!-- Include Bootstrap via CDN -->
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
xxxxxxxxxx
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
xxxxxxxxxx
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
xxxxxxxxxx
const params = new URLSearchParams(window.location.search);
const something = decodeURIComponent(params.get('hi'));
// or shorter, no need to use variables
decodeURIComponent((new URLSearchParams(window.location.search)).get('hi'))
xxxxxxxxxx
// EXAMPLE URL: http://localhost:5500/feed?id=4567825&search=kittens
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const id = urlParams.get('id'); // result: 4567825
const search = urlParams.get("search") // result: "kittens"
xxxxxxxxxx
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
xxxxxxxxxx
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>