Skip to content

Commit d8fd1ad

Browse files
simonwclaude
simonw
and
claude
authored
Add radio button to escape-entities tool (#103)
* Add radio button to toggle between escape and unescape modes - Added radio buttons to switch between Escape and Unescape modes - Implemented unescapeHTML function to convert HTML entities back to characters - Updated output label to dynamically reflect the current mode - Enhanced documentation to explain both modes of operation - Added CSS styling for the mode selector controls * Add support for numeric HTML entities in unescape mode - Added decoding of decimal numeric entities (e.g., &#34;) - Added decoding of hexadecimal numeric entities (e.g., &#x22;) - Updated documentation to reflect numeric entity support - Now handles all numeric character references, not just named entities * Improve Unescape mode documentation for clarity - Reorganized documentation into clearer format - Grouped entity types with better visual separation - Used arrow notation (→) for better readability - Consolidated examples to reduce clutter - Added clearer description of use cases --------- Co-authored-by: Claude <noreply@anthropic.com>
1 parent bcdd4d7 commit d8fd1ad

File tree

1 file changed

+78
-7
lines changed

1 file changed

+78
-7
lines changed

‎escape-entities.html‎

Lines changed: 78 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,21 @@
3838
margin-top: 15px;
3939
margin-bottom: 5px;
4040
}
41+
.mode-selector {
42+
margin: 15px 0;
43+
padding: 10px;
44+
background-color: #f8f8f8;
45+
border-radius: 4px;
46+
}
47+
.mode-selector label {
48+
display: inline;
49+
font-weight: normal;
50+
margin-left: 5px;
51+
margin-right: 15px;
52+
}
53+
.mode-selector input[type="radio"] {
54+
cursor: pointer;
55+
}
4156
.documentation {
4257
background-color: #f0f0f0;
4358
padding: 15px;
@@ -48,30 +63,57 @@
4863
</head>
4964
<body>
5065
<h1>HTML Entity Escaper</h1>
66+
67+
<div class="mode-selector">
68+
<strong>Mode:</strong>
69+
<input type="radio" id="escapeMode" name="mode" value="escape" checked>
70+
<label for="escapeMode">Escape</label>
71+
<input type="radio" id="unescapeMode" name="mode" value="unescape">
72+
<label for="unescapeMode">Unescape</label>
73+
</div>
74+
5175
<label for="input">Input:</label>
5276
<textarea id="input" placeholder="Paste your text here"></textarea>
53-
<label for="output">Output (with escaped entities):</label>
77+
<label for="output" id="outputLabel">Output (with escaped entities):</label>
5478
<textarea id="output" readonly></textarea>
5579
<button id="copyButton">Copy to clipboard</button>
5680

5781
<div class="documentation">
5882
<h2>What this tool does:</h2>
59-
<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>
60-
<p>The tool escapes the following characters:</p>
83+
<p>This HTML Entity tool helps you convert between special characters and their corresponding HTML entities. It works in two modes:</p>
84+
85+
<h3>Escape Mode (default):</h3>
86+
<p>Converts special characters to HTML entities. This is useful when you need to display code or text containing HTML syntax on a web page without it being interpreted as actual HTML.</p>
6187
<ul>
6288
<li><code>&</code> becomes <code>&amp;amp;</code></li>
6389
<li><code><</code> becomes <code>&amp;lt;</code></li>
6490
<li><code>></code> becomes <code>&amp;gt;</code></li>
6591
<li><code>"</code> becomes <code>&amp;quot;</code></li>
6692
<li><code>'</code> becomes <code>&amp;#39;</code></li>
6793
</ul>
68-
<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>
94+
95+
<h3>Unescape Mode:</h3>
96+
<p>Converts HTML entities back to their original characters. This is useful when you have HTML-encoded text and need to decode it for readability or further processing.</p>
97+
98+
<p><strong>Supported formats:</strong></p>
99+
<ul>
100+
<li><strong>Named entities:</strong> <code>&amp;amp;</code> → <code>&</code>, <code>&amp;lt;</code> → <code><</code>, <code>&amp;gt;</code> → <code>></code>, <code>&amp;quot;</code> → <code>"</code></li>
101+
<li><strong>Decimal numeric entities:</strong> <code>&amp;#34;</code> → <code>"</code>, <code>&amp;#160;</code> → non-breaking space</li>
102+
<li><strong>Hexadecimal numeric entities:</strong> <code>&amp;#x22;</code> → <code>"</code>, <code>&amp;#xA0;</code> → non-breaking space</li>
103+
</ul>
104+
105+
<p>The tool handles all standard HTML entities and any numeric character reference.</p>
106+
107+
<p>To use the tool, select your desired mode (Escape or Unescape), then paste your text into the input box. The converted text will automatically appear in the output box. You can then copy the result to your clipboard using the "Copy to clipboard" button.</p>
69108
</div>
70109

71110
<script>
72111
const input = document.getElementById('input');
73112
const output = document.getElementById('output');
113+
const outputLabel = document.getElementById('outputLabel');
74114
const copyButton = document.getElementById('copyButton');
115+
const escapeModeRadio = document.getElementById('escapeMode');
116+
const unescapeModeRadio = document.getElementById('unescapeMode');
75117

76118
function escapeHTML(text) {
77119
const entities = {
@@ -84,9 +126,38 @@ <h2>What this tool does:</h2>
84126
return text.replace(/[&<>"']/g, char => entities[char]);
85127
}
86128

87-
input.addEventListener('input', () => {
88-
output.value = escapeHTML(input.value);
89-
});
129+
function unescapeHTML(text) {
130+
const entities = {
131+
'&amp;': '&',
132+
'&lt;': '<',
133+
'&gt;': '>',
134+
'&quot;': '"',
135+
'&#39;': "'",
136+
'&#x27;': "'"
137+
};
138+
// First handle named entities and hex/decimal entities we know about
139+
let result = text.replace(/&amp;|&lt;|&gt;|&quot;|&#39;|&#x27;/g, entity => entities[entity]);
140+
// Then handle any decimal numeric entities like &#34;
141+
result = result.replace(/&#(\d+);/g, (match, dec) => String.fromCharCode(dec));
142+
// Then handle any hexadecimal numeric entities like &#x22;
143+
result = result.replace(/&#x([0-9a-fA-F]+);/g, (match, hex) => String.fromCharCode(parseInt(hex, 16)));
144+
return result;
145+
}
146+
147+
function processText() {
148+
const mode = document.querySelector('input[name="mode"]:checked').value;
149+
if (mode === 'escape') {
150+
output.value = escapeHTML(input.value);
151+
outputLabel.textContent = 'Output (with escaped entities):';
152+
} else {
153+
output.value = unescapeHTML(input.value);
154+
outputLabel.textContent = 'Output (with unescaped entities):';
155+
}
156+
}
157+
158+
input.addEventListener('input', processText);
159+
escapeModeRadio.addEventListener('change', processText);
160+
unescapeModeRadio.addEventListener('change', processText);
90161

91162
copyButton.addEventListener('click', () => {
92163
output.select();

0 commit comments

Comments
 (0)