0

Let us say that I have a text string that was converted into hexadecimal with PHP. For example:

<?php
$text = 'hello world';
$text_hex = bin2hex($text);
echo $text_hex; //echos 68656c6c6f20776f726c64
echo '<br>';
echo hex2bin($text_hex); //echos hello world
?>

How do I convert $text_hex, which will be a hexadecimal number, into a text string in JavaScript (just like the function hex2bin() in PHP).

So far I have only found ways to convert the hexadecimal number into a binary number, but not ways to interpret that binary number as a text string. So, for example, I managed to make this:

<script>function hex2bin(hex){
    var resultado = (parseInt(hex, 16).toString(2));
    return resultado;
};</script>
<div id="test">

</div>
hex2bin,  write an hexadecimal number here:<br>
<input type="text" id="textinput" oninput="document.getElementById('test').innerText = hex2bin(document.getElementById('textinput').value)"><br>
<code> hello world = 68656c6c6f20776f726c64</code>

But that binary number is managed as a number, and I don't get how to interpret it as a text string.

How could I do it?


Edit:

Thank you very much to Bharata and to Laurence Mommers for their proposed solutions. They work but only with ascii characters. When it is tried to use others like ñ, ÿ, æ, ç, œ, it does not work. I tried even defining the charset as UTF-8 and as latin1 just in case that was the issue but it is not changing anything.

<script>function hex2bin(hex){
    var resultado = (parseInt(hex, 16).toString(2));
    return resultado;
};

function hex2a(hexx) {
    var hex = hexx.toString();//force conversion
    var str = '';
    for (var i = 0; (i < hex.length && hex.substr(i, 2) !== '00'); i += 2)
        str += String.fromCharCode(parseInt(hex.substr(i, 2), 16));
    return str;
};

function hexToString(hex)
{
    return hex.match(/../g).map(function(v)
    {
        // "+" symbol is for converting from string to integer
        return String.fromCharCode(+('0x'+v));
    }).join('')
};
</script>
Original failed script UTF-8:
<div id="test" charset="UTF-8">
</div>

Laurence Mommers's script UTF-8:
<div id="test1" charset="UTF-8">
</div>

Bharata's script UTF-8:
<div id="test2" charset="UTF-8">
</div>

Original failed script ISO-8859-1:
<div id="test3" charset="ISO-8859-1">
</div>

Laurence Mommers's script ISO-8859-1:
<div id="test4" charset="ISO-8859-1">
</div>

Bharata's script ISO-8859-1:
<div id="test5" charset="ISO-8859-1">
</div>

<br>Write an hexadecimal number here:<br>
<input type="text" id="textinput" oninput="document.getElementById('test').innerText = hex2bin(document.getElementById('textinput').value); document.getElementById('test1').innerText = hex2a(document.getElementById('textinput').value); document.getElementById('test2').innerText = hexToString(document.getElementById('textinput').value); document.getElementById('test3').innerText = hex2bin(document.getElementById('textinput').value); document.getElementById('test4').innerText = hex2a(document.getElementById('textinput').value); document.getElementById('test5').innerText = hexToString(document.getElementById('textinput').value)"><br>
<code> php bin2hex('hello world') = 68656c6c6f20776f726c64</code>
<br>
<code> php bin2hex('ñ, ÿ, æ, ç, œ') = c3b12c20c3bf2c20c3a62c20c3a72c20c593</code>

My guess is that the method fromCharCode() is using a different charset to the one that php is using. Perhaps there is a way to make it use the charset that php uses? Or to make the hexadecimal conversion to the charset of javascript? Does this charset varies per browser?

algo
  • 108
  • 1
  • 11

3 Answers3

1

You could try this solution:

function hexToString(hex)
{
    return hex.match(/../g).map(function(v)
    {
        // "+" symbol is for converting from string to integer
        return String.fromCharCode(+('0x'+v));
    }).join('')
}

var text_hex = '68656c6c6f20776f726c64';

console.log(hexToString(text_hex)); //hello world
Bharata
  • 13,509
  • 6
  • 36
  • 50
  • Hello, this solution does not work with non ascii characters, like ñ, ÿ, æ, ç, œ... Although php's function renders them correctly. I guess there is some issue with the character encoding, which is different in php than in javascript? – algo Jul 19 '18 at 12:23
  • @algo, please write me 2 things: 1. the original string before `bin2hex` and 2. the string after `bin2hex` which not work – Bharata Jul 19 '18 at 12:27
  • The original string: ; this returns c3b12c20c3bf2c20c3a62c20c3a72c20c593 ; however the proposed solutionconverts the hex number into ñ, ÿ, æ, ç, Å. Thank you. – algo Jul 19 '18 at 12:50
1

This should also work for non ascii characters. the decodeURIComponent(escape(x)) solution is not the nicest solution, but it is the only way i know of for converting to UTF-16

<div id="test"></div>

<script>
function hex2a(hexx) {
    var hex = hexx.toString(); // Force string conversion
    var array = [];
    for (var i = 0; (i < hex.length && hex.substr(i, 2) !== '00'); i += 2)
     array.push(parseInt(hex.substr(i, 2), 16));
      
    return decodeURIComponent(escape(String.fromCharCode.apply(null, array)));
}

document.getElementById('test').innerText = hex2a("c3b12c20c3bf2c20c3a62c20c3a72c20c5932c2068656c6c6f20776f726c64");
</script>
Laurence Mommers
  • 687
  • 5
  • 12
0

The encoding of the php ouput is utf-8 : 0xc3, 0xb1 -> U+00F1 = 'ñ'.

To decode a string containing a sequence of hexadecimal pairs in javascript you can insert a '%' before each pair of hexadecimal characters (with regex), and then parse the new string with decodeURIComponent which decode escaped utf-8 sequences to string characters :

function hex2string(hex)
{
  try {
    return decodeURIComponent((hex || '').replace(/([0-9A-Fa-f]{2})/g, '%$1'));
  }
  catch (URIError) {
    return '\ufffd';
  }
}

Here a code snippet to test hex2string :

<script>
  function hex2string(hex)
  {
    try {
      return decodeURIComponent((hex || '').replace(/([0-9A-Fa-f]{2})/g, '%$1'));
    }
    catch (URIError) {
      return '\ufffd';
    }
  }
</script>

<div id="test">

</div>

<br>Write an hexadecimal number here:<br>
<input type="text" id="textinput" oninput="document.getElementById('test').innerText = hex2string(document.getElementById('textinput').value)"><br>
<code> php bin2hex('hello world') = 68656c6c6f20776f726c64</code>
<br>
<code> php bin2hex('ñ, ÿ, æ, ç, œ') = c3b12c20c3bf2c20c3a62c20c3a72c20c593</code>
Jérôme Migné
  • 244
  • 1
  • 5