Generating HTML Entities

A tool to generate HTML entities is handy to have when text needs to be obfuscated.

Perhaps you want to make an email address unrecognizable for what it is. Or obfuscate a link. Or leave a secret message in the web page source code.

The tool in this article obfuscates text quickly. It's a JavaScript-based converter so no page reload has to occur. The JavaScript function has 3 lines of code.

The tool has two textarea fields. Type something in the top one and the bottom one contains the HTML entities for whatever you typed.

The tool is suitable for your personal portal page or any other web page.

Here is the tool. Link to it. Bookmark it. Or copy the code from further below for pasting into your own web page.

The Code

Below is the code, two textarea fields and one JavaScript function. The entire code set is 19 lines, including blank lines between sections. Simply copy and paste.

No customization is required, although you may want to style the textarea fields to your liking.

After the code are notes about how it works.

<textarea 
   onkeyup="EncodeCharactersAsEntities(this.value)" 
   style="width:100%; box-sizing:border-box; height:3em;" 
   placeholder="Type or paste something"></textarea>

<textarea 
   id="output-field" 
   readonly="readonly" 
   style="width:100%; box-sizing:border-box; height:6em;" 
   placeholder="Output goes here"></textarea>

<script type="text/javascript">
function EncodeCharactersAsEntities(s)
{
   var ss = new String();
   for(i=0;i<s.length;i++) { ss+='&#'+s.charCodeAt(i)+';'; }
   document.getElementById("output-field").value=ss;
}
</script>

How It Works

The two textarea fields and the JavaScript function work together.

The first textarea field is for your input and the second for the converted output. The JavaScript manages the conversion and output display.

Let's talk about each individually.

1. The first textarea field — where you type or paste your text.

   When a keyboard key is released, the JavaScript function is called with the content of the textarea field.

   Optionally, change the CSS style of the textarea field according to your preference. Also optionally, the placeholder may be removed or its value changed.

2. The second textarea field — where you see the converted output, which may be copied and pasted elsewhere.

   When the JavaScript function is called by the first textarea field, this second textarea field is updated with the converted content of the first textarea field.

   The id value is how the JavaScript knows where to insert the converted content.

   Optionally, change the CSS style of the textarea field according to your preference. Also optionally, the placeholder may be removed or its value changed.

3. The JavaScript — that does the conversion and output display.

   When the JavaScript function receives content from the first textarea field, it …

   1. Converts the content it received.

   2. Updates the value of the second textarea field with the converted content.

   There is nothing that needs customization anywhere in the JavaScript function.

There you have it, a tool to quickly generate HTML entities when text needs to be obfuscated.

(This article first appeared with an issue of the Possibilities newsletter.)

Will Bontrager