In my Client/Server application I'm getting from the server, string in Hex format which I need to convert to UTF8. Then after some manipulation I need to encode the string back, from UTF8 to Hex and return in to the server.

I've built this function to parse the Hex string to UTF8. However when I try to reverse this algorithm I'm getting something pletely else.

Here is my test:

function hexToUtf8(s)
{
  return decodeURIComponent(
     s.replace(/\s+/g, '') // remove spaces
      .replace(/[0-9a-f]{2}/g, '%$&') // add '%' before each 2 characters
  );
}

function utf8ToHex(s)
{
  return encodeURIComponent(s).replace(/%/g, ""); // remove all '%' characters
}

var hex = "52656c6179204f4e214f706572617465642062792030353232";

var utf8 = hexToUtf8(hex); // result: "Relay ON!Operated by 0522" (correct value)
var hex2 = utf8ToHex(utf8); // result: "Relay20ON!Operated20by200522" (some junk)

console.log("Hex: " + hex);
console.log("UTF8: " + utf8);
console.log("Hex2: " + hex2);
console.log("Is conversion OK: " + (hex == hex2)); // false

In my Client/Server application I'm getting from the server, string in Hex format which I need to convert to UTF8. Then after some manipulation I need to encode the string back, from UTF8 to Hex and return in to the server.

I've built this function to parse the Hex string to UTF8. However when I try to reverse this algorithm I'm getting something pletely else.

Here is my test:

function hexToUtf8(s)
{
  return decodeURIComponent(
     s.replace(/\s+/g, '') // remove spaces
      .replace(/[0-9a-f]{2}/g, '%$&') // add '%' before each 2 characters
  );
}

function utf8ToHex(s)
{
  return encodeURIComponent(s).replace(/%/g, ""); // remove all '%' characters
}

var hex = "52656c6179204f4e214f706572617465642062792030353232";

var utf8 = hexToUtf8(hex); // result: "Relay ON!Operated by 0522" (correct value)
var hex2 = utf8ToHex(utf8); // result: "Relay20ON!Operated20by200522" (some junk)

console.log("Hex: " + hex);
console.log("UTF8: " + utf8);
console.log("Hex2: " + hex2);
console.log("Is conversion OK: " + (hex == hex2)); // false

• javascript
• encoding
• utf-8
• hex

• I made you a snippet to have a minimal reproducible example – mplungjan Commented Mar 3, 2020 at 10:25
• You seem to forget the spaces in hex2 – mplungjan Commented Mar 3, 2020 at 10:25
• encodeURIComponent is not HEX, are you sure it's HEX your after? – Keith Commented Mar 3, 2020 at 10:28
• @Keith - I'm sure I want to get the result in Hex, I don't sure I need to use encodeURIComponent – Gil Epshtain Commented Mar 3, 2020 at 10:33

1 Answer 1

Your utf8toHex is using encodeURIComponent, and this won't make everything HEX.

So I've slightly modified your utf8toHex to handle HEX.

Update Forgot toString(16) does not pre-zero the hex, so if they was values less 16, eg. line feeds etc it would fail So, to added the 0 and sliced to make sure.

Update 2, Use TextEncoder, this will handle UTF-8 much better than use charCodeAt.

function hexToUtf8(s)
{
  return decodeURIComponent(
     s.replace(/\s+/g, '') // remove spaces
      .replace(/[0-9a-f]{2}/g, '%$&') // add '%' before each 2 characters
  );
}

const utf8encoder = new TextEncoder();

function utf8ToHex(s)
{
  const rb = utf8encoder.encode(s);
  let r = '';
  for (const b of rb) {
    r += ('0' + b.toString(16)).slice(-2);
  }
  return r;
}


var hex = "d7a452656c6179204f4e214f706572617465642062792030353232";

var utf8 = hexToUtf8(hex);
var hex2 = utf8ToHex(utf8);

console.log("Hex: " + hex);
console.log("UTF8: " + utf8);
console.log("Hex2: " + hex2);
console.log("Is conversion OK: " + (hex == hex2));