Skip to content

Commit e99937e

Browse files
javascript-2020javascript-2020
committed
save file
1 parent d4036ce commit e99937e

File tree

1 file changed

+139
-42
lines changed

1 file changed

+139
-42
lines changed

‎utils/misc/html-entities/html-entities.html‎

Lines changed: 139 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,41 @@
11

22

3+
<!DOCTYPE html>
34

45
<html>
56

6-
77
<head>
8+
<meta charset=utf-8>
89

9-
<title>html-entities</title>
10+
<title>
11+
HTML Entities Encode / Decode
12+
</title>
1013

14+
<meta name=description content='Use this tool to easily encode and decode text to and from HTML entities. Perfect for escaping special characters, preserving formatting, and ensuring safe rendering in web pages and emails.'>
15+
<link rel=icon type='image/png' href='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAMAAAAM7l6QAAAAUVBMVEVHcEwBv/4Bv/0avvMCv/0TvvcCv/0Kv/oOvvgHv/sIvvsQvvcHv/sFv/xIvOEIv/sKvvoDv/wIvvoGv/sMv/kCv/0Dv/0Ev/wFv/wGv/sAv/7CmpJ5AAAAGnRSTlMA+fII1hDpQyJ7TxhylAFnN79dhC7hzLapoVwT8hEAAAE8SURBVCjPvVJZbsUgDCRhC2uA7Nz/oB3Da5uqeV+VihQpYhaPjRn7+5Gp+Nm6ZzDaPNZaB+H5E2wJbGeJD84ZwOEDSGr9DU+q1h11A/wt2M7Jm0kkOKPqAlgzZoTIEwG8k/hR62hZEt0ErDHBxB+XbnIN+XZtKA3vT9ggkGgubO7Rc2MjgppYPGuPwmI6B0KHi8gcfewSEtztuOBe0UgUmUG+4icQrYSF2iTaaFyz2HQrrW9dI3A1RDdIIAoSHrfZFhK1hNGTD4LdxL0B2QcQWkJzHymVVun7v54/ni1R5CNx7nRo7Ysi+TQxqa1N8eWochbtzenb82aYHYa6QO6O+nXEfL0enjK1oTFnmrCOu4Gn2cjAMwxVvLbL6eJ9ST3/hLXTUu4IGd8uJ812fr+7FsXW97AO4Xlv/+98ANkDGdLwxnVSAAAAAElFTkSuQmCC'>
16+
<meta name=viewport content='width=device-width, initial-scale=1'>
17+
1118
<base href='https://ext-code.com/utils/misc/html-entities/'>
12-
<base href='https://javascript-2020.github.io/utils/misc/html-entities/'>
19+
<link rel=canonical href='https://ext-code.com/utils/misc/html-entities/html-entities.html'>
20+
21+
22+
<script type='application/ld+json'>
1323

14-
<link rel=icon type='image/png' href='images/html-entities-30.png'>
24+
{
25+
"@context" : "https://schema.org",
26+
"@type" : "SoftwareApplication",
27+
"name" : "HTML Entities Encode / Decode",
28+
"url" : "https://ext-code.com/utils/misc/html-entities/html-entities.html",
29+
"author" : {"@type":"Person","name":"Matthew Richards"},
30+
"description" : "Use this tool to easily encode and decode text to and from HTML entities. Perfect for escaping special characters, preserving formatting, and ensuring safe rendering in web pages and emails.",
31+
"applicationCategory" : "DeveloperApplication",
32+
"operatingSystem" : "All",
33+
"browserRequirements" : "Requires JavaScript-enabled browser",
34+
"softwareVersion" : "1.0.0",
35+
"offers" : {"@type":"Offer","price":"0","priceCurrency":"GBP"}
36+
}
37+
38+
</script>
1539

1640

1741
<script src='https://libs.ext-code.com/js/dom/component/component.js'></script>
@@ -21,7 +45,8 @@
2145
console.log('html-entities-v2.0.html');
2246
console.log();
2347
console.json=v=>console.log(JSON.stringify(v,null,4));
24-
var df = true;
48+
var df=true,version='v2.0'
49+
;
2550

2651

2752
var he;
@@ -48,8 +73,6 @@
4873
//:
4974

5075

51-
mod.stack.add = init;
52-
5376
async function init(){
5477

5578
//keydown = keydown();
@@ -112,18 +135,60 @@
112135

113136
</script init>
114137

115-
</head>
116-
117-
118-
<body>
119138

120139
<style id=page-inline>
121140

122141
html
123-
{height:100%}
124-
142+
{height:100%;font-family:arial}
125143
body
126-
{height:calc(100% - 16px);display:flex;flex-direction:column;gap:10px}
144+
{min-height:calc(100% - 40px);margin:20px}
145+
146+
#center
147+
{display:flex;flex-direction:column;gap:20px;align-items:center;
148+
max-width:1400px;width:100%;padding:0 20px}
149+
150+
[component]
151+
{display:none}
152+
153+
.description
154+
{max-width:1000px;text-align:justify;border-left:4px solid #4a90e2;padding:1rem;
155+
background-color:#f9f9f9;font-family:system-ui,sans-serif;font-size:1rem;line-height:1.6;color:#333}
156+
.description>p
157+
{margin:0}
158+
.description > p+p
159+
{margin:10px 0}
160+
161+
code
162+
{font-family:monospace;background:whitesmoke}
163+
code.inline
164+
{display:inline;padding:5px 10px}
165+
166+
a
167+
{color:#4a90e2;text-decoration:none;font-weight:500}
168+
a:hover
169+
{text-decoration:underline}
170+
.link-domain
171+
{font-size:0.85rem;color:#777;margin-left:0.25rem}
172+
.link-domain::before
173+
{content:'['}
174+
.link-domain::after
175+
{content:']'}
176+
.link-txt
177+
{}
178+
179+
input
180+
{font-size:16px;padding:5px 7px;box-sizing:border-box;}
181+
input[type=button]
182+
{cursor:pointer}
183+
184+
185+
186+
187+
188+
189+
190+
191+
127192

128193
.icon
129194
{width:32px;height:32px;border:1px solid gray;border-radius:3px;box-sizing:border-box;cursor:pointer}
@@ -132,33 +197,44 @@
132197
{display:flex;align-items:center}
133198

134199
#view
135-
{flex:1;display:flex;gap:10px}
136-
200+
{flex:1;display:flex;gap:10px;width:100%}
137201

138-
input
139-
{font-size:16px;padding:5px 10px}
202+
editor-root
203+
{flex:1}
140204

141-
input[type=button]
142-
{cursor:pointer}
143205

144206
</style>
145-
146-
<div id=hdr>
147-
148-
<filemod component v2.0></filemod>
149-
<input value=convert type=button>
207+
208+
</head>
209+
210+
211+
<body>
212+
213+
<div id=center>
214+
215+
<hdr component=grp v2.0>
216+
<img class=title src='images/html-entities.png' style='top:5px;height:40px'>
217+
<time slot=date datetime=2025-10-23>23 Oct 2025</time>
218+
</hdr>
219+
220+
221+
150222

151-
</div>
223+
<div id=hdr>
224+
225+
<filemod component v2.0></filemod>
226+
<input value=encode type=button>
227+
<input value=decode type=button>
228+
229+
</div>
230+
231+
</div center>
232+
152233

153234
<div id=view>
154235

155-
<div id=source>
156-
<editor inst=source component v2.0></editor>
157-
</div>
158-
159-
<div id=output>
160-
<editor inst=output component v2.0></editor>
161-
</div>
236+
<editor id=source component v2.0></editor>
237+
<editor id=output component v2.0></editor>
162238

163239
</div>
164240

@@ -189,16 +265,16 @@
189265

190266
filemod.initdom(hdr);
191267

192-
$(hdr,'[value=convert]').onclick = btn.convert;
268+
$(hdr,'[value=encode]').onclick = btn.encode;
269+
$(hdr,'[value=decode]').onclick = btn.decode;
193270

194271

195272

196273
var view = $(root,'#view');
197274

198-
var root2 = $(view,'#source');
199-
await editor.source.initdom(root2,'txt');
200-
var root2 = $(view,'#output');
201-
await editor.output.initdom(root2,'txt');
275+
await editor.source.initdom('txt');
276+
await editor.output.initdom('txt');
277+
202278

203279
log.initdom();
204280

@@ -219,13 +295,24 @@
219295
//:
220296

221297

222-
btn.convert = function(){
298+
btn.encode = function(){
223299

224300
var txt = editor.source.getValue();
225301
var encoded = convert(txt);
226302
editor.output.setValue(encoded,-1);
227303

228-
}//convert
304+
}//encode
305+
306+
307+
btn.decode = function(){
308+
309+
var txt = editor.output.getvalue();
310+
var decoded = decode(txt);
311+
editor.source.setvalue(decoded,-1);
312+
313+
}//decode
314+
315+
229316

230317
//:
231318

@@ -248,15 +335,25 @@
248335
//:
249336

250337

251-
function convert(txt){
338+
function encode(txt){
252339

253340
var opts;
254341

255342
var encoded = he.encode(txt,opts);
256343

257344
return encoded;
258345

259-
}//convert
346+
}//encode
347+
348+
349+
function decode(txt){
350+
351+
var opts;
352+
353+
var decoded = he.decode(txt,opts);
354+
return decoded;
355+
356+
}//decode
260357

261358

262359
//:

0 commit comments

Comments
 (0)