How to convert text to binary code in JavaScript?

Question

I want JavaScript to translate text in a textarea into binary code.

For example, if a user types in "TEST" into the textarea, the value "01010100 01000101 01010011 01010100" should be returned.

I would like to avoid using a switch statement to assign each character a binary code value (e.g. case "T": return "01010100) or any other similar technique.

Here's a JSFiddle to show what I mean. Is this possible in native JavaScript?

Umbilicate

Found this through Google. I think it's what you're looking for. roubaixinteractive.com/PlayGround/Binary_Conversion/… – Stutzman

you have charCodeAt method for strings in js – Pneumatograph

People should be aware that strings are stored as UTF-16 in JavaScript. Therefore, you'll have UTF-16 binary representation. If you want something else, UTF-8 for instance, you have to manually convert charcodes to UTF-8 before encoding to binary (exemple here). – Langham

Answer 1

What you should do is convert every char using charCodeAt function to get the Ascii Code in decimal. Then you can convert it to Binary value using toString(2):

function convert() {
  var output = document.getElementById("ti2");
  var input = document.getElementById("ti1").value;
  output.value = "";
  for (var i = 0; i < input.length; i++) {
      output.value += input[i].charCodeAt(0).toString(2) + " ";
  }
}

<input id="ti1" value ="TEST"/>
<input id="ti2"/>
<button onClick="convert();">Convert!</button>

And here's a fiddle: http://jsfiddle.net/fA24Y/1/

Cheyenne

Alternate way to left pad : var a = 'a'.charCodeAt(0).toString(2); /* a == "1100001" */ a = new Array(9 - a.length).join('0') + a; /* a == "01100001" */. – Proffitt

Question: Isn't there another way to do it, like make a blob with this text and then using filereader output it as binary data....however it just seems to output the text for me. – Addict

This actually produced characters when I input certain strings in a loop, so there is something wrong with this function. alejandro's answer however works. – Premillenarian

Note for future readers: Be aware that the charset is not limited to 8 bits. Try charToBin("𐍈") – Resuscitator

Why not "input.charCodeAt(i)" instead? – Gaussmeter

This has an issue with leading zeros. output.value += (0b100000000 + input[i].charCodeAt(0)).toString(2).substring(1) + " "; fixes it – Hearty

or just '1100'.padStart(8, '0') => '00001100`. See developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… – Jackstraws

Answer 2

This might be the simplest you can get:

function text2Binary(string) {
    return string.split('').map(function (char) {
        return char.charCodeAt(0).toString(2);
    }).join(' ');
}

Sesquicentennial

+1 for the "join", fixing trailing space of the accepted answer. You may also add .padStart(8,'0') to force each caracter to be on 8 bits. – Promoter

Answer 3

1. traverse the string
2. convert every character to their char code
3. convert the char code to binary
4. push it into an array and add the left 0s
5. return a string separated by space

Code:

function textToBin(text) {
  var length = text.length,
      output = [];
  for (var i = 0;i < length; i++) {
    var bin = text[i].charCodeAt().toString(2);
    output.push(Array(8-bin.length+1).join("0") + bin);
  } 
  return output.join(" ");
}
textToBin("!a") => "00100001 01100001"

Another way

function textToBin(text) {
  return (
    Array
      .from(text)
      .reduce((acc, char) => acc.concat(char.charCodeAt().toString(2)), [])
      .map(bin => '0'.repeat(8 - bin.length) + bin )
      .join(' ')
  );
}

Aldenalder

You can omit the +1 in in 9-bin.length+1 by making the 8 a 9 like this function textToBin(text) { var length = text.length, output = []; for (var i = 0;i < length; i++) { var bin = text[i].charCodeAt().toString(2); output.push(Array(9-bin.length).join("0") + bin); } return output.join(" "); } – Millett

Simpler is output.push(('0000000' + bin).slice(-8)). ;-) But some characters, like endash, are more than 8 bits: charCode 8212 -> 10000000010100. – Doit

Answer 4

Here's a pretty generic, native implementation, that I wrote some time ago,

// ABC - a generic, native JS (A)scii(B)inary(C)onverter.
// (c) 2013 Stephan Schmitz <[email protected]>
// License: MIT, http://eyecatchup.mit-license.org
// URL: https://gist.github.com/eyecatchup/6742657
var ABC = {
  toAscii: function(bin) {
    return bin.replace(/\s*[01]{8}\s*/g, function(bin) {
      return String.fromCharCode(parseInt(bin, 2))
    })
  },
  toBinary: function(str, spaceSeparatedOctets) {
    return str.replace(/[\s\S]/g, function(str) {
      str = ABC.zeroPad(str.charCodeAt().toString(2));
      return !1 == spaceSeparatedOctets ? str : str + " "
    })
  },
  zeroPad: function(num) {
    return "00000000".slice(String(num).length) + num
  }
};

and to be used as follows:

var binary1      = "01100110011001010110010101101100011010010110111001100111001000000110110001110101011000110110101101111001",
    binary2      = "01100110 01100101 01100101 01101100 01101001 01101110 01100111 00100000 01101100 01110101 01100011 01101011 01111001",
    binary1Ascii = ABC.toAscii(binary1),
    binary2Ascii = ABC.toAscii(binary2);

console.log("Binary 1:                   " + binary1);
console.log("Binary 1 to ASCII:          " + binary1Ascii);
console.log("Binary 2:                   " + binary2);
console.log("Binary 2 to ASCII:          " + binary2Ascii);
console.log("Ascii to Binary:            " + ABC.toBinary(binary1Ascii));     // default: space-separated octets
console.log("Ascii to Binary /wo spaces: " + ABC.toBinary(binary1Ascii, 0));  // 2nd parameter false to not space-separate octets

Source is on Github (gist): https://gist.github.com/eyecatchup/6742657

Hope it helps. Feel free to use for whatever you want (well, at least for whatever MIT permits).

Isiahisiahi

Answer 5

var PADDING = "00000000"

var string = "TEST"
var resultArray = []

for (var i = 0; i < string.length; i++) {
  var compact = string.charCodeAt(i).toString(2)
  var padded  = compact.substring(0, PADDING.length - compact.length) + compact

  resultArray.push(padded)
}

console.log(resultArray.join(" "))

Bullbat

There is a problem with your code, I've checked the results here- binaryhexconverter.com/ascii-text-to-binary-converter here - roubaixinteractive.com/PlayGround/Binary_Conversion/… and here - string-functions.com/string-binary.aspx Your code always put "1" at the first number. – Antimissile

@Antimissile That's true, you need the next code to make it work: var padded = PADDING.substring(0, PADDING.length - compact.length) + compact – Odum

Answer 6

The other answers will work for most cases. But it's worth noting that charCodeAt() and related don't work with UTF-8 strings (that is, they throw errors if there are any characters outside the standard ASCII range). Here's a workaround.

// UTF-8 to binary
var utf8ToBin = function( s ){
    s = unescape( encodeURIComponent( s ) );
    var chr, i = 0, l = s.length, out = '';
    for( ; i < l; i ++ ){
        chr = s.charCodeAt( i ).toString( 2 );
        while( chr.length % 8 != 0 ){ chr = '0' + chr; }
        out += chr;
    }
    return out;
};

// Binary to UTF-8
var binToUtf8 = function( s ){
    var i = 0, l = s.length, chr, out = '';
    for( ; i < l; i += 8 ){
        chr = parseInt( s.substr( i, 8 ), 2 ).toString( 16 );
        out += '%' + ( ( chr.length % 2 == 0 ) ? chr : '0' + chr );
    }
    return decodeURIComponent( out );
};

The escape/unescape() functions are deprecated. If you need polyfills for them, you can check out the more comprehensive UTF-8 encoding example found here: http://jsfiddle.net/47zwb41o

Interloper

Answer 7

Just a hint into the right direction

var foo = "TEST",
    res = [ ];

foo.split('').forEach(function( letter ) {
    var bin     = letter.charCodeAt( 0 ).toString( 2 ),
        padding = 8 - bin.length;

    res.push( new Array( padding+1 ).join( '0' ) + bin );
});

console.log( res );

Tropical

Answer 8

8-bit characters with leading 0

'sometext'
        .split('')
        .map((char) => '00'.concat(char.charCodeAt(0).toString(2)).slice(-8))
        .join(' ');

If you need 6 or 7 bit, just change .slice(-8)

Principium

Answer 9

Thank you Majid Laissi for your answer

I made 2 functions out from your code:

the goal was to implement convertation of string to VARBINARY, BINARY and back

const stringToBinary = function(string, maxBytes) {
  //for BINARY maxBytes = 255
  //for VARBINARY maxBytes = 65535
  let binaryOutput = '';
  if (string.length > maxBytes) {
    string = string.substring(0, maxBytes);
  }

  for (var i = 0; i < string.length; i++) {
    binaryOutput += string[i].charCodeAt(0).toString(2) + ' ';
  }

  return binaryOutput;
};

and backward convertation:

const binaryToString = function(binary) {
  const arrayOfBytes = binary.split(' ');

  let stringOutput = '';

  for (let i = 0; i < arrayOfBytes.length; i++) {
    stringOutput += String.fromCharCode(parseInt(arrayOfBytes[i], 2));
  }

  return stringOutput;
};

and here is a working example: https://jsbin.com/futalidenu/edit?js,console

Ioves

Answer 10

Provided you're working in node or a browser with BigInt support, this version cuts costs by saving the expensive string construction for the very end:

const zero = 0n
const shift = 8n

function asciiToBinary (str) {
  const len = str.length
  let n = zero
  for (let i = 0; i < len; i++) {
    n = (n << shift) + BigInt(str.charCodeAt(i))
  }
  return n.toString(2).padStart(len * 8, 0)
}

It's about twice as fast as the other solutions mentioned here including this simple es6+ implementation:

const toBinary = s => [...s]
  .map(x => x
    .codePointAt()
    .toString(2)
    .padStart(8,0)
  )
  .join('')

If you need to handle unicode characters, here's this guy:

const zero = 0n
const shift = 8n
const bigShift = 16n
const byte = 255n

function unicodeToBinary (str) {
  const len = str.length
  let n = zero
  for (let i = 0; i < len; i++) {
    const bits = BigInt(str.codePointAt(i))
    n = (n << (bits > byte ? bigShift : shift)) + bits
  }
  const bin = n.toString(2)
  return bin.padStart(8 * Math.ceil(bin.length / 8), 0)
}

Lowboy

Answer 11

this seems to be the simplified version

Array.from('abc').map((each)=>each.charCodeAt(0).toString(2)).join(" ")

Winfrid

Answer 12

This is as short as you can get. It's based on the top-rated answer but transformed to a reduce function.

"TEST".split("").reduce(function (a, b) { return a + b.charCodeAt(0).toString(2)}, "")

Schoonmaker

Answer 13

const textToBinary = (string) => {
    return string.split('').map((char) => 
      char.charCodeAt().toString(2)).join(' ');
}

console.log(textToBinary('hello world'))

Garibald

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Phox

Answer 14

var UTF8ToBin=function(f){for(var a,c=0,d=(f=unescape(encodeURIComponent(f))).length,b="";c<d;c++){for(a=f.charCodeAt(c).toString(2);a.length%8!=0;){a="0"+a}b+=a}return b},binToUTF8=function(f){for(var a,c=0,d=f.length,b="";c<d;c+=8){b+="%"+((a=parseInt(f.substr(c,8),2).toString(16)).length%2==0?a:"0"+a)}return decodeURIComponent(b)};

This is a small minified JavaScript Code to convert UTF8 to Binary and Vice versa.

Glycerite

Answer 15

This is a solution for UTF-8-based textual binary representation. It leverages TextEncoder, which encodes a string to its UTF-8 bytes.

This solution separates characters by spaces. The individual "byte-bits" of multi-byte characters are separated by a minus character (-).

// inspired by https://mcmap.net/q/266800/-javascript-arraybuffer-to-hex
function stringToUtf8BinaryRepresentation(inputString) {
  const result = Array.from(inputString).map(
    char => [... new TextEncoder().encode(char)].map(
      x => x.toString(2).padStart(8, '0')
    ).join('-')
  ).join(' ');
  return result;
}

// ### example usage #########################
function print(inputString) {
  console.log("--------------");
  console.log(inputString);
  console.log(stringToUtf8BinaryRepresentation(inputString));
}

// compare with https://en.wikipedia.org/wiki/UTF-8#Encoding
// compare with https://en.wikipedia.org/wiki/UTF-8#Codepage_layout
// compare with UTF-16, which JavaScript uses for strings: https://en.wikipedia.org/wiki/UTF-16#Examples

print("TEST");
print("hello world");
print("$");
print("£");
print("€");
print("한");
print("𐍈");
print("παράδειγμα");

print("🤡");
print("👨‍👩‍👧‍👦");
print("👩🏻‍🤝‍🧑🏿");
print("🇺🇦");

Haiphong

Answer 16

use the code: 'text'.split('').map(e=>{return e.charCodeAt(0).toString(2)}) e.g.-

const text='some text';
const output=text.split('').map(e=>{return e.charCodeAt(0).toString(2)})

Elissa

Answer 17

Simple using Buffer

const text = "TEST";
[...Buffer.from(text).values()]                   // [ 84, 69, 83, 84 ]
    .map(byte => byte.toString(2).padStart(8, 0)) // [ '01010100', '01000101', '01010011', '01010100' ]                        
    .join(' ')                                    // '01010100 01000101 01010011 01010100'

Glasgow

Answer 18

The shortest and simplest solution:

"x".charCodeAt().toString(2) // 1111000

String.charCodeAt() charCodeAt(0) returns unicode: "x".charCodeAt() // 120

Object.toString() charCodeAt().toString(2) converts unicode to binary.

---

For multiple string characters:

[..."Tesla"].map((i) => i.charCodeAt().toString(2)).join(" ");
// 1010100 1100101 1110011 1101100 1100001

Spread syntax (...) [..."Tesla"] // ['T', 'e', 's', 'l', 'a']

Array.map() [..."Tesla"].map((i) => i.charCodeAt()) // [84, 101, 115, 108, 97]

Array.join() Put a space " " after each element in the array map(i) and convert the array to string.

Makeup

Answer 19

I'm pretty sure that you can do something like this: Returns a STRING:

    const toBinary = (str)=>{
        let r = []
        for (let i=0; i<str.length; i++) {
            r.push(str.charCodeAt(i).toString(2));
        }
        return r.join("");
    }

Or, as an int:

    const toBinary = (str)=>{
        let r = []
        for (let i=0; i<str.length; i++) {
            r.push(str.charCodeAt(i).toString(2));
        }
        return parseInt(r.join(""));
    }

Douzepers

Answer 20

To convert text to binary in Javascript we must first transform the text to its decimal character code then take the binary value of that code, we must also take into account padding leading zeros and characters that can be greater then one byte.

const textarea = document.body.querySelector('textarea');

document.body.querySelector('input').addEventListener('input',function(){

    textarea.value = this.value
    .split('')
    .map((char)=>{
      const bin = char.charCodeAt(0).toString(2);
      return (
       (
        Array(
          (
            Math.ceil(bin.length/8)*8
          )
          -bin.length+1
        )
        .join("0")
       )
       +bin
     );
   })
   .join('');

});

<input placeholder="Enter String">
<textarea id="conversion" placeholder="Conversion" readonly></textarea>

Watts

Answer 21

Simple one-liner to convert a string of text to a binary numbers:

new TextEncoder().encode('foobar').join('') // 1021111119897114

Farce