Робота з URL та параметрами

const address = new URL(
  "https://example.com:8080/products/42?category=books&sort=price#reviews"
);

console.log(address.protocol); // "https:"
console.log(address.hostname); // "example.com"
console.log(address.port);     // "8080"
console.log(address.pathname); // "/products/42"
console.log(address.search);   // "?category=books&sort=price"
console.log(address.hash);     // "#reviews"
console.log(address.href);     // повний URL

console.log(address.host); // "example.com:8080"

console.log(address.origin); // "https://example.com:8080"

const absoluteUrl = new URL("https://example.com/catalog");

const productUrl = new URL("/products/42", "https://example.com");

console.log(productUrl.href); // "https://example.com/products/42"

const imageUrl = new URL("images/logo.svg", "https://example.com/assets/");

console.log(imageUrl.href); // "https://example.com/assets/images/logo.svg"

// const invalidUrl = new URL("/products/42"); // TypeError

/products?category=books&sort=price&page=2

const url = new URL(
  "https://example.com/products?category=books&sort=price&page=2"
);

const params = url.searchParams;

console.log(params.get("category")); // "books"
console.log(params.get("sort"));     // "price"
console.log(params.get("page"));     // "2"

const page = Number(params.get("page"));

console.log(page + 1); // 3

const url = new URL("https://example.com/products?page=2");

console.log(url.searchParams.has("page"));     // true
console.log(url.searchParams.has("category")); // false

const url = new URL("https://example.com/search?q=");

console.log(url.searchParams.has("q")); // true
console.log(url.searchParams.get("q")); // ""

const url = new URL("https://example.com/products");

const page = Number(url.searchParams.get("page") ?? "1");
const sort = url.searchParams.get("sort") ?? "popular";

console.log(page); // 1
console.log(sort); // "popular"

const url = new URL("https://example.com/products");

url.searchParams.set("category", "books");
url.searchParams.set("page", "2");

console.log(url.href);
// https://example.com/products?category=books&page=2

const url = new URL("https://example.com/products?page=1");

url.searchParams.set("page", "2");

console.log(url.search); // "?page=2"

const params = new URLSearchParams();

params.append("tag", "javascript");
params.append("tag", "browser");

console.log(params.toString());
// "tag=javascript&tag=browser"

const url = new URL(
  "https://example.com/products?category=books&page=2"
);

url.searchParams.delete("page");

console.log(url.href);
// https://example.com/products?category=books

const url = new URL(
  "https://example.com/products?tag=javascript&tag=browser"
);

console.log(url.searchParams.get("tag")); // "javascript"
console.log(url.searchParams.getAll("tag")); // ["javascript", "browser"]

const params = new URLSearchParams(
  "category=books&page=2&tag=javascript&tag=browser"
);

for (const [name, value] of params) {
  console.log(`${name}: ${value}`);
}

category: books
page: 2
tag: javascript
tag: browser

const params = new URLSearchParams("page=2&sort=price");

console.log([...params.keys()]);   // ["page", "sort"]
console.log([...params.values()]); // ["2", "price"]
console.log([...params.entries()]);
// [["page", "2"], ["sort", "price"]]

const params = new URLSearchParams("sort=price&category=books");

params.sort();

console.log(params.toString());
// "category=books&sort=price"

const params = new URLSearchParams();

params.set("query", "JavaScript у браузері");
params.set("symbol", "a & b");

console.log(params.toString());
// query=JavaScript+%D1%83+%D0%B1%D1%80%D0%B0%D1%83%D0%B7%D0%B5%D1%80%D1%96&symbol=a+%26+b

console.log(params.get("query"));  // "JavaScript у браузері"
console.log(params.get("symbol")); // "a & b"

const url = new URL("https://example.com/search");

url.searchParams.set("q", "ноутбук 15 дюймів");

console.log(url.href);
// URL містить безпечно закодоване значення параметра

console.log(window.location.href);     // повна адреса
console.log(window.location.pathname); // шлях
console.log(window.location.search);   // параметри із символом ?
console.log(window.location.hash);      // фрагмент із символом #

const currentUrl = new URL(window.location.href);

const query = currentUrl.searchParams.get("q");
const section = currentUrl.hash.slice(1);

console.log(query);
console.log(section);

const currentUrl = new URL(window.location);

console.log(currentUrl.href);

/products?category=books&page=2&inStock=true

const url = new URL(window.location.href);
const params = url.searchParams;

const filters = {
  category: params.get("category") ?? "all",
  page: Number(params.get("page") ?? "1"),
  inStock: params.get("inStock") === "true",
};

console.log(filters);
// { category: "books", page: 2, inStock: true }

console.log(Boolean("false")); // true

const inStock = params.get("inStock") === "true";

https://example.com/docs#installation

const url = new URL("https://example.com/docs#installation");

console.log(url.hash); // "#installation"

const fragment = url.hash.slice(1);

console.log(fragment); // "installation"

<h2 id="installation">Встановлення</h2>

https://example.com/docs#installation

window.addEventListener("hashchange", () => {
  const section = window.location.hash.slice(1);

  console.log(`Активний розділ: ${section}`);
});

window.location.hash = "reviews";

https://example.com/product#reviews

const url = new URL(window.location.href);

url.searchParams.set("page", "2");

history.pushState({}, "", url);

console.log(window.location.href);

const url = new URL(window.location.href);

url.searchParams.set("sort", "price");

history.replaceState({}, "", url);

<!doctype html>
<html lang="uk">
  <head>
    <meta charset="UTF-8">
    <title>Пошук</title>
  </head>
  <body>
    <form id="search-form">
      <label>
        Пошук:
        <input id="search-input" name="q" type="search">
      </label>

      <button type="submit">Знайти</button>
      <button id="clear-button" type="button">Очистити</button>
    </form>

    <p id="status"></p>

    <script>
      const form = document.querySelector("#search-form");
      const input = document.querySelector("#search-input");
      const clearButton = document.querySelector("#clear-button");
      const status = document.querySelector("#status");

      function readSearchFromUrl() {
        const url = new URL(window.location.href);
        const query = url.searchParams.get("q") ?? "";

        input.value = query;
        status.textContent = query
          ? `Результати для: ${query}`
          : "Введіть пошуковий запит";
      }

      form.addEventListener("submit", (event) => {
        event.preventDefault();

        const url = new URL(window.location.href);
        const query = input.value.trim();

        if (query) {
          url.searchParams.set("q", query);
        } else {
          url.searchParams.delete("q");
        }

        history.pushState({}, "", url);
        readSearchFromUrl();
      });

      clearButton.addEventListener("click", () => {
        input.value = "";

        const url = new URL(window.location.href);
        url.searchParams.delete("q");

        history.pushState({}, "", url);
        readSearchFromUrl();
      });

      window.addEventListener("popstate", readSearchFromUrl);

      readSearchFromUrl();
    </script>
  </body>
</html>

const params = new URLSearchParams({
  category: "books",
  page: "2",
  sort: "price",
});

console.log(params.toString());
// "category=books&page=2&sort=price"

const params = new URLSearchParams({
  q: "frontend",
  page: "1",
});

const url = `https://example.com/search?${params}`;

console.log(url);
// https://example.com/search?q=frontend&page=1

const params = new URLSearchParams({
  tags: ["javascript", "browser"],
});

console.log(params.toString());
// "tags=javascript%2Cbrowser"

const params = new URLSearchParams();

for (const tag of ["javascript", "browser"]) {
  params.append("tag", tag);
}

console.log(params.toString());
// "tag=javascript&tag=browser"

const url = new URL("https://example.com/search");
url.searchParams.set("q", "a & b");

console.log(url.href);

function isSafeHttpUrl(value) {
  try {
    const url = new URL(value);

    return url.protocol === "http:" || url.protocol === "https:";
  } catch {
    return false;
  }
}

console.log(isSafeHttpUrl("https://example.com")); // true
console.log(isSafeHttpUrl("javascript:alert(1)")); // false

// Поганий варіант
const query = "JavaScript у браузері";
const url = "/search?q=" + query;

const params = new URLSearchParams();
params.set("q", "JavaScript у браузері");

const url = `/search?${params}`;
console.log(url);

const url = new URL("https://example.com/products?page=2");

const page = url.searchParams.get("page");

console.log(page + 1); // "21"

const page = Number(url.searchParams.get("page"));
console.log(page + 1); // 3

const params = new URLSearchParams("tag=js&tag=css");

console.log(params.get("tag")); // "js"

console.log(params.getAll("tag")); // ["js", "css"]

const url = new URL("https://example.com/page?q=test#top");

console.log(url.search); // "?q=test"
console.log(url.hash);   // "#top"

const fragment = url.hash.slice(1);
console.log(fragment); // "top"