Skip to content

Commit 94dad1e

Browse files
bennadelbennadel
committed
Add HTML entity and textContent demo.
1 parent f47537d commit 94dad1e

3 files changed

Lines changed: 71 additions & 4 deletions

File tree

‎README.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
11

22
# JavaScript Demos
33

4-
by [Ben Nadel][1] (on [Google+][2])
4+
by [Ben Nadel][bennadel]
55

66
This is a collection of online JavaScript demos based on my blog posts on my
7-
blog, [BenNadel.com][1]. Basically, all the code is already on my blog; but,
7+
blog, [BenNadel.com][bennadel]. Basically, all the code is already on my blog; but,
88
I wanted a way to easily create interactive demos that my readers could play
99
with.
1010

1111
## My JavaScript Demos - I Love JavaScript!
1212

13+
* [Exploring The Interplay Between HTML Entities And TextContent In JavaScript](https://bennadel.github.io/JavaScript-Demos/demos/text-content-entities/)
1314
* [Inserting Text At The Last Known Selection / Caret Location In JavaScript](https://bennadel.github.io/JavaScript-Demos/demos/insert-text-selection/)
1415
* [Rending Emoji Glyphs Using Hexadecimal CodePoints In JavaScript](https://bennadel.github.io/JavaScript-Demos/demos/emoji-glyph-from-hex/)
1516
* [Animating The Content Property Using CSS Keyframes Animation](https://bennadel.github.io/JavaScript-Demos/demos/animate-content-css/)
@@ -628,6 +629,5 @@ with.
628629

629630
Want more JavaScript goodness? Check out the [JavaScript blog entries][javascript-blog] on my website.
630631

631-
[1]: http://www.bennadel.com
632-
[2]: https://plus.google.com/108976367067760160494?rel=author
632+
[bennadel]: http://www.bennadel.com
633633
[javascript-blog]: http://www.bennadel.com/blog/tags/6-javascript-dhtml-blog-entries.htm

‎demos/text-content-entities/demo.css‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
2+
body {
3+
font-family: sans-serif ;
4+
font-size: 18px ;
5+
}
6+
7+
#encoded,
8+
#input {
9+
font-family: monospace ;
10+
}
11+
12+
input {
13+
font-size: 100% ;
14+
}

‎demos/text-content-entities/index.htm‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>
6+
Exploring The Interplay Between HTML Entities And TextContent In JavaScript
7+
</title>
8+
9+
<link rel="stylesheet" type="text/css" href="./demo.css" />
10+
</head>
11+
<body>
12+
13+
<h1>
14+
Exploring The Interplay Between HTML Entities And TextContent In JavaScript
15+
</h1>
16+
17+
<p id="encoded">
18+
<!-- Common HTML entities. -->
19+
&lt; &gt; &quot; &rarr;
20+
<!-- Slightly smiling face emoji. -->
21+
&#x1f642;
22+
<!-- Frowning face. -->
23+
&#x2639;&#xfe0f;
24+
</p>
25+
26+
<input id="input" type="text" size="40" />
27+
28+
<script type="text/javascript" src="../../vendor/jquery/3.6.0/jquery-3.6.0.min.js"></script>
29+
<script type="text/javascript">
30+
31+
var encoded = $( "#encoded" );
32+
var input = $( "#input" );
33+
34+
// Our encoded element contains text that we created using HTML entities; that
35+
// is, web-safe encodings that represent other values. When we then extract that
36+
// generated content, we get the RENDERED VALUE, not the ENCODED VALUE!
37+
var encodedValue = encoded
38+
.text()
39+
.replace( /\s+/g, " " ); // Cleaning up the white-space.
40+
;
41+
42+
// Echo the textContent in the Input and the Console.
43+
input.val( encodedValue );
44+
console.log( ( "%c" + encodedValue ), "font-family: monospace ;" );
45+
46+
// And, just as a test, let's make sure the jQuery .text() method is actually
47+
// matching the raw .textProperty content.
48+
console.log( encoded.text() === encoded.prop( "textContent" ) );
49+
50+
</script>
51+
52+
</body>
53+
</html>

0 commit comments

Comments
 (0)