Reactで、URLを分解してクエリを編集できる入力欄を作る方法

// URL の文字列を分解し、クエリを [名前, 値] の行の並びにする
export type Row = [name: string, value: string];

export type Parsed =
  | { ok: true; url: URL; rows: Row[] }
  | { ok: false };

export function parseUrl(text: string): Parsed {
  // URL.parse は、URL として読めない文字列なら例外を投げずに null を返す
  const url = URL.parse(text);
  if (url === null) return { ok: false };
  return { ok: true, url, rows: [...url.searchParams] };
}

// 行の並びからクエリを作り直し、ほかの部分はそのままにした URL を返す
export function withRows(url: URL, rows: Row[]): string {
  const next = new URL(url);
  next.search = new URLSearchParams(rows).toString();
  return next.href;
}

import { useId, useMemo, useState } from 'react';
import { parseUrl, withRows, type Row } from './urlQuery';

export function UrlEditor({ defaultUrl = '' }: { defaultUrl?: string }) {
  const id = useId();
  const [text, setText] = useState(defaultUrl);
  // 状態は URL の文字列だけ。分解した結果は、描画のたびに文字列から作る
  const parsed = useMemo(() => parseUrl(text), [text]);

  if (!parsed.ok) {
    return (
      <div className="url-editor">
        <label htmlFor={`${id}-url`}>URL</label>
        <input id={`${id}-url`} value={text} onChange={(e) => setText(e.target.value)} spellCheck={false} />
        <p role="alert">URL として読み取れません。https:// などから書いてください</p>
      </div>
    );
  }

  const { url, rows } = parsed;
  const update = (next: Row[]) => setText(withRows(url, next));
  const change = (i: number, col: 0 | 1, v: string) =>
    update(rows.map((r, j): Row => (j !== i ? r : col === 0 ? [v, r[1]] : [r[0], v])));

  return (
    <div className="url-editor">
      <label htmlFor={`${id}-url`}>URL</label>
      <input id={`${id}-url`} value={text} onChange={(e) => setText(e.target.value)} spellCheck={false} />
      <dl>
        <dt>プロトコル</dt><dd>{url.protocol}</dd>
        <dt>ホスト</dt><dd>{url.host}</dd>
        <dt>パス</dt><dd>{url.pathname}</dd>
        <dt>ハッシュ</dt><dd>{url.hash || '（なし）'}</dd>
      </dl>
      <table>
        <caption>クエリ</caption>
        <thead>
          <tr><th scope="col">名前</th><th scope="col">値</th><th /></tr>
        </thead>
        <tbody>
          {rows.map(([name, value], i) => (
            // 行は自分の状態を持たないので、並び順の番号を key にしている
            <tr key={i}>
              <td><input aria-label={`${i + 1}行目の名前`} value={name} onChange={(e) => change(i, 0, e.target.value)} /></td>
              <td><input aria-label={`${i + 1}行目の値`} value={value} onChange={(e) => change(i, 1, e.target.value)} /></td>
              <td>
                <button type="button" aria-label={`${i + 1}行目を消す`} onClick={() => update(rows.filter((_, j) => j !== i))}>
                  ×
                </button>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
      <button type="button" onClick={() => update([...rows, ['', '']])}>行を足す</button>
    </div>
  );
}

.url-editor {
  display: grid;
  gap: 6px;
  max-width: 600px;
}
.url-editor input {
  font: 1rem ui-monospace, monospace;
  padding: 6px 8px;
  min-width: 0;
}
.url-editor dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 12px;
  margin: 4px 0;
}
.url-editor dd {
  margin: 0;
  font-family: ui-monospace, monospace;
  overflow-wrap: anywhere;
}
.url-editor table {
  border-collapse: collapse;
  width: 100%;
}
.url-editor caption {
  text-align: left;
  font-weight: bold;
}
.url-editor td input {
  width: 100%;
  box-sizing: border-box;
}
.url-editor [role='alert'] {
  color: #d85878;
}

https://example.com/search?q=cat&page=2#results
https://example.com/search?q=cat&page=3#results
https://example.com/search?q=cat&page=3&=#results
https://example.com/search?q=cat&page=3&sort=new#results

同じ値の encodeURIComponent                      "%20~*'()"
URLSearchParams で ~*'()                      "q=+%7E*%27%28%29"