URL 编解码工具

URL 编码和解码转换工具

原始 URL

输入要编码的 URL

<div class="flex justify-between"><button class="inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground h-8 rounded-md px-3 text-xs" disabled="">清空</button><button class="inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground h-8 rounded-md px-3 text-xs" disabled=""><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy h-4 w-4 mr-1"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>复制</button></div></div></div><div class="rounded-xl border bg-card text-card-foreground shadow"><div class="flex flex-col space-y-1.5 p-6"><div class="font-semibold leading-none tracking-tight">编码选项</div><div class="text-sm text-muted-foreground">配置 URL 编解码的选项</div></div><div class="p-6 pt-0 space-y-4"><div class="flex items-center space-x-2"><button type="button" role="switch" aria-checked="true" data-state="checked" value="on" class="peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input" id="encode-components"><span data-state="checked" class="pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"/></button><input type="checkbox" aria-hidden="true" style="transform:translateX(-100%);pointer-events:none;opacity:0;margin:0" tabindex="-1" checked="" value="on"/><label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" for="encode-components">使用 encodeURIComponent</label></div><p class="text-xs text-muted-foreground">编码所有字符，包括 URL 分隔符（如 /, :, &）</p><div class="flex items-center space-x-2"><button type="button" role="switch" aria-checked="true" data-state="checked" value="on" class="peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input" id="preserve-special"><span data-state="checked" class="pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"/></button><input type="checkbox" aria-hidden="true" style="transform:translateX(-100%);pointer-events:none;opacity:0;margin:0" tabindex="-1" checked="" value="on"/><label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" for="preserve-special">保留 URL 特殊字符</label></div><button class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-primary-foreground shadow hover:bg-primary/90 h-9 px-4 py-2 w-full">编码 URL</button></div></div></div><div class="space-y-6"><div class="rounded-xl border bg-card text-card-foreground shadow"><div class="flex flex-col space-y-1.5 p-6"><div class="flex justify-between items-center"><div class="font-semibold leading-none tracking-tight flex items-center gap-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-link2 h-5 w-5"><path d="M9 17H7A5 5 0 0 1 7 7h2"/><path d="M15 7h2a5 5 0 1 1 0 10h-2"/><line x1="8" x2="16" y1="12" y2="12"/></svg>编码后的 URL</div><button class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 hover:bg-accent hover:text-accent-foreground h-9 w-9" disabled="" title="交换输入和输出"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-4 w-4 rotate-90"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg></button></div><div class="text-sm text-muted-foreground">编码结果</div></div><div class="p-6 pt-0 space-y-4"><textarea class="flex w-full rounded-md border border-input px-3 py-2 shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm font-mono text-sm min-h-[150px] bg-muted" readonly=""/><div class="flex justify-end"><button class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground h-9 px-4 py-2" disabled=""><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy h-4 w-4 mr-1"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>复制结果</button></div></div></div><div class="rounded-xl border bg-card text-card-foreground shadow"><div class="flex flex-col space-y-1.5 p-6"><div class="font-semibold leading-none tracking-tight">常见示例</div><div class="text-sm text-muted-foreground">点击使用预设的 URL 示例</div></div><div class="p-6 pt-0"><div class="space-y-3"><div class="p-3 border rounded-md hover:bg-muted/50 cursor-pointer transition-colors"><div class="font-medium mb-1">基本 URL</div><div class="text-xs text-muted-foreground mb-2">包含空格和基本参数的 URL</div><div class="text-xs font-mono bg-muted p-2 rounded overflow-x-auto">https://example.com/path?name=John Doe&age=25</div></div><div class="p-3 border rounded-md hover:bg-muted/50 cursor-pointer transition-colors"><div class="font-medium mb-1">特殊字符</div><div class="text-xs text-muted-foreground mb-2">包含加号、空格和中文字符的 URL</div><div class="text-xs font-mono bg-muted p-2 rounded overflow-x-auto">https://example.com/search?q=C++ Programming&category=编程</div></div><div class="p-3 border rounded-md hover:bg-muted/50 cursor-pointer transition-colors"><div class="font-medium mb-1">复杂查询参数</div><div class="text-xs text-muted-foreground mb-2">包含 JSON 数据的 URL</div><div class="text-xs font-mono bg-muted p-2 rounded overflow-x-auto">https://example.com/api?filter={"name":"John","age":30}</div></div></div></div></div></div></div></div></div></main></main></div><section aria-label="Notifications alt+T" tabindex="-1" aria-live="polite" aria-relevant="additions text" aria-atomic="false"/></div></body>