URL.parse() vs new URL() — safe URL parsing

<header class="pg-header">
  <h1>URL.parse() vs new URL()</h1>
  <p class="pg-subtitle">Type any URL — or pick a preset — to see what each API returns.</p>
</header>

<main class="pg-main">
  <section class="pg-panel">
    <div class="input-row">
      <input id="url-input" type="text" placeholder="https://example.com/path?q=1" value="https://example.com/path?q=1" autocomplete="off" spellcheck="false" />
    </div>
    <div class="base-row">
      <label>base URL (optional):</label>
      <input id="base-input" type="text" placeholder="e.g. https://example.com" value="" autocomplete="off" spellcheck="false" />
    </div>
    <div class="presets">
      <button data-url="https://example.com/path?q=1" data-base="">✓ valid absolute</button>
      <button data-url="not a url" data-base="">✗ invalid</button>
      <button data-url="/about" data-base="https://example.com">✓ relative + base</button>
      <button data-url="../images/photo.jpg" data-base="https://cdn.example.com/assets/v2/">✓ relative path</button>
      <button data-url="javascript:alert(1)" data-base="">⚠ javascript: scheme</button>
      <button data-url="::bad::" data-base="">✗ malformed</button>
      <button data-url="mailto:hello@example.com" data-base="">✓ mailto:</button>
      <button data-url="" data-base="">✗ empty string</button>
    </div>
  </section>

<section class="pg-panel" style="margin-top:16px;">
    <h2 class="pg-section-title">The key difference</h2>
    <table class="props-table">
      <tr>
        <td><code>new URL()</code></td>
        <td>Throws <code>TypeError</code> on invalid input. Correct when <em>you</em> control the string — the exception is a programmer-error signal.</td>
      </tr>
      <tr>
        <td><code>URL.canParse()</code></td>
        <td>Returns <code>true</code>/<code>false</code>. Use when you only need validity, not the URL object — no allocation.</td>
      </tr>
      <tr>
        <td><code>URL.parse()</code></td>
        <td>Returns a <code>URL</code> instance or <code>null</code>. Replaces every <code>safeParseURL()</code> wrapper.</td>
      </tr>
    </table>
  </section>
</main>

preview

Edits run in a sandbox in your browser — nothing is saved and nothing leaves the page.