HTML Entity Encoder & Decoder

🇩🇪 Deutsche Version / German Version

A simple, elegant web tool for converting text to HTML entities and back. Perfect for email obfuscation, privacy protection, and safely displaying special characters.

Live Demo

Features

• Encode Text to Entities: Convert any text into numeric HTML entities (e.g., A → A)
• Decode Entities to Text: Convert entity codes back to readable text
• Paste Buttons: Quick paste from clipboard for seamless workflow
• One-Click Copy: Easy clipboard functionality for output
• Bilingual Interface: Available in German and English
• Dark/Light Mode: Toggle between themes with persistent preference
• Clean Interface: Minimal, distraction-free design
• Mobile Responsive: Works seamlessly on all devices
• Accessibility: WCAG AA compliant contrast ratios
• No Dependencies: Pure vanilla JavaScript

Use Cases

1. Email Spam Protection

Protect email addresses from spam bots by converting them to entities:

<!-- Instead of -->
<a href="mailto:info@example.com">info@example.com</a>

<!-- Use -->
<a href="mailto:&#105;&#110;&#102;&#111;&#64;&#101;&#120;&#97;&#109;&#112;&#108;&#101;&#46;&#99;&#111;&#109;">
    &#105;&#110;&#102;&#111;&#64;&#101;&#120;&#97;&#109;&#112;&#108;&#101;&#46;&#99;&#111;&#109;
</a>

2. Phone Number Obfuscation

Hide phone numbers from crawlers while keeping them visible to users.

3. Privacy & Legal Pages

Obfuscate required contact information on privacy policies and legal notices.

4. Special Characters

Safely embed Unicode and special characters regardless of file encoding.

Getting Started

Option 1: Use Online

Simply visit the live demo

No installation. No cookies. No tracking. Everything runs locally in your browser.

Option 2: Run Locally

1. Clone the repository:

git clone https://github.com/dontdevpanic/html-entity-encoder.git
cd html-entity-encoder

2. Open index.html in your browser - that's it!

No build process, no dependencies, no complications.

Project Structure

html-entity-encoder/
├── index.html          # Main HTML structure (German)
├── index-en.html       # English version
├── style.css           # Styles with dark/light mode
├── script.js           # Encode/decode functionality
├── favicon.svg         # Site favicon
├── info.svg            # Info icon
├── danger.svg          # Warning icon
├── LICENSE             # MIT License
├── README.md           # You are here!
└── README-de.md           # German Version

How It Works

Encoding

The encoder uses JavaScript's charCodeAt() method to convert each character to its Unicode code point:

function encodeText(str) {
    let encoded = '';
    for (let i = 0; i < str.length; i++) {
        encoded += '&#' + str.charCodeAt(i) + ';';
    }
    return encoded;
}

Decoding

The decoder uses a regular expression and String.fromCharCode() to convert entities back:

function decodeEntities(str) {
    return str.replace(/&#(\d+);/g, (match, dec) => {
        return String.fromCharCode(dec);
    });
}

⚠️ Important Notes

• This is obfuscation, not encryption! The text isn't secret - browsers automatically convert entities back to readable text.
• Limited protection: Only works against simple bots that scan for specific patterns.
• Not for security: Don't rely on this for protecting truly sensitive data. Use proper security measures instead.

Customization

Theme Colors

Modify CSS variables in style.css:

:root {
    --accent-primary: #0056b3;  /* Primary accent color */
    --bg-primary: #ffffff;      /* Light mode background */
}

[data-theme="dark"] {
    --bg-primary: #1a1a1a;      /* Dark mode background */
    --accent-button: #1e6cd2;  /* Dark mode accent */
}

Fonts

Change the font stack in style.css:

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', ...;
}

Contributing

Contributions are welcome! Feel free to:

• Report bugs
• Suggest new features
• Submit pull requests
• Improve documentation

License

This project is open source and available under the MIT License.

Created by

• Created with 🖤 by Bianca | DontDevPanic
• Part of the DevPanicZone learning project
• This tool was developed with AI assistance

Related Projects

Check out other tools from DontDevPanic:

• HTML Code Escaper - Display HTML code on websites

Feedback

Have questions or suggestions? Feel free to open an issue on GitHub!

---

Star this repo if you find it useful!