ASCII to Binary Text Translator in JavaScript

Hello! On another rainy day I decided to create a utility, a tool that translates Binary to ASCII Text, and vice versa, and I’ll teach you!

Right, let’s go, first of all, I must report that this incredible tool is made using HTML and JavaScript.

Let’s go by parts, we’ll make two files, one containing JavaScript, which will do all the work, and another with HTML for user interface.

/*
Function to check if the Ascii x Binary translation is real-time.
*/
function checkRealTime() {
    // Variable realTime receives checkbox content.
    var realTime = document.getElementById("realTime").checked;

    // If true calls the showBinary function.
    if (realTime) showBinary();
}

function decimalBinary(decInput) {
    // Variable binaryNumeric receives text and transforms to string.
    var binaryNumeric = "00000000"+decInput.toString(2);

    // binaryNumeric receives value filtering size-8.
    binaryNumeric = binaryNumeric.substr(binaryNumeric.length-8,8);

    // Returns binaryNumeric to showBinary function.
    return binaryNumeric;
}

/*
Function to show binary, from text(ascii) to binary.
*/
function showBinary() {
    // Variable declaration
    var binaryChar, binaryResult="", text, removeSpace;

    // Variable text receives the content of textarea "text".
    text = document.getElementById("text").value;

    /* Variable removeSpace receives checkbox content, to check if
    it displays space in binary. */
    removeSpace = document.getElementById("removeSpace").checked;

    // Repetition loop, from 0 to the number of characters in text variable.
    for (i = 0; i < text.length; i++) {
        /* Returns an integer, representing unicode at position "i" of text string,
        after passing through decimalBinary function. */
        binaryChar = decimalBinary(text.charCodeAt(i));

        // If removeSpace variable is NOT true adds space.
        if (!removeSpace) binaryChar += " ";

        // Adds the result.
        binaryResult += binaryChar;
    }

    // Textarea "binary" receives the result in binary.
    document.getElementById("binary").value = binaryResult;
}

/*
Function to show text, from binary to text (ascii).
*/
function showAscii() {
    // Variable declaration
    var binaryText, textResult="", binaryLength;

    /* Variable binaryText receives everything in textarea "binary",
    as long as it's not 0 or 1. */
    binaryText = document.getElementById("binary").value.replace(/[^01]/g, "");

    // Variable binaryLength receives the length of characters in binaryText%8.
    binaryLength = binaryText.length-(binaryText.length%8);

    // Repetition loop, from 0 to binary length with increment 8.
    for (z=0; z< binaryLength; z=z+8) {
        //Returns a string from Unicode character values.
        textResult += String.fromCharCode(parseInt(binaryText.substr(z,8),2));
    }

    // Textarea "text" receives the result in text (ascii).
    document.getElementById("text").value = textResult;
}

<script src="js/binary.js"></script>
<form action="" method="post">
    <p>
        <label for="realTime">
            <input type="checkbox" name="realTime" id="realTime" checked="checked" />
            Translate in real time. <em>(with JavaScript)</em>
        </label>
        <br />
        <label for="removeSpace">
            <input type="checkbox" name="removeSpace" id="removeSpace" />
                Remove spaces.
        </label>
    </p>
    <h4>
        <label for="text">
            Normal ASCII text:
        </label>
    </h4>
    <p>
        <textarea name="text" rows="5" cols="67" id="text"
                  onkeyup="checkRealTime();" onkeypress="checkRealTime();">
        </textarea>
        <br />
        <input type="submit" value="View in Binary"
               onclick="showBinary(); return false;" />
    </p>
</form>

<form action="" method="post">
    <h4>
        <label for="binary">
            Binary:
        </label>
    </h4>
    <p>
        <textarea name="binary" rows="5" cols="67" id="binary">
        </textarea>
        <br />
        <input type="submit" value="View in ASCII"
               onclick="showAscii(); return false;" />
    </p>
</form>

charCodeAt(), Gets the Unicode code of the character, toString(2), Converts to binary, Padding zeros, Adds zeros to the left to complete 8 bits and Concatenation, Joins all binary values.

Replace regex, Removes characters that are not 0 or 1, Group division, Separates into 8-bit blocks, parseInt(x, 2), Converts binary to decimal and String.fromCharCode(), Converts code to character.

The tool offers real-time translation (converts automatically while typing), option to remove spaces for compact format, and bidirectional conversion between ASCII and binary.

Example: The word Hello becomes 01001000 01100101 01101100 01101100 01101111 in binary.

Each character is represented by 8 bits (1 byte), following the standard ASCII table. This tool demonstrates in a practical way how computers store and process text, converting readable characters into their fundamental binary representation.