JavaScript: Need functions to convert a string containing binary to hex, then convert back to binary - Stack Overflow

admin管理员组

文章数量:1193758

Lets say I have a string in JavaScript with binary data in it. It may look like this:

var binary = '00001000010001000101010100001110';

I need some reliable functions to convert this into a hexadecimal string, and then convert back from that hexadecimal to a binary string again. I know about the following functions

// Convert binary to hexadecimal
var hex = parseInt(binaryCharacters, 2).toString(16);

// Convert hexadecimal to binary
var binary = parseInt(hex, 16).toString(2)

But I'm not sure how to convert the whole string at once. Am I right in understanding I need to convert each 4 binary bits at a time into a single hexadecimal character? Then to get back to binary I loop through each hexadecimal character and convert to binary again?

I have hunted for some simple examples doing this in JavaScript but can't find any.

Many thanks

Lets say I have a string in JavaScript with binary data in it. It may look like this:

var binary = '00001000010001000101010100001110';

I need some reliable functions to convert this into a hexadecimal string, and then convert back from that hexadecimal to a binary string again. I know about the following functions

// Convert binary to hexadecimal
var hex = parseInt(binaryCharacters, 2).toString(16);

// Convert hexadecimal to binary
var binary = parseInt(hex, 16).toString(2)

But I'm not sure how to convert the whole string at once. Am I right in understanding I need to convert each 4 binary bits at a time into a single hexadecimal character? Then to get back to binary I loop through each hexadecimal character and convert to binary again?

I have hunted for some simple examples doing this in JavaScript but can't find any.

Many thanks

• javascript
• binary
• converters
• hex

Share Improve this question Follow asked Jun 20, 2013 at 3:44 user2503552user2503552 64122 gold badges88 silver badges1515 bronze badges 2

• stackoverflow.com/questions/7695450/…, gist.github.com/ghalimi/4525262, phpjs.org/functions/bin2hex. Oh Google, your best friend... – elclanrs Commented Jun 20, 2013 at 3:47
• @elclanrs The last one (bin2hex function) doesn't work. It gives me output like 3030303031303030303130303031303030313031303130... which doesn't look right. Also why is it padding values with length less than 2 with an extra '0' char? I thought it was supposed to convert on a nibble (4bit) by nibble basis and each nibble will create a single hex char??? – user2503552 Commented Jun 20, 2013 at 4:13

Add a comment  | 

4 Answers 4

Sorted by: Reset to default 13

Try this jsfiddle.

The more interesting functions to you are here. Not necessarily the cleanest or most efficient ones, but yea:

// converts binary string to a hexadecimal string
// returns an object with key 'valid' to a boolean value, indicating
// if the string is a valid binary string.
// If 'valid' is true, the converted hex string can be obtained by
// the 'result' key of the returned object
function binaryToHex(s) {
    var i, k, part, accum, ret = '';
    for (i = s.length-1; i >= 3; i -= 4) {
        // extract out in substrings of 4 and convert to hex
        part = s.substr(i+1-4, 4);
        accum = 0;
        for (k = 0; k < 4; k += 1) {
            if (part[k] !== '0' && part[k] !== '1') {
                // invalid character
                return { valid: false };
            }
            // compute the length 4 substring
            accum = accum * 2 + parseInt(part[k], 10);
        }
        if (accum >= 10) {
            // 'A' to 'F'
            ret = String.fromCharCode(accum - 10 + 'A'.charCodeAt(0)) + ret;
        } else {
            // '0' to '9'
            ret = String(accum) + ret;
        }
    }
    // remaining characters, i = 0, 1, or 2
    if (i >= 0) {
        accum = 0;
        // convert from front
        for (k = 0; k <= i; k += 1) {
            if (s[k] !== '0' && s[k] !== '1') {
                return { valid: false };
            }
            accum = accum * 2 + parseInt(s[k], 10);
        }
        // 3 bits, value cannot exceed 2^3 - 1 = 7, just convert
        ret = String(accum) + ret;
    }
    return { valid: true, result: ret };
}

// converts hexadecimal string to a binary string
// returns an object with key 'valid' to a boolean value, indicating
// if the string is a valid hexadecimal string.
// If 'valid' is true, the converted binary string can be obtained by
// the 'result' key of the returned object
function hexToBinary(s) {
    var i, k, part, ret = '';
    // lookup table for easier conversion. '0' characters are padded for '1' to '7'
    var lookupTable = {
        '0': '0000', '1': '0001', '2': '0010', '3': '0011', '4': '0100',
        '5': '0101', '6': '0110', '7': '0111', '8': '1000', '9': '1001',
        'a': '1010', 'b': '1011', 'c': '1100', 'd': '1101',
        'e': '1110', 'f': '1111',
        'A': '1010', 'B': '1011', 'C': '1100', 'D': '1101',
        'E': '1110', 'F': '1111'
    };
    for (i = 0; i < s.length; i += 1) {
        if (lookupTable.hasOwnProperty(s[i])) {
            ret += lookupTable[s[i]];
        } else {
            return { valid: false };
        }
    }
    return { valid: true, result: ret };
}

Why not using Array.prototype.reduce?

var binstr = "00001000010001000101010100001110"

function bin2hex(b) {
    return b.match(/.{4}/g).reduce(function(acc, i) {
        return acc + parseInt(i, 2).toString(16);
    }, '')
}

function hex2bin(h) {
    return h.split('').reduce(function(acc, i) {
        return acc + ('000' + parseInt(i, 16).toString(2)).substr(-4, 4);
    }, '')
}

console.log(binstr);
> 00001000010001000101010100001110
console.log(bin2hex(binstr));
> 0844550e
console.log(hex2bin(bin2hex(binstr)));
> 00001000010001000101010100001110

Link to jsfiddle here.

Notes:

1. In bin2hex, if you want to convert also trailing chunks of less than 4 bits to hex, replace {4} with {1,4}. However, converting back the result to binary, will produce a string that differs from the original. For example, converting forth and back "111101" would produce "11110001".
2. In hex2bin, binary values are left-padded with zeroes so as to have 4 binary digits for every hex digit.

Well I found an algorithm here which helped explain how to do it. Also this page on Wikipedia helped confirming the 4-bit binary to hexadecimal mappings. I came up with the following code to do it. Other code snippets I found on the web didn't work at all. Let me know if you would make any improvements. You could probably even do a straight lookup table really using that info from Wikipedia which would be faster.

var tools = {
    /**
     * Converts binary code to hexadecimal string
     * @param {string} binaryString A string containing binary numbers e.g. '01001101'
     * @return {string} A string containing the hexadecimal numbers
     */
    convertBinaryToHexadecimal: function(binaryString)
    {
        var output = '';

        // For every 4 bits in the binary string
        for (var i=0; i < binaryString.length; i+=4)
        {
            // Grab a chunk of 4 bits
            var bytes = binaryString.substr(i, 4);

            // Convert to decimal then hexadecimal
            var decimal = parseInt(bytes, 2);
            var hex = decimal.toString(16);

            // Uppercase all the letters and append to output
            output += hex.toUpperCase();
        }

        return output;      
    },

    /**
     * Converts hexadecimal code to binary code
     * @param {string} A string containing single digit hexadecimal numbers
     * @return {string} A string containing binary numbers
     */
    convertHexadecimalToBinary: function(hexString)
    {
        var output = '';

        // For each hexadecimal character
        for (var i=0; i < hexString.length; i++)
        {
            // Convert to decimal
            var decimal = parseInt(hexString.charAt(i), 16);

            // Convert to binary and add 0s onto the left as necessary to make up to 4 bits
            var binary = this.leftPadding(decimal.toString(2), '0', 4);

            // Append to string         
            output += binary;
        }

        return output;
    },

    /**
     * Left pad a string with a certain character to a total number of characters
     * @param {string} inputString The string to be padded
     * @param {string} padCharacter The character that the string should be padded with
     * @param {string} totalCharacters The length of string that's required
     * @returns {string} A string with characters appended to the front of it
     */
    leftPadding: function(inputString, padCharacter, totalCharacters)
    {
        // If the string is already the right length, just return it
        if (!inputString || !padCharacter || inputString.length >= totalCharacters)
        {
            return inputString;
        }

        // Work out how many extra characters we need to add to the string
        var charsToAdd = (totalCharacters - inputString.length)/padCharacter.length;

        // Add padding onto the string
        for (var i = 0; i < charsToAdd; i++)
        {
            inputString = padCharacter + inputString;
        }

        return inputString;
    }
};

To convert bin to hex and reverse i use these functions:

function bintohex()
{    
     mybin = document.getElementById('bin').value;

     z = -1; number = 0;
     for(i = mybin.length; i > -1; i--) 
     {
         //Every 1 in binary string is converted to decimal and added to number
         if(mybin.charAt(i) == "1"){
             number += Math.pow(2, z);
         }
         z+=1;
     }
     // Return is converting decimal to hexadecimal
     document.getElementById('result').innerHTML = number.toString(16);
}

function hextobin()
{
     mybin = "";
     /// Converting to decimal value and geting ceil of decimal sqrt
     myhex = document.getElementById('hex').value;
     mydec = parseInt(myhex, 16);
     i = Math.ceil( Math.sqrt(mydec) );
     while(i >= 0)
     {
         if(Math.pow(2, i) <= mydec){
             mydec = mydec-Math.pow(2, i);
             mybin += "1";
         }else if(mybin != "")
             mybin = mybin + "0";
             i = i-1;
         }
         document.getElementById('result').innerHTML = mybin;
}

Input binary: <input type = "text" id = "bin">
<button onclick = "bintohex()">Convert to Hex</button><br />

Input Hecadecimal: <input type = "text" id = "hex">
<button onclick = "hextobin()">Convert to Bin</button><br />

Results: <div id = "result"></div>

Don't forget to check your answer.

本文标签：