Create escape-entities.html

simonw · web-flow · commit 4ac8c4fbe4b8 · 2024-10-19T15:43:54.000-07:00
https://gist.github.com/simonw/77f91b65e29f43083f9510ae0c19a128
diff --git a/escape-entities.html b/escape-entities.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>HTML Entity Escaper</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            max-width: 600px;
+            margin: 0 auto;
+            padding: 20px;
+            box-sizing: border-box;
+        }
+        textarea {
+            width: 100%;
+            height: 150px;
+            margin-bottom: 10px;
+            padding: 5px;
+            box-sizing: border-box;
+        }
+        button {
+            background-color: #4CAF50;
+            border: none;
+            color: white;
+            padding: 10px 20px;
+            text-align: center;
+            text-decoration: none;
+            display: inline-block;
+            font-size: 16px;
+            margin: 4px 2px;
+            cursor: pointer;
+            border-radius: 4px;
+        }
+        label {
+            font-weight: bold;
+            display: block;
+            margin-top: 15px;
+            margin-bottom: 5px;
+        }
+        .documentation {
+            background-color: #f0f0f0;
+            padding: 15px;
+            border-radius: 4px;
+            margin-top: 30px;
+        }
+    </style>
+</head>
+<body>
+    <h1>HTML Entity Escaper</h1>
+    <label for="input">Input:</label>
+    <textarea id="input" placeholder="Paste your text here"></textarea>
+    <label for="output">Output (with escaped entities):</label>
+    <textarea id="output" readonly></textarea>
+    <button id="copyButton">Copy to clipboard</button>
+
+    <div class="documentation">
+        <h2>What this tool does:</h2>
+        <p>This HTML Entity Escaper is a simple tool that helps you convert special characters in your text to their corresponding HTML entities. It's particularly useful when you need to display code or text containing HTML syntax on a web page without it being interpreted as actual HTML.</p>
+        <p>The tool escapes the following characters:</p>
+        <ul>
+            <li><code>&</code> becomes <code>&amp;amp;</code></li>
+            <li><code><</code> becomes <code>&amp;lt;</code></li>
+            <li><code>></code> becomes <code>&amp;gt;</code></li>
+            <li><code>"</code> becomes <code>&amp;quot;</code></li>
+            <li><code>'</code> becomes <code>&amp;#39;</code></li>
+        </ul>
+        <p>To use the tool, simply paste your text into the input box. The escaped version will automatically appear in the output box. You can then copy the escaped text to your clipboard using the "Copy to clipboard" button.</p>
+    </div>
+
+    <script>
+        const input = document.getElementById('input');
+        const output = document.getElementById('output');
+        const copyButton = document.getElementById('copyButton');
+
+        function escapeHTML(text) {
+            const entities = {
+                '&': '&amp;',
+                '<': '&lt;',
+                '>': '&gt;',
+                '"': '&quot;',
+                "'": '&#39;'
+            };
+            return text.replace(/[&<>"']/g, char => entities[char]);
+        }
+
+        input.addEventListener('input', () => {
+            output.value = escapeHTML(input.value);
+        });
+
+        copyButton.addEventListener('click', () => {
+            output.select();
+            document.execCommand('copy');
+            copyButton.textContent = 'Copied!';
+            setTimeout(() => {
+                copyButton.textContent = 'Copy to clipboard';
+            }, 1500);
+        });
+    </script>
+</body>
+</html>
