htmlentities
Version:
Encode and decode HTML entities with javascript
197 lines (160 loc) • 3.79 kB
HTML
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<title>entities.js | Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="entites - dealing with HTML entities in Javascript">
<meta name="author" content="Alex Duloz">
<style>
* {
margin:0;
padding:0
}
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
background: #fff;
font-size: 20px;
line-height: 1.5;
color: #333;
overflow-y: scroll;
}
html,body{
height:100%;
}
.container {
max-width: 900px;
width: 100%;
min-width: 480px;
margin: 50px auto;
}
h1 {
margin-bottom: .6em;
}
h2 {
margin-top: 2em;
margin-bottom: 1em;
border-bottom: 2px dotted #777;
}
h3 {
margin-top: 2em;
}
textarea {
width: 100%;
margin-bottom: 2em;
}
p {
margin-bottom: 20px;
}
pre {
background: rgba(0,0,0,0.8);
border-radius: 5px;
margin: 1.5em auto 4em auto;
position: relative;
font-size: .8em;
padding: 1em;
position: relative;
}
code {
border: 1px solid #ddd;
background: white;
border-radius: 5px;
padding: 3px;
}
pre code {
color: white;
border: none;
background: transparent;
}
h2 code {
border: 0;
}
kbd {
background: transparent;
display: inline-block;
min-width: 1.2em;
margin: .1em;
padding: .2em;
border: .2px solid #99cbce;
border-radius: .3em;
text-align: center;
line-height: 1;
}
kbd:hover {
cursor: help;
}
a kbd:hover {
cursor: inherit;
}
a {
color: #e13300;
text-decoration: none;
transition: all .2s;
position: relative;
text-shadow: 0 0 #fff;
padding: 0 1px;
}
a:hover {
color: white;
border-radius: .2em;
background: #e13300;
}
.contentinfo {
text-align: center;
}
.some-air {
margin-top: 2em;
}
textarea {
min-height: 200px;
}
</style>
</head>
<body class="container">
<h1>entites.js - Demo</h1>
<h2>The <code>encode</code> method</h2>
<p>
The <code>encode</code> method takes an UTF-8 string and encode its entities.
</p>
<p>Try it with <code>Iñtërnâtiônàlizætiøn</code></p>
<form name="encode" id="encode">
<textarea name="raw" placeholder="Raw"></textarea>
<textarea name="encoded" placeholder="Encoded"></textarea>
<button>Encode</button>
</form>
<h2>The <code>decode</code> method</h2>
<p>
The <code>decode</code> method takes an UTF-8 string and decode its entities.
</p>
<p>Try it with <code>I&ntilde;t&euml;rn&acirc;ti&ocirc;n&agrave;liz&aelig;ti&oslash;n</code></p>
<form name="decode" id="decode">
<textarea name="raw" placeholder="Raw"></textarea>
<textarea name="decoded" placeholder="Decoded"></textarea>
<button>Decode</button>
</form>
<div class="contentinfo">
<p>
Coded with delight by <a href="https://twitter.com/alexduloz">@alexduloz</a>
</p>
<p>
<a href="https://github.com/alexduloz/htmlentities">Github Project</a>
</p>
</div>
</body>
<script src="./htmlentities.min.js"></script>
<script>
var encodeForm = document.getElementById("encode");
encodeForm.addEventListener("submit", function(e){
e.preventDefault();
var encoded = encodeForm.elements['encoded'].value = htmlentities.encode(encodeForm.elements['raw'].value);
return false;
});
var decodeForm = document.getElementById("decode");
decodeForm.addEventListener("submit", function(e){
e.preventDefault();
var decoded = decodeForm.elements['decoded'].value = htmlentities.decode(decodeForm.elements['raw'].value);
return false;
});
</script>
</body>
</html>