JavaScript实现一个在线URL编码解码、base65编码解码工具

admin · 发表于 2024-7-22 21:36:36

JavaScript实现一个在线URL编码解码、base65编码解码工具

url编码解码在开发调试的时候很常见，还有base64编码解码，都是日常开发使用的，因此需要借助一些工具快速实现编码解码。在很多编程语言都有url编码解码，base64编码解码的函数，本次使用的是javascript实现的编码解码功能。

代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>编码解码字符处理在线工具 - URL编码URL解码encodeURI解码encodeURIComponent解码URL参数分割Base64编码Base64解码</title>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.min.css">
<meta name="description" content="提供多种编码解码工具，包括URL编码、URL解码、encodeURI解码、encodeURIComponent解码、URL参数分割、Base64编码和Base64解码。帮助用户轻松转换和处理各种编码格式。">
<meta name="keywords" content="编码解码工具, URL编码, URL解码, encodeURI解码, encodeURIComponent解码, URL参数分割, Base64编码, Base64解码, 在线工具">
<meta name="robots" content="index, follow">
<meta property="og:title" content="在线编码解码工具">
<meta property="og:description" content="使用我们的工具轻松进行URL编码、URL解码、encodeURI解码、encodeURIComponent解码、URL参数分割、Base64编码和Base64解码。">
<meta property="og:image" content="">
<meta property="og:url" content="">
<meta property="og:type" content="website">
<meta name="author" content="">
<link rel="canonical" href="">
<link rel="icon" href="logo.jpg" type="image/x-icon">
<link rel="shortcut icon" href="logo.jpg" type="image/x-icon">
<style>
*{
padding: 0;
margin: 0;
font-family: "Segoe UI","Lucida Grande",Helvetica,Arial,"Microsoft YaHei",FreeSans,Arimo,"Droid Sans","wenquanyi micro hei","Hiragino Sans GB","Hiragino Sans GB W3",FontAwesome,sans-serif;
}
body {
padding: 20px;
background: #f2f3f3;
}
/*PC AND PAD*/
[url=home.php?mod=space&uid=945662]@media[/url] screen and (min-width: 640px) and (max-width: 2000px) {
.container {
margin: 30px auto;
width: 60%;
}
}
/*PHONE*/
@media screen and (max-width: 639px) {
.container {
margin: 30px auto;
width: 100%;
}
}
.text-center {
margin: 25px 0;
}
textarea {
resize: none;
overflow: hidden;
}
button {
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="container">
<h2 class="text-center">编码解码字符处理在线工具</h2>
<div class="mb-3">
<label for="inputText" class="form-label">输入文本:</label>
<textarea id="inputText" class="form-control" rows="8"></textarea>
</div>
<div class="mb-3 text-center">
<button id="encodeBtn" class="btn btn-primary me-2">URL 编码</button>
<button id="decodeURIBtn" class="btn btn-secondary me-2">encodeURI 解码</button>
<button id="decodeURIComponentBtn" class="btn btn-secondary me-2" title="对特殊符号解码">encodeURIComponent 解码</button>
<button id="splitParamsBtn" class="btn btn-secondary me-2">URL参数分割</button>
<button id="encodeBase64Btn" class="btn btn-success me-2">Base64 编码</button>
<button id="decodeBase64Btn" class="btn btn-warning">Base64 解码</button>
</div>
<div class="mb-3">
<label for="outputText" class="form-label">输出文本:</label>
<textarea id="outputText" class="form-control" rows="8" style="background: #eee;"></textarea>
</div>
<div class="text-center">
<button id="copyBtn" class="btn btn-secondary me-2">一键复制</button>
</div>
</div>
<script>
function autoResizeTextarea(textarea) {
textarea.style.height = 'auto';
textarea.style.height = textarea.scrollHeight + 'px';
}
document.getElementById('encodeBtn').addEventListener('click', function() {
const inputText = document.getElementById('inputText').value;
const encodedText = encodeURIComponent(inputText);
const outputTextarea = document.getElementById('outputText');
outputTextarea.value = encodedText;
autoResizeTextarea(outputTextarea);
});
document.getElementById('decodeURIBtn').addEventListener('click', function() {
const inputText = document.getElementById('inputText').value;
try {
const decodedText = decodeURI(inputText);
const outputTextarea = document.getElementById('outputText');
outputTextarea.value = decodedText;
autoResizeTextarea(outputTextarea);
} catch (e) {
alert('解码错误，请确保输入的编码类型正确。');
}
});
document.getElementById('decodeURIComponentBtn').addEventListener('click', function() {
const inputText = document.getElementById('inputText').value;
try {
const decodedText = decodeURIComponent(inputText);
const outputTextarea = document.getElementById('outputText');
outputTextarea.value = decodedText;
autoResizeTextarea(outputTextarea);
} catch (e) {
alert('解码错误，请确保输入的编码类型正确。');
}
});
document.getElementById('splitParamsBtn').addEventListener('click', function() {
const inputText = document.getElementById('inputText').value;
try {
let params;
if (inputText.includes('?')) {
const url = new URL(inputText);
params = new URLSearchParams(url.search);
} else {
params = new URLSearchParams(inputText);
}
let result = '';
params.forEach((value, key) => {
result += `${key}: ${value}\n`;
});
const outputTextarea = document.getElementById('outputText');
outputTextarea.value = result;
autoResizeTextarea(outputTextarea);
} catch (e) {
alert('请输入有效的URL或参数字符串。');
}
});
document.getElementById('encodeBase64Btn').addEventListener('click', function() {
const inputText = document.getElementById('inputText').value;
const encodedText = btoa(inputText);
const outputTextarea = document.getElementById('outputText');
outputTextarea.value = encodedText;
autoResizeTextarea(outputTextarea);
});
document.getElementById('decodeBase64Btn').addEventListener('click', function() {
const inputText = document.getElementById('inputText').value;
try {
const decodedText = atob(inputText);
const outputTextarea = document.getElementById('outputText');
outputTextarea.value = decodedText;
autoResizeTextarea(outputTextarea);
} catch (e) {
alert('解码错误，请确保输入的编码类型正确。');
}
});
document.getElementById('copyBtn').addEventListener('click', function() {
const outputText = document.getElementById('outputText');
outputText.select();
outputText.setSelectionRange(0, 99999); // 对移动设备的兼容
navigator.clipboard.writeText(outputText.value).then(() => {
const copyBtn = document.getElementById('copyBtn');
const originalText = copyBtn.textContent;
copyBtn.textContent = '已复制';
setTimeout(() => {
copyBtn.textContent = originalText;
}, 2000);
}).catch(err => {
alert('复制失败，请手动复制');
});
});
document.getElementById('outputText').addEventListener('input', function() {
autoResizeTextarea(this);
});
window.addEventListener('load', function() {
document.querySelectorAll('textarea').forEach(autoResizeTextarea);
});
</script>
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>
</body>
</html>

复制代码

金黑分享，直接拿走

		自动登录	找回密码
密码			立即注册

[Javascript] JavaScript实现一个在线URL编码解码、base65编码解码工具

相关帖子