Online tool for generating HTML entities and converting HTML entities to text.

Delimiter Uppercase Padding
HTML
CSS
JavaScript
<div id="converter">
  <div id="textareas">
    <textarea id="input" placeholder="Input"></textarea>
    <textarea id="output" placeholder="Output"></textarea>
  </div>
  <div id="converter-buttons">
    <span>
      <select id="conversion-type">
        <option value="to-ascii">String to HTML entity (ASCII/DEC)</option>
        <option value="to-hex">String to HTML entity (HEX)</option>
        <option value="to-string">HTML entity to String</option>
      </select>
      <input type="checkbox" name="delimiter" checked="checked">Delimiter
      <input type="checkbox" name="uppercase">Uppercase
      <input type="checkbox" name="padding">Padding
    </span>
  </div>
  <center><button id="convert">Generate HTML Entities</button></center>
</div>
#converter {
  margin-top: 30px;
}
#textareas {
  display: flex;
  flex-direction: row;
}
#converter textarea {
  width: 50%;
  padding: 5px;
  min-height: 200px;
  font-size: 14px;
  color: #404040;
}
.applet-body {
  border: none !important;
}
#converter-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
}
#conversion-type {
  font-size: 15px;
  border-radius: 5px;
}
#convert {
  border: 1px solid #131f2d;
  background: #142944;
  color: #fff;
  padding: 6px 10px;
  font-size: 14px;
  border-radius: 3px;
  cursor: pointer;
  margin-top: 20px;
}
#convert:hover {
  background: #203754;
}
#guide {
  margin-top: 120px;
  font-size: 14px;
}
document.querySelector('#convert').onclick = function() {
  const inputMode = document.querySelector('#conversion-type').value;
  let input = document.querySelector('#input').value;
  if (!input) return;

  const uppercase = document.querySelector('input[name="uppercase"]').checked;
  const delimiter = document.querySelector('input[name="delimiter"]').checked;
  const padding = document.querySelector('input[name="padding"]').checked;

  let output = '';

  if (inputMode === 'to-ascii') {
    input.split('').forEach(char => {
       let converted = char.charCodeAt(0) + (delimiter ? ';' : '');
       if (padding) converted = ('0'.repeat(7) + converted).slice(-7);
       output += '&#' + converted;
    });
  } else if (inputMode === 'to-hex') {
    input.split('').forEach(char => {
      const hex = char.charCodeAt(0).toString(16);
      let converted = (uppercase ? hex.toUpperCase() : hex) + (delimiter ? ';' : '');
      if (padding) converted = ('0'.repeat(7) + converted).slice(-7);
      output += '&#x' + converted;
    });
  } else if (inputMode === 'to-string') {
    input.replace(/;/g, '');

    let mode;
    if (input.indexOf('&#x') === 0) {
      input = input.replace(/&#x/g, ' ');
      mode = 'hex';
    } else {
      input = input.replace(/&#/g, ' ');
      mode = 'ascii';
    }

    input.split(' ').forEach(charCode => {
      let decoded;
      if (mode === 'hex') {
        decoded = String.fromCharCode(parseInt(charCode, 16));
      } else {
        decoded = decoded = String.fromCharCode(charCode);
      }
      output += decoded;
    });
  }

  document.querySelector('#output').value = output;
}

document.querySelector('#conversion-type').onchange = function() {
  if (document.querySelector('#conversion-type').value === 'to-string') {
    document.querySelector('#convert').innerText = 'Generate Plain Text';
  } else {
    document.querySelector('#convert').innerText = 'Generate HTML Entities';
  }
}

Usage Guide#

HTML entities are string of characters that start with &# and end with ;, which are used for displaying un-typeable characters or displaying characters that may otherwise be intepreted as part of the HTML syntax.

What can this HTML entity generator do

This HTML entity generator can convert regular string into HTML entities in ASCII/decimal and hexadecimal format. It also has the options for omitting the delimter ;, uppercase and 0-padding the generated HTML entities.

Also, you can input HTML-entity-encoded string and convert them to regular text.

How to use the generator

Type or paste the input in the left input area, select "String to HTML entity (ASCII/DEC)" or "String to HTML entity (HEX)" or "HTML entity to String" and click on the "Generate HTML Entities"/"Generate Plain Text" button.

Uses of an HTML entity generator

An online HTML entity generator lets you convert regular text into HTML entities wihout having to install additional software on your computer or smartphone. This particular generator lets you convert HTML entities into plain text too.

References#

Tweet this | Share on LinkedIn |