Sling Academy
Home/JavaScript/JavaScript: Convert String to Hex and Vice Versa

JavaScript: Convert String to Hex and Vice Versa

Last updated: June 17, 2023

A hex value (or a hexadecimal value) is a number that is represented in base 16, using digits from 0 to 9 and letters from A to F. A hex representation of a string is a way of encoding each character of the string as a hex value, usually by using the ASCII code of the character. For example, the string slingacademy.com can be represented as 736c696e6761636164656d792e636f6d in hex.

This succinct, practical article will show you how to convert a string to a hex representation and vice versa in modern JavaScript.

Converting a String to a Hex Representation

The main idea here is to use the charCodeAt() method to get the Unicode value of each character in the string and then utilize the toString() method with a radix of 16 to convert the Unicode values to hexadecimal representation.

The steps:

  1. Iterate over each character in the string with a for loop.
  2. Use charCodeAt() to get the Unicode value of the character.
  3. Convert the Unicode value to hexadecimal using toString(16).
  4. Concatenate the hexadecimal values to form the hexadecimal string representation.

Code example:

// define a function that converts a string to hex
const stringToHex = (str) => {
  let hex = '';
  for (let i = 0; i < str.length; i++) {
    const charCode = str.charCodeAt(i);
    const hexValue = charCode.toString(16);

    // Pad with zeros to ensure two-digit representation
    hex += hexValue.padStart(2, '0');
  }
  return hex;
};

// Example usage
console.log(stringToHex('abc'))
console.log(stringToHex("Welcome to Sling Academy!"))

Output:

616263
57656c636f6d6520746f20536c696e672041636164656d7921

Converting a Hex Representation to a String

To turn a hex representation into a string, you can use the parseInt() function to convert the hex value to decimal and then call String.fromCharCode() to convert the decimal value to the corresponding character. The steps below will clarify what I mean:

  1. Split the input hex string into pairs of hex digits.
  2. Iterate over each pair and convert it to decimal using parseInt() with a radix of 16.
  3. Use String.fromCharCode() to convert the decimal value to the corresponding character.
  4. Concatenate the characters to form the resulting string.

Code example:

// Define a function to convert hex to string
const hexToString = (hex) => {
  let str = '';
  for (let i = 0; i < hex.length; i += 2) {
    const hexValue = hex.substr(i, 2);
    const decimalValue = parseInt(hexValue, 16);
    str += String.fromCharCode(decimalValue);
  }
  return str;
};

// Example usage
console.log(hexToString('616263'));
console.log(hexToString('736c696e6761636164656d792e636f6d'));

Output:

abc
script.js:14 slingacademy.com

That’s it. The tutorial ends here (I don’t want you to get bored with meaningless words). Happy coding & have a nice day!

Next Article: JavaScript: Remove Multiple Consecutive White Spaces

Previous Article: JavaScript: Check if a string contains non-alphanumeric characters

Series: JavaScript Strings

JavaScript

You May Also Like

  • Handle Zoom and Scroll with the Visual Viewport API in JavaScript
  • Improve Security Posture Using JavaScript Trusted Types
  • Allow Seamless Device Switching Using JavaScript Remote Playback
  • Update Content Proactively with the JavaScript Push API
  • Simplify Tooltip and Dropdown Creation via JavaScript Popover API
  • Improve User Experience Through Performance Metrics in JavaScript
  • Coordinate Workers Using Channel Messaging in JavaScript
  • Exchange Data Between Iframes Using Channel Messaging in JavaScript
  • Manipulating Time Zones in JavaScript Without Libraries
  • Solving Simple Algebraic Equations Using JavaScript Math Functions
  • Emulating Traditional OOP Constructs with JavaScript Classes
  • Smoothing Out User Flows: Focus Management Techniques in JavaScript
  • Creating Dynamic Timers and Counters with JavaScript
  • Implement Old-School Data Fetching Using JavaScript XMLHttpRequest
  • Load Dynamic Content Without Reloading via XMLHttpRequest in JavaScript
  • Manage Error Handling and Timeouts Using XMLHttpRequest in JavaScript
  • Handle XML and JSON Responses via JavaScript XMLHttpRequest
  • Make AJAX Requests with XMLHttpRequest in JavaScript
  • Customize Subtitle Styling Using JavaScript WebVTT Integration