feat: url link matched (#49)

README.md

@@ -317,4 +317,21 @@ SearchParams.removeAll({ key: "foo" });
 // https://example.com/
 ```
 
+---
+
+#### urlLinkMatched
+
+Scan links and update, when `location.href` URL matched link's href.
+
+Example:
+
+```
+import { urlLinkMatched } from "@simboonlong/utility"
+
+urlLinkMatched({
+  links: document.querySelectorAll("a"),
+  callback: (link) => link.classList.add("active"),
+});
+```
+
 Author © [Sim Boon Long](https://simboonlong.com).

src/urlLinkMatched.ts

@@ -0,0 +1,16 @@
+interface UrlLinkMatched {
+  links: NodeListOf<HTMLAnchorElement>;
+  callback: (link: HTMLAnchorElement) => void;
+}
+
+export const urlLinkMatched = ({ links, callback }: UrlLinkMatched): void => {
+  links.forEach((link) => {
+    const href = link.getAttribute("href");
+    if (!href) throw new Error("href attribute not defined on anchor element");
+
+    const linkHref = new URL(href, document.baseURI).href;
+    if (location.href === linkHref) {
+      callback(link);
+    }
+  });
+};

test/urlLinkMatched.test.ts

@@ -0,0 +1,32 @@
+import { getByText } from "@testing-library/dom";
+import { urlLinkMatched } from "../src/urlLinkMatched";
+
+const getExampleDOM = () => {
+  const div = document.createElement("div");
+
+  const link1 = document.createElement("a");
+  link1.setAttribute("href", "./");
+  link1.innerHTML = "home";
+
+  const link2 = document.createElement("a");
+  link2.setAttribute("href", "./about");
+  link2.innerHTML = "about";
+
+  div.appendChild(link1);
+  div.appendChild(link2);
+
+  return div;
+};
+
+test("urlLinkMatch should add class correctly", async () => {
+  const className = "active";
+  const container = getExampleDOM();
+  // console.log(prettyDOM(container));
+
+  urlLinkMatched({
+    links: container.querySelectorAll("a"),
+    callback: (link) => link.classList.add(className),
+  });
+
+  expect(getByText(container, "home").getAttribute("class")).toBe(className);
+});