⚡HTML Encoder/Decoder

Professional HTML encoding and decoding tool with advanced security features. Protect against XSS attacks, encode special characters, and ensure safe web content. Supports named entities, numeric entities, and URL encoding with real-time security analysis.

Choose Your Experience Level

What Is HTML Encoding?

HTML encoding converts special characters like <, >, & into safe codes that browsers can display correctly. It is essential for web development and security.

🎯
Web Development
Safely display user input in HTML pages
💡
Email Templates
Encode special characters for email HTML
📊
Security
Prevent XSS attacks by encoding user input
🔧
Data Processing
Clean and encode data for web APIs
🌟
CMS Content
Handle special characters in content management
🚀
Code Sharing
Display code snippets safely in web pages
Encoding Type
Additional Options
Actions
Encoded Output
Decoded Output

Common HTML Entities Reference

Character Named Entity Numeric Entity Hex Entity Description
< &lt; &#60; &#x3C; Less than
> &gt; &#62; &#x3E; Greater than
& &amp; &#38; &#x26; Ampersand
" &quot; &#34; &#x22; Double quote
' &apos; &#39; &#x27; Single quote
  &nbsp; &#160; &#xA0; Non-breaking space
© &copy; &#169; &#xA9; Copyright
® &reg; &#174; &#xAE; Registered trademark

Sample Encoding/Decoding Examples

XSS Attack Prevention
<script>alert('XSS')</script>
Common XSS attack pattern that needs proper encoding
HTML Content
<div class="example">Hello & Welcome</div>
Standard HTML with special characters
Quote Handling
He said "Hello" & she replied 'Hi'
Text with both single and double quotes
Unicode Characters
© 2025 Company™ • All Rights Reserved
Special symbols and Unicode characters
JavaScript Injection
javascript:alert(document.cookie)
JavaScript URL injection attempt
Form Data
name=John&email=john@example.com&message=Hello!
URL-encoded form data with special characters
', html: '
Hello & Welcome
', quotes: 'He said "Hello" & she replied \'Hi\'', unicode: '© 2025 Company™ • All Rights Reserved', javascript: 'javascript:alert(document.cookie)', form: 'name=John&email=john@example.com&message=Hello!' }; // HTML Entities Map const HTML_ENTITIES = { '&': '&', '<': '<', '>': '>', '"': '"', "'": ''', '\n': ' ', '\r': ' ', '\t': ' ' }; // Extended HTML Entities const EXTENDED_ENTITIES = { '©': '©', '®': '®', '™': '™', '€': '€', '£': '£', '¥': '¥', '§': '§', '¶': '¶', '•': '•', '…': '…', '–': '–', '—': '—', ''': '‘', ''': '’', '"': '“', '"': '”', '«': '«', '»': '»', '°': '°', '±': '±', '×': '×', '÷': '÷', '¼': '¼', '½': '½', '¾': '¾', 'α': 'α', 'β': 'β', 'γ': 'γ', 'δ': 'δ', 'ε': 'ε', 'λ': 'λ', 'μ': 'μ', 'π': 'π', 'σ': 'σ', 'τ': 'τ', 'φ': 'φ', 'ω': 'ω' }; // XSS Pattern Detection const XSS_PATTERNS = [ /]*>/i, /javascript:/i, /vbscript:/i, /onload\s*=/i, /onclick\s*=/i, /onerror\s*=/i, /onmouseover\s*=/i, /onfocus\s*=/i, /onblur\s*=/i, /eval\s*\(/i, /document\.cookie/i, /document\.write/i, /window\.location/i, /alert\s*\(/i, /confirm\s*\(/i, /prompt\s*\(/i, /]*>/i, /]*>/i, /]*>/i, /]*>/i, /]*>/i, /data:[^;]*;base64/i, /\.innerHTML/i, /\.outerHTML/i ]; // ========== MAIN PROCESSING FUNCTIONS ========== // Main processing function function processText() { const input = document.getElementById('inputText').value; if (!input.trim()) { document.getElementById('encodedOutput').textContent = ''; document.getElementById('decodedOutput').textContent = ''; hideSecurityAnalysis(); return; } try { // Encode const encoded = encodeHTML(input); document.getElementById('encodedOutput').textContent = encoded; // Decode const decoded = decodeHTML(input); document.getElementById('decodedOutput').textContent = decoded; // Security analysis performSecurityAnalysis(input); // Show OTA after successful processing showOTA(); // Track usage trackEvent('html_processed', { hasXSSPatterns: detectXSSPatterns(input).length > 0 }); } catch (error) { showNotification(`Error: ${error.message}`, 'error'); } } // HTML Encoding Function function encodeHTML(text) { let encoded = text; // Basic HTML encoding if (document.getElementById('encodeBasic').checked) { encoded = encoded.replace(/&/g, '&') .replace(//g, '>'); } // Quote encoding if (document.getElementById('encodeQuotes').checked) { encoded = encoded.replace(/"/g, '"') .replace(/'/g, '''); } // Extended characters if (document.getElementById('encodeExtended').checked) { for (const [char, entity] of Object.entries(EXTENDED_ENTITIES)) { encoded = encoded.replace(new RegExp(escapeRegExp(char), 'g'), entity); } } // Numeric entities if (document.getElementById('encodeNumeric').checked) { encoded = encoded.replace(/[^\x00-\x7F]/g, function(char) { return '&#' + char.charCodeAt(0) + ';'; }); } // Newlines if (document.getElementById('encodeNewlines').checked) { encoded = encoded.replace(/\n/g, ' ') .replace(/\r/g, ' ') .replace(/\t/g, ' '); } // URL encoding if (document.getElementById('urlEncode').checked) { encoded = encodeURIComponent(encoded); } return encoded; } // HTML Decoding Function function decodeHTML(text) { let decoded = text; try { // URL decode first if needed if (text.includes('%')) { try { decoded = decodeURIComponent(decoded); } catch (e) { // If URL decoding fails, continue with original text } } // Decode HTML entities const tempDiv = document.createElement('div'); tempDiv.innerHTML = decoded; decoded = tempDiv.textContent || tempDiv.innerText || ''; return decoded; } catch (error) { return text; // Return original if decoding fails } } // XSS Pattern Detection function detectXSSPatterns(text) { const detectedPatterns = []; for (const pattern of XSS_PATTERNS) { if (pattern.test(text)) { detectedPatterns.push(pattern.source); } } return detectedPatterns; } // Security Analysis function performSecurityAnalysis(text) { const items = []; // XSS pattern detection const xssPatterns = detectXSSPatterns(text); if (xssPatterns.length > 0) { items.push({ type: 'error', icon: '🚨', message: `Potential XSS patterns detected: ${xssPatterns.length} suspicious patterns found` }); } else { items.push({ type: 'success', icon: '✅', message: 'No obvious XSS patterns detected' }); } // HTML tag detection const htmlTags = text.match(/<[^>]+>/g); if (htmlTags) { if (htmlTags.length > 5) { items.push({ type: 'warning', icon: '⚠️', message: `Contains ${htmlTags.length} HTML tags - verify if intentional` }); } else { items.push({ type: 'info', icon: 'ℹ️', message: `Contains ${htmlTags.length} HTML tags` }); } } // JavaScript protocol detection if (/javascript:/i.test(text)) { items.push({ type: 'error', icon: '🛑', message: 'Contains javascript: protocol - high XSS risk!' }); } // Event handler detection if (/on\w+\s*=/i.test(text)) { items.push({ type: 'error', icon: '⚡', message: 'Contains HTML event handlers - potential XSS vector' }); } // Special characters analysis const specialChars = text.match(/[<>&"']/g); if (specialChars) { items.push({ type: 'info', icon: '🔤', message: `Contains ${specialChars.length} special HTML characters` }); } // Unicode analysis const unicodeChars = text.match(/[^\x00-\x7F]/g); if (unicodeChars) { items.push({ type: 'info', icon: '🌐', message: `Contains ${unicodeChars.length} Unicode characters` }); } // Encoding recommendations if (xssPatterns.length > 0 || htmlTags) { items.push({ type: 'warning', icon: '💡', message: 'Recommendation: Use context-aware encoding for web output' }); } displaySecurityAnalysis(items); } // Display Security Analysis function displaySecurityAnalysis(items) { const container = document.getElementById('securityItems'); const analysisSection = document.getElementById('securityAnalysis'); container.innerHTML = ''; items.forEach(item => { const div = document.createElement('div'); div.className = `security-item ${item.type}`; div.innerHTML = ` ${item.icon} ${item.message} `; container.appendChild(div); }); analysisSection.style.display = 'block'; } // Hide Security Analysis function hideSecurityAnalysis() { document.getElementById('securityAnalysis').style.display = 'none'; } // Use Sample function useSample(sampleId) { const sample = HTML_SAMPLES[sampleId]; if (!sample) return; document.getElementById('inputText').value = sample; processText(); // Smooth scroll to results setTimeout(() => { document.querySelector('.results-section').scrollIntoView({ behavior: 'smooth', block: 'start' }); }, 100); trackEvent('sample_used', { sample: sampleId }); } // Clear All function clearAll() { document.getElementById('inputText').value = ''; document.getElementById('encodedOutput').textContent = ''; document.getElementById('decodedOutput').textContent = ''; hideSecurityAnalysis(); } // Swap Input/Output function swapInputOutput() { const input = document.getElementById('inputText'); const encoded = document.getElementById('encodedOutput').textContent; if (encoded) { input.value = encoded; processText(); } } // ========== UTILITY FUNCTIONS ========== // Escape RegExp function escapeRegExp(string) { return string.replace(/[.*+?^${}()|[\]\\]/g, '\\ Change API Key'; } else { statusEl.textContent = 'No API key set'; } } // 채팅 메시지 추가 function addMessage(type, content) { const chatMessages = document.getElementById('chatMessages'); const messageDiv = document.createElement('div'); messageDiv.className = `message ${type}`; if (type === 'user') { messageDiv.innerHTML = `You: ${content}`; } else { messageDiv.innerHTML = `✨ Gemini:
${content.replace(/\n/g, '
')}`; } chatMessages.appendChild(messageDiv); chatMessages.scrollTop = chatMessages.scrollHeight; } // Gemini에 메시지 전송 async function sendToGemini() { const input = document.getElementById('geminiInput'); const message = input.value.trim(); if (!message) return; addMessage('user', message); input.value = ''; const loadingMsg = document.createElement('div'); loadingMsg.className = 'message assistant'; loadingMsg.innerHTML = '✨ Gemini:
Thinking...'; loadingMsg.id = 'loading-message'; document.getElementById('chatMessages').appendChild(loadingMsg); try { const currentText = document.getElementById('inputText').value.trim(); let contextInfo = ''; if (currentText) { const xssPatterns = detectXSSPatterns(currentText); contextInfo = `\n\nCurrent HTML content context: - Length: ${currentText.length} characters - Contains HTML tags: ${/<[^>]+>/.test(currentText)} - XSS patterns detected: ${xssPatterns.length} - Special characters: ${/[<>&"']/.test(currentText)}`; } const response = await fetch(`https://generativelanguage.googleapis.com/v1beta/models/gemini-pro:generateContent?key=${aiModalState.apiKey}`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ contents: [{ parts: [{ text: `You are a web security expert helping a developer with HTML encoding/decoding and XSS prevention. Context: The user is working with an HTML encoder/decoder tool for web security purposes. They need help with proper character encoding, XSS prevention, and secure web development practices. Please provide accurate, security-focused advice about: - HTML entity encoding/decoding - XSS prevention techniques - Context-aware output encoding - Web security best practices - Character set handling ${contextInfo} User question: ${message}` }] }], generationConfig: { temperature: 0.7, maxOutputTokens: 1000 } }) }); const data = await response.json(); document.getElementById('loading-message').remove(); if (data.candidates && data.candidates[0] && data.candidates[0].content) { const reply = data.candidates[0].content.parts[0].text; addMessage('assistant', reply); } else { addMessage('assistant', 'Sorry, I could not generate a response. Please try again.'); } } catch (error) { document.getElementById('loading-message')?.remove(); if (error.message.includes('API key')) { addMessage('error', 'Invalid API key. Please check your API key and try again.'); showAPIKeySetup(); } else { addMessage('error', 'Failed to connect to Gemini. Please check your internet connection and try again.'); } } } // ========== EVENT LISTENERS ========== document.addEventListener('DOMContentLoaded', function() { // AI 버튼 이벤트 document.getElementById('aiBtn').addEventListener('click', openAIModal); // 모달 외부 클릭시 닫기 document.getElementById('aiModal').addEventListener('click', function(e) { if (e.target === this) { closeAIModal(); } }); // 키보드 이벤트 document.addEventListener('keydown', function(e) { if (e.key === 'Enter') { const geminiInput = document.getElementById('geminiInput'); if (document.activeElement === geminiInput) { sendToGemini(); } } if (e.key === 'Escape') { closeAIModal(); } }); // 초기화 updateAPIKeyStatus(); updateCurrentYear(); updateToolCount(); // Load default sample useSample('html'); }); // ========== DYNAMIC TOOL COUNT ========== async function updateToolCount() { try { const response = await fetch('/api/tool-count.php'); const data = await response.json(); document.querySelectorAll('.dynamic-tools-count').forEach(el => { el.textContent = `${data.count}+ free online tools in 211 languages. No signup, no fees, just tools that work.`; }); document.querySelectorAll('.dynamic-count').forEach(el => { const prefix = el.getAttribute('data-text') || ''; const suffix = el.getAttribute('data-suffix') || ''; const icon = el.textContent.split(' ')[0] || ''; el.textContent = `${icon} ${prefix} ${data.count}+ ${suffix}`; }); } catch (error) { const fallbackCount = 333; document.querySelectorAll('.dynamic-tools-count').forEach(el => { el.textContent = `${fallbackCount}+ free online tools in 211 languages. No signup, no fees, just tools that work.`; }); document.querySelectorAll('.dynamic-count').forEach(el => { const prefix = el.getAttribute('data-text') || ''; const suffix = el.getAttribute('data-suffix') || ''; const icon = el.textContent.split(' ')[0] || ''; el.textContent = `${icon} ${prefix} ${fallbackCount}+ ${suffix}`; }); } } function updateCurrentYear() { const currentYear = new Date().getFullYear(); document.querySelectorAll('.current-year').forEach(el => { el.textContent = currentYear; }); } // ========== ANALYTICS ========== window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-XXXXXXXXX'); trackEvent('page_view', { tool: TOOL_CONFIG.name, category: TOOL_CONFIG.category });