Creation chat
ClarkZhang
create a convertor to convert bettween: Unicode、UTF-8、UTF-16、URL、Base64、MD5、Hex
02-25 09:08
暂无回复
No comments yet
登录 后可以评论
Assistant
(HTML code has been generated and updated; see above for the current version.)
This text encoding converter allows you to convert text between multiple formats:
1. **Unicode** - Shows Unicode code points for each character
2. **UTF-8** - Displays UTF-8 byte representation in hexadecimal
3. **UTF-16** - Shows UTF-16 code units in hexadecimal
4. **URL** - URL-encoded version of the text
5. **Base64** - Base64-encoded representation
6. **MD5** - MD5 hash of the text
7. **Hex** - Hexadecimal representation of each character
Features:
- Real-time conversion with debounce
- Copy-to-clipboard functionality for each output
- Dark/light mode toggle with localStorage persistence
- Responsive design that works on mobile and desktop
- Clear all fields button
- Sample text pre-loaded for demonstration
- Console logging for debugging purposes
To use:
1. Enter text in the input field
2. Click "Convert All" or wait for auto-conversion
3. Copy any output using the copy buttons
4. Use "Clear All" to reset fields
The converter works completely offline in your browser using JavaScript's built-in encoding functions and the CryptoJS library for MD5 hashing. All data remains in your browser and is not sent to any server.
▼ Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Encoding Converter</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>tailwind.config = { darkMode: 'class' }</script>
<!-- CryptoJS for MD5 hashing -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
</head>
<body class="min-h-screen bg-slate-50 dark:bg-slate-900 text-slate-700 dark:text-slate-200">
<!-- Theme toggle button -->
<button id="theme-toggle-btn" class="fixed top-4 right-4 z-10 p-2 rounded-md hover:bg-gray-200 dark:hover:bg-grayry-700 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 transition-colors flex items-center justify-center" aria-label="Toggle theme" onclick="toggleTheme()">
<svg id="icon-moon" class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998z"/></svg>
<svg id="icon-sun" class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24" aria-hidden="true" style="display:none"><circle cx="12" cy="12" r="4"></circle><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"></path></svg>
</button>
<script>
function toggleTheme(){ var el=document.documentElement; var isDark=!el.classList.contains('dark'); el.classList.toggle('dark',isDark); localStorage.setItem('theme',isDark?'dark':'light'); applyTheme(isDark); }
function applyTheme(isDark){ document.getElementById('icon-moon').style.display=isDark?'none':'block'; document.getElementById('icon-sun').style.display=isDark?'block':'none'; }
document.addEventListener('DOMContentLoaded',function(){ var saved=localStorage.getItem('theme'); var isDark=saved==='dark'||(!saved&&window.matchMedia('(prefers-color-scheme: dark)').matches); document.documentElement.classList.toggle('dark',isDark); applyTheme(isDark); });
</script>
<div class="container mx-auto px-4 py-8 max-w-4xl">
<header class="text-center mb-10">
<h1 class="text-3xl md:text-4xl font-bold text-slate-900 dark:text-slate-100 mb-2">Text Encoding Converter</h1>
<p class="text-lg text-slate-600 dark:text-slate-300">Convert between Unicode, UTF-8, UTF-16, URL, Base64, MD5, and Hex</p>
</header>
<main>
<div class="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6 mb-8">
<div class="mb-6">
<label for="input-text" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Input Text</label>
<textarea
id="input-text"
class="w-full h-32 px-4 py-3 rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 text-slate-900 dark:text-slate-100 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 resize-none"
placeholder="Enter text to convert..."
></textarea>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Unicode Section -->
<div class="bg-slate-50 dark:bg-slate-700/50 rounded-lg p-4">
<h3 class="font-semibold text-slate-900 dark:text-slate-100 mb-2">Unicode</h3>
<div class="flex items-center space-x-2">
<input
type="text"
id="unicode-output"
readonly
class="flex-1 px-3 py-2 rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 text-slate-900 dark:text-slate-100"
>
<button onclick="copyToClipboard('unicode-output')" class="p-2 rounded-lg bg-slate-200 dark:bg-slate-600 hover:bg-slate-300 dark:hover:bg-slate-500 transition-colors">
<svg class="w-5 h-5 text-slate-700 dark:text-slate-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg>
</button>
</div>
</div>
<!-- UTF-8 Section -->
<div class="bg-slate-50 dark:bg-slate-700/50 rounded-lg p-4">
<h3 class="font-semibold text-slate-900 dark:text-slate-100 mb-2">UTF-8</h3>
<div class="flex items-center space-x-2">
<input
type="text"
id="utf8-output"
readonly
class="flex-1 px-3 py-2 rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 text-slate-900 dark:text-slate-100"
>
<button onclick="copyToClipboard('utf8-output')" class="p-2 rounded-lg bg-slate-200 dark:bg-slate-600 hover:bg-slate-300 dark:hover:bg-slate-500 transition-colors">
<svg class="w-5 h-5 text-slate-700 dark:text-slate-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg>
</button>
</div>
</div>
<!-- UTF-16 Section -->
<div class="bg-slate-50 dark:bg-slate-700/50 rounded-lg p-4">
<h3 class="font-semibold text-slate-900 dark:text-slate-100 mb-2">UTF-16</h3>
<div class="flex items-center space-x-2">
<input
type="text"
id="utf16-output"
readonly
class="flex-1 px-3 py-2 rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 text-slate-900 dark:text-slate-100"
>
<button onclick="copyToClipboard('utf16-output')" class="p-2 rounded-lg bg-slate-200 dark:bg-slate-600 hover:bg-slate-300 dark:hover:bg-slate-500 transition-colors">
<svg class="w-5 h-5 text-slate-700 dark:text-slate-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg>
</button>
</div>
</div>
<!-- URL Section -->
<div class="bg-slate-50 dark:bg-slate-700/50 rounded-lg p-4">
<h3 class="font-semibold text-slate-900 dark:text-slate-100 mb-2">URL Encoded</h3>
<div class="flex items-center space-x-2">
<input
type="text"
id="url-output"
readonly
class="flex-1 px-3 py-2 rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 text-slate-900 dark:text-slate-100"
>
<button onclick="copyToClipboard('url-output')" class="p-2 rounded-lg bg-slate-200 dark:bg-slate-600 hover:bg-slate-300 dark:hover:bg-slate-500 transition-colors">
<svg class="w-5 h-5 text-slate-700 dark:text-slate-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg>
</button>
</div>
</div>
<!-- Base64 Section -->
<div class="bg-slate-50 dark:bg-slate-700/50 rounded-lg p-4">
<h3 class="font-semibold text-slate-900 dark:text-slate-100 mb-2">Base64</h3>
<div class="flex items-center space-x-2">
<input
type="text"
id="base64-output"
readonly
class="flex-1 px-3 py-2 rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 text-slate-900 dark:text-slate-100"
>
<button onclick="copyToClipboard('base64-output')" class="p-2 rounded-lg bg-slate-200 dark:bg-slate-600 hover:bg-slate-300 dark:hover:bg-slate-500 transition-colors">
<svg class="w-5 h-5 text-slate-700 dark:text-slate-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg>
</button>
</div>
</div>
<!-- MD5 Section -->
<div class="bg-slate-50 dark:bg-slate-700/50 rounded-lg p-4">
<h3 class="font-semibold text-slate-900 dark:text-slate-100 mb-2">MD5 Hash</h3>
<div class="flex items-center space-x-2">
<input
type="text"
id="md5-output"
readonly
class="flex-1 px-3 py-2 rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 text-slate-900 dark:text-slate-100"
>
<button onclick="copyToClipboard('md5-output')" class="p-2 rounded-lg bg-slate-200 dark:bg-slate-600 hover:bg-slate-300 dark:hover:bg-slate-500 transition-colors">
<svg class="w-5 h-5 text-slate-700 dark:text-slate-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg>
</button>
</div>
</div>
<!-- Hex Section -->
<div class="bg-slate-50 dark:bg-slate-700/50 rounded-lg p-4">
<h3 class="font-semibold text-slate-900 dark:text-slate-100 mb-2">Hexadecimal</h3>
<div class="flex items-center space-x-2">
<input
type="text"
id="hex-output"
readonly
class="flex-1 px-3 py-2 rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 text-slate-900 dark:text-slate-100"
>
<button onclick="copyToClipboard('hex-output')" class="p-2 rounded-lg bg-slate-200 dark:bg-slate-600 hover:bg-slate-300 dark:hover:bg-slate-500 transition-colors">
<svg class="w-5 h-5 text-slate-700 dark:text-slate-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg>
</button>
</div>
</div>
</div>
<div class="mt-8 flex flex-wrap gap-3 justify-center">
<button onclick="convertAll()" class="px-5 py-2.5 rounded-lg bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 text-white font-medium transition-colors">
Convert All
</button>
<button onclick="clearAll()" class="px-5 py-2.5 rounded-lg bg-slate-200 hover:bg-slate-300 dark:bg-slate-600 dark:hover:bg-slate-500 text-slate-700 dark:text-slate-200 font-medium transition-colors">
Clear All
</button>
</div>
</div>
<div class="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6">
<h2 class="text-xl font-bold text-slate-900 dark:text-slate-100 mb-4">How to Use</h2>
<ul class="space-y-2 text-slate-600 dark:text-slate-300">
<li class="flex items-start">
<span class="text-blue-600 dark:text-blue-400 mr-2">•</span>
<span>Enter text in the input field and click "Convert All" to see all encodings</span>
</li>
<li class="flex items-start">
<span class="text-blue-600 dark:text-blue-400 mr-2">•</span>
<span>Click the copy button next to any output to copy it to clipboard</span>
</li>
<li class="flex items-start">
<span class="text-blue-600 dark:text-blue-400 mr-2">•</span>
<span>Use "Clear All" to reset all fields</span>
</li>
</ul>
</div>
</main>
<footer class="mt-12 text-center text-slate-500 dark:text-slate-400 text-sm">
<p>Text Encoding Converter Tool • Works offline in your browser</p>
</footer>
</div>
<script>
// Conversion functions
function textToUnicode(str) {
return str.split('').map(char => 'U+' + char.charCodeAt(0).toString(16).toUpperCase().padStart(4, '0')).join(' ');
}
function textToUTF8(str) {
const encoder = new TextEncoder();
const bytes = encoder.encode(str);
return Array.from(bytes).map(byte => byte.toString(16).padStart(2, '0')).join(' ');
}
function textToUTF16(str) {
return str.split('').map(char => char.charCodeAt(0).toString(16).toUpperCase().padStart(4, '0')).join(' ');
}
function textToURL(str) {
return encodeURIComponent(str);
}
function textToBase64(str) {
return btoa(unescape(encodeURIComponent(str)));
}
function textToMD5(str) {
return CryptoJS.MD5(str).toString();
}
function textToHex(str) {
return str.split('').map(char => char.charCodeAt(0).toString(16).padStart(2, '0')).join(' ');
}
// Main conversion function
function convertAll() {
const input = document.getElementById('input-text').value;
if (!input) {
alert('Please enter some text to convert');
return;
}
document.getElementById('unicode-output').value = textToUnicode(input);
document.getElementById('utf8-output').value = textToUTF8(input);
document.getElementById('utf16-output').value = textToUTF16(input);
document.getElementById('url-output').value = textToURL(input);
document.getElementById('base64-output').value = textToBase64(input);
document.getElementById('md5-output').value = textToMD5(input);
document.getElementById('hex-output').value = textToHex(input);
console.log('Converted text to all formats');
}
// Clear all fields
function clearAll() {
document.getElementById('input-text').value = '';
document.getElementById('unicode-output').value = '';
document.getElementById('utf8-output').value = '';
document.getElementById('utf16-output').value = '';
document.getElementById('url-output').value = '';
document.getElementById('base64-output').value = '';
document.getElementById('md5-output').value = '';
document.getElementById('hex-output').value = '';
console.log('Cleared all fields');
}
// Copy to clipboard function
function copyToClipboard(elementId) {
const element = document.getElementById(elementId);
element.select();
document.execCommand('copy');
// Visual feedback
const originalValue = element.value;
element.value = 'Copied!';
setTimeout(() => {
element.value = originalValue;
}, 1000);
console.log(`Copied ${elementId} to clipboard`);
}
// Auto-convert when input changes (with debounce)
let timeout;
document.getElementById('input-text').addEventListener('input', function() {
clearTimeout(timeout);
timeout = setTimeout(convertAll, 500);
});
// Initialize with sample text
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('input-text').value = 'Hello, World!';
convertAll();
});
</script>
</body>
</html>
02-25 09:11
暂无回复
No comments yet
登录 后可以评论
Comments
暂无回复
No comments yet
登录 后可以评论