-
-
Notifications
You must be signed in to change notification settings - Fork 24
Expand file tree
/
Copy pathhtml-entities.html
More file actions
317 lines (289 loc) · 13.1 KB
/
Copy pathhtml-entities.html
File metadata and controls
317 lines (289 loc) · 13.1 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Entities Encoder/Decoder — DevDunia</title>
<meta name="description" content="Encode and decode HTML entities. Free online HTML entities encoder/decoder for developers.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://devdunia.com/production/html-entities.html">
<meta property="og:title" content="HTML Entities — DevDunia">
<meta property="og:description" content="Encode and decode HTML entities. Free online HTML entities encoder/decoder.">
<meta property="og:image" content="https://devdunia.com/images/logo.png">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="stylesheet" href="css/comic.css">
<link href="https://fonts.googleapis.com/css2?family=Bangers&family=Comic+Neue:wght@400;700&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
<style>
/* ---- TODO migrate: page-specific overrides, not yet centralized in css/comic.css ---- */
.hero-text h1 {
font-family: 'Bangers', cursive; font-size: 2.8rem; letter-spacing: 2px;
color: var(--pink); -webkit-text-stroke: 1px var(--ink); text-shadow: 4px 4px 0 var(--ink);
line-height: 1; text-transform: uppercase;
}
.badge-pink { background: var(--pink); color: #fff; }
.comic-textarea:focus { border-color: var(--pink); }
.btn-primary { background: var(--pink); color: #fff; }
.btn-danger { background: var(--paper2); color: var(--ink); }
/* Entity reference table */
.entity-table-wrap { overflow-x: auto; margin-top: 8px; }
table.entity-table {
width: 100%; border-collapse: collapse;
font-family: 'Space Mono', monospace; font-size: .72rem;
}
table.entity-table th {
background: var(--ink); color: var(--yellow);
font-family: 'Bangers', cursive; letter-spacing: 1px; font-size: .85rem;
padding: 6px 10px; text-align: left;
}
table.entity-table td {
padding: 5px 10px; border-bottom: 2px solid var(--ink);
vertical-align: middle;
}
table.entity-table tr:nth-child(even) td { background: var(--paper2); }
table.entity-table .char-cell {
font-size: 1.1rem; text-align: center; background: #fff;
border: 2px solid var(--ink); border-radius: 3px; padding: 2px 6px;
display: inline-block; min-width: 26px;
}
.examples-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.example-card {
background: var(--paper2); border: 3px solid var(--ink); border-radius: 6px;
box-shadow: 4px 4px 0 var(--ink); padding: 10px 12px; cursor: pointer;
transition: transform .1s, box-shadow .1s;
}
.example-card:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--ink); }
.example-card:active { transform: translate(1px,1px); box-shadow: 2px 2px 0 var(--ink); }
.example-title { font-family: 'Bangers', cursive; font-size: 1rem; letter-spacing: 1px; margin-bottom: 4px; }
.example-plain { font-family: 'Space Mono', monospace; font-size: .68rem; color: var(--pink); word-break: break-all; margin-bottom: 2px; }
.example-arrow { font-size: .75rem; color: var(--ink); opacity: .55; }
@media (max-width: 760px) {
.examples-grid { grid-template-columns: 1fr; }
}
</style>
</head>
<body>
<div class="paper-overlay"></div>
<div data-masthead></div>
<div class="page-wrap">
<div data-tool-hero
data-title="HTML Entities"
data-chapter="24"
data-category="Developer Tools"
data-icon="🧩"
data-desc="Encode special characters to HTML entities or decode HTML entities back to plain text. Essential for safe HTML output!"
data-color="blue"
data-badges="XSS SAFE,CLIENT-SIDE,FREE,INSTANT"
data-badge-colors="pink,blue,yellow,green">
</div>
<!-- MASTHEAD -->
<!-- HERO -->
<!-- INPUT PANEL -->
<div class="panel">
<div class="panel-header">
✏ ENTER YOUR TEXT
<span class="panel-tag">INPUT</span>
</div>
<div class="panel-body">
<div class="section-label">Text to Encode or HTML Entities to Decode</div>
<textarea id="input-text" class="comic-textarea" rows="6"
placeholder="Enter text to encode or HTML entities to decode... e.g. Hello & "World" <script>"></textarea>
<div class="btn-row">
<button id="encode-btn" class="btn btn-primary">🔒 Encode to HTML Entities</button>
<button id="decode-btn" class="btn btn-success">🔓 Decode HTML Entities</button>
<button id="clear-btn" class="btn btn-danger">🗑 Clear</button>
</div>
<div id="error-bubble" class="error-bubble">
💥 <span id="error-msg">Please enter some text first!</span>
</div>
</div>
</div>
<!-- OUTPUT PANEL -->
<div class="panel" id="output-panel" style="display:none;">
<div class="panel-header">
📤 RESULT
<span class="panel-tag">OUTPUT</span>
</div>
<div class="panel-body">
<div class="section-label">Transformed Text</div>
<div class="output-wrap">
<textarea id="output-text" class="comic-textarea" rows="6" readonly></textarea>
<button id="copy-btn" class="copy-btn">📋 COPY</button>
</div>
</div>
</div>
<!-- EXAMPLES PANEL -->
<div class="panel">
<div class="panel-header">
📚 TRY AN EXAMPLE — CLICK TO ENCODE!
<span class="panel-tag">EXAMPLES</span>
</div>
<div class="panel-body">
<div class="examples-grid">
<div class="example-card" data-text='Hello & "World" <script>' data-mode="encode">
<div class="example-title" style="color:var(--pink);">HTML + Script</div>
<div class="example-plain">Hello & "World" <script></div>
<div class="example-arrow">↓ Encode to entities</div>
</div>
<div class="example-card" data-text="<div class="hero">Content</div>" data-mode="decode">
<div class="example-title" style="color:var(--blue);">HTML Tag</div>
<div class="example-plain"><div class="hero">...</div>
<div class="example-arrow">↓ Decode to plain HTML</div>
</div>
<div class="example-card" data-text="Price: $5 & Tax: 10% < $1" data-mode="encode">
<div class="example-title" style="color:var(--green);">Price Text</div>
<div class="example-plain">Price: $5 & Tax: 10%...</div>
<div class="example-arrow">↓ Encode safely</div>
</div>
<div class="example-card" data-text="&copy; 2025 &mdash; DevDunia &trade;" data-mode="decode">
<div class="example-title" style="color:var(--purple);">Named Entities</div>
<div class="example-plain">&copy; 2025 &mdash; DevDunia...</div>
<div class="example-arrow">↓ Decode named entities</div>
</div>
</div>
</div>
</div>
<!-- ENTITY REFERENCE TABLE -->
<div class="panel">
<div class="panel-header">
📋 COMMON HTML ENTITIES
<span class="panel-tag">REFERENCE</span>
</div>
<div class="panel-body">
<div class="entity-table-wrap">
<table class="entity-table">
<thead>
<tr>
<th>Char</th>
<th>Entity Name</th>
<th>Numeric</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr><td><span class="char-cell">&</span></td><td>&amp;</td><td>&#38;</td><td>Ampersand</td></tr>
<tr><td><span class="char-cell"><</span></td><td>&lt;</td><td>&#60;</td><td>Less than</td></tr>
<tr><td><span class="char-cell">></span></td><td>&gt;</td><td>&#62;</td><td>Greater than</td></tr>
<tr><td><span class="char-cell">"</span></td><td>&quot;</td><td>&#34;</td><td>Double quote</td></tr>
<tr><td><span class="char-cell">'</span></td><td>&apos;</td><td>&#39;</td><td>Single quote</td></tr>
<tr><td><span class="char-cell"> </span></td><td>&nbsp;</td><td>&#160;</td><td>Non-breaking space</td></tr>
<tr><td><span class="char-cell">©</span></td><td>&copy;</td><td>&#169;</td><td>Copyright</td></tr>
<tr><td><span class="char-cell">®</span></td><td>&reg;</td><td>&#174;</td><td>Registered</td></tr>
<tr><td><span class="char-cell">™</span></td><td>&trade;</td><td>&#8482;</td><td>Trademark</td></tr>
<tr><td><span class="char-cell">—</span></td><td>&mdash;</td><td>&#8212;</td><td>Em dash</td></tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- HOW IT WORKS -->
<div class="panel">
<div class="panel-header">
🧠 HOW HTML ENTITIES WORK
<span class="panel-tag">EXPLAINER</span>
</div>
<div class="panel-body">
<div class="how-steps">
<div class="how-step">
<div class="step-dot" style="background:var(--pink);">1</div>
<p>HTML parsers interpret characters like <code><</code>, <code>></code>, and <code>&</code> as <strong>markup syntax</strong>. To display them literally, they must be escaped.</p>
</div>
<div class="how-step">
<div class="step-dot" style="background:var(--blue);">2</div>
<p>Encoding uses a hidden <code><div></code> element — setting <code>textContent</code> automatically escapes all special chars via the browser's built-in HTML serializer.</p>
</div>
<div class="how-step">
<div class="step-dot" style="background:var(--green);">3</div>
<p>Decoding does the reverse — setting <code>innerHTML</code> then reading <code>textContent</code> has the browser parse entities back to their actual characters.</p>
</div>
<div class="how-step">
<div class="step-dot" style="background:var(--orange);">4</div>
<p>This technique is critical for <strong>preventing XSS attacks</strong> — always encode user-supplied data before inserting it into HTML!</p>
</div>
</div>
</div>
</div>
</div><!-- /page-wrap -->
<script>
(function() {
var inputEl = document.getElementById('input-text');
var outputEl = document.getElementById('output-text');
var encodeBtn = document.getElementById('encode-btn');
var decodeBtn = document.getElementById('decode-btn');
var clearBtn = document.getElementById('clear-btn');
var copyBtn = document.getElementById('copy-btn');
var outPanel = document.getElementById('output-panel');
var errBubble = document.getElementById('error-bubble');
var errMsg = document.getElementById('error-msg');
function showError(msg) { errMsg.textContent = msg; errBubble.classList.add('show'); }
function hideError() { errBubble.classList.remove('show'); }
function encodeHtmlEntities(text) {
var div = document.createElement('div');
div.textContent = text;
return div.innerHTML;
}
function decodeHtmlEntities(text) {
var div = document.createElement('div');
div.innerHTML = text;
return div.textContent || div.innerText || '';
}
function showResult(text) {
outputEl.value = text;
outPanel.style.display = 'block';
hideError();
}
encodeBtn.addEventListener('click', function() {
var input = inputEl.value.trim();
if (!input) { showError('Please enter some text to encode!'); return; }
try { showResult(encodeHtmlEntities(input)); }
catch(e) { showError('Error encoding text: ' + e.message); }
});
decodeBtn.addEventListener('click', function() {
var input = inputEl.value.trim();
if (!input) { showError('Please enter HTML entities to decode!'); return; }
try { showResult(decodeHtmlEntities(input)); }
catch(e) { showError('Error decoding entities: ' + e.message); }
});
clearBtn.addEventListener('click', function() {
inputEl.value = '';
outputEl.value = '';
outPanel.style.display = 'none';
hideError();
});
copyBtn.addEventListener('click', function() {
outputEl.select();
try { document.execCommand('copy'); } catch(e) {}
if (navigator.clipboard) navigator.clipboard.writeText(outputEl.value).catch(function(){});
var orig = copyBtn.textContent;
copyBtn.textContent = '✔ COPIED!';
copyBtn.style.background = 'var(--green)';
setTimeout(function() {
copyBtn.textContent = orig;
copyBtn.style.background = 'var(--ink)';
}, 1800);
});
// Example cards
var cards = document.querySelectorAll('.example-card');
for (var i = 0; i < cards.length; i++) {
cards[i].addEventListener('click', function() {
inputEl.value = this.dataset.text;
if (this.dataset.mode === 'encode') {
var encoded = encodeHtmlEntities(this.dataset.text);
showResult(encoded);
} else {
var decoded = decodeHtmlEntities(this.dataset.text);
showResult(decoded);
}
});
}
inputEl.addEventListener('keydown', function(e) {
if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') { encodeBtn.click(); }
});
// Preload
inputEl.value = 'Hello & "World" <script>alert("test")<\/script>';
})();
</script>
<script src="masthead.js"></script>
<script src="hero-banner.js"></script>
<script src="author-card.js"></script>
</body>
</html>