Online Hexadecimal Converter

Online tool for converting string to hexadecimal characters and hexadecimal characters to string. Conversion is done in the browser, no data is sent to the backend.

HTML

CSS

JavaScript

<div id="converter">
  <div id="converter-top">
    <span id="prefix">
      <label>Prefix</label>
        <input type="radio" name="prefix" value="\x" checked> <code>\x</code>
        <input type="radio" name="prefix" value="0x"> <code>0x</code>
        <input type="radio" name="prefix" value="space"> Space
        <input type="radio" name="prefix" value="none"> None
    </span>
    <input type="checkbox" name="uppercase">Uppercase hex
  </div>
  <div id="textareas">
    <textarea id="input" placeholder="Input"></textarea>
    <textarea id="output" placeholder="Output"></textarea>
  </div>
  <div id="converter-buttons">
    <span>
      <button id="convert">Convert</button>
      <select id="conversion-type">
        <option value="string">String to Hex</option>
        <option value="hex">Hex to String</option>
      </select>
    </span>
    <button id="swap-values">Swap values</button>
  </div>
</div>

#converter {
  margin-top: 30px;
}
#converter-top {
  margin-bottom: 5px;
}
#converter-top span {
  margin-right: 80px;
}
#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;
}
#prefix label {
  font-weight: bold;
  margin-right: 10px;
  color: #404040;
}
#converter-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
}
#convert, #conversion-type, #swap-values {
  font-size: 15px;
  border-radius: 5px;
}

document.querySelector('#convert').onclick = function() {
  const inputMode = document.querySelector('#conversion-type').value;
  const input = document.querySelector('#input').value;
  if (!input) return;

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

  let prefix = document.querySelector('input[name="prefix"]:checked').value;
  if (prefix === 'space') prefix = ' ';
  else if (prefix === 'none') prefix = '';

  let output = '';

  if (inputMode === 'string') {
    input.split('').forEach(char => {
      let hex = char.charCodeAt(0).toString(16);
      hex = ('0' + hex).slice(-2);
      output += prefix + (uppercase ? hex.toUpperCase() : hex);
    });
  } else {
    if (prefix) {
      input.split(prefix).forEach(code => {
        output += String.fromCharCode(parseInt(code, 16));
      });
    } else {
      const end = input.length;
      let i = 0;
      while (i < end) {
        const limit = i + 2;
        const code = input.substring(i, limit);
        output += String.fromCharCode(parseInt(code, 16));
        i = limit;
      }
    }
  }

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

document.querySelector('#swap-values').onclick = function() {
  const input = document.querySelector('#input').value;
  const output = document.querySelector('#output').value;
  document.querySelector('#input').value = output;
  document.querySelector('#output').value = input;
}

Hage Yaapa

Related