BINARY TO TEXT TRANSLATOR USING JAVASCRIPT

Demo👀

How Do You Make A Binary To Text Converter Using JavaScript !

1st Step:-

First you open your HTML Editor like - Notepad++,Subline Text,Brackets, etc.

Then start program use Html, Css, Javascript.

2nd Step:-

Copy the CSS code and then Paste your HTML Editor into <head> here </head> section.

CSS Code :-

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <style>
   h1 { font-size:1.6rem; }
   h2 { font-size:1.4rem; }
   h4 { font-size:1.2rem; }
 
   .calc { background:#f9593d; padding:20px; }
   .calc button i { vertical-align:middle; }
   .calc button img { filter: invert(1); }
   .calc textarea { font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif; }
  .dtable th { position:sticky; top:0; background:#f9593d; }
  .dtable td { width:90px; }
  .dtable tr td { text-align:center; }
   #bin.draghover { border: 10px dashed #888; }
  @media all and (max-width: 320px) {
    .calc button img { display:none; }
  }
  
   .mono { font-family: monospace; }
</style>

3rd Step :-

Copy the html code and then Paste your HTML Editor into <body> here </body> section.

HTML Code :-

 
  <div id="lcol" class="d-flex justify-content-center">

      <div id="doc">
        <!-- #BeginEditable "doctext" -->
        <h1 class="text-center">
Binary to Text Translator</h1>
<p class="text-center">
Enter binary numbers with any prefix / postfix / delimiter and press the <em>Convert</em> button<br>(E.g: 01000101 01111000 01100001 01101101 01110000 01101100 01100101):</p>
<form class="calc" name="calcform" autocomplete="off">
         <div class="form-group">
            <button type="button" title="Open File" aria-label="Open File" onclick="OnOpen()" class="btn btn-primary"><i class="material-icons">folder_open</i> Open File</button>
            <button type="button" title="Open Binary File" aria-label="Open Binary File" onclick="OnOpenBin()" class="btn btn-secondary"><i class="material-icons">folder_open</i> Open Binary File</button>
            <button type="button" id="viewsel" title="View Selection" aria-label="View selection" onclick="OnViewSelection()" class="btn btn-dark"><i class="material-icons">search</i></button>
            <input type="file" id="fileElem" name="fileElem[]" accept="text/*,.c,.h,.cpp,.cs,.java,.py,.php" style="visibility:hidden; width:30px" onchange="OnFile()">
            <input type="file" id="binFileElem" name="binFileElem[]" style="visibility:hidden; width:30px" onchange="OnBinFile()">
         </div>
<div class="form-group">
            <label for="bin">Paste binary numbers or drop file:</label>
            <input id="bin" name="bin" rows="6" cols="60" class="form-control" spellcheck="false" placeholder="Binary input ..." autofocus>
         </div>
<div class="form-group">
            <label for="charsel">Character encoding (optional)</label>
            <select class="form-control" id="charsel">
               <option value="">ASCII</option>
               <option value="">Unicode</option>
               <option value="utf-8" selected>ASCII/UTF-8</option>
               <option value="utf-16le">UTF-16</option>
               <option value="utf-16le">UTF-16 little endian</option>
               <option value="utf-16be">UTF-16 big endian</option>
               <option value="windows-1252">Windows-1252</option>
               <option value="big5">Big5 (Chinese)</option>
               <option value="ibm866">CP866 (Russian)</option>
               <option value="euc-jp">EUC-JP (Japanese)</option>
               <option value="euc-kr">EUC-KR (Korean)</option>
               <option value="gb18030">GB 18030 (Chinese)</option>
               <option value="hz-gb-2312">GB 2312 (Chinese)</option>
               <option value="replacement">ISO-2022-CN (Chinese)</option>
               <option value="iso-2022-jp">ISO-2022-JP (Japanese)</option>
               <option value="windows-1252">ISO-8859-1 (Latin1/Western European)</option>
               <option value="iso-8859-2">ISO-8859-2 (Latin2/Eastern European)</option>
               <option value="iso-8859-3">ISO-8859-3 (Latin3/South European)</option>
               <option value="iso-8859-4">ISO-8859-4 (Latin4/North European)</option>
               <option value="iso-8859-5">ISO-8859-5 (Latin/Cyrillic)</option>
               <option value="iso-8859-6">ISO-8859-6 (Latin/Arabic)</option>
               <option value="iso-8859-7">ISO-8859-7 (Latin/Greek)</option>
               <option value="iso-8859-8">ISO-8859-8 (Latin/Hebrew)</option>
               <option value="iso-8859-8-i">ISO-8859-8-I (Latin/Hebrew)</option>
               <option value="iso-8859-10">ISO-8859-10 (Latin6/Nordic)</option>
               <option value="iso-8859-13">ISO-8859-13 (Latin7/Baltic Rim)</option>
               <option value="iso-8859-14">ISO-8859-14 (Latin8/Celtic)</option>
               <option value="iso-8859-15">ISO-8859-15 (Latin9/Western European)</option>
               <option value="iso-8859-16">ISO-8859-16 (Latin10/South-Eastern European)</option>
               <option value="koi8-r">KOI8-R (Russian)</option>
               <option value="koi8-u">KOI8-U (Ukrainian)</option>
               <option value="macintosh">Macintosh (x-mac-roman)</option>
               <option value="x-mac-cyrillic">Mac OS Cyrillic (x-mac-cyrillic)</option>
               <option value="shift_jis">Shift JIS (Japanese)</option>
               <option value="windows-874">Windows-874 (Thai)</option>
               <option value="windows-1250">Windows-1250 (Eastern European)</option>
               <option value="windows-1251">Windows-1251 (Cyrillic)</option>
               <option value="windows-1252">Windows-1252 (Western European)</option>
               <option value="windows-1253">Windows-1253 (Greek)</option>
               <option value="windows-1254">Windows-1254 (Turkish)</option>
               <option value="windows-1255">Windows-1255 (Hebrew)</option>
               <option value="windows-1256">Windows-1256 (Arabic)</option>
               <option value="windows-1257">Windows-1257 (Baltic)</option>
               <option value="windows-1258">Windows-1258 (Vietnamese)</option>
               <option value="x-user-defined">X-User-Defined</option>
            </select>
         </div>
<div class="form-group">
            <button type="button" title="Convert" class="btn btn-success" onclick="OnConvert()"><i class="material-icons">autorenew</i> Convert</button>
            <button type="reset" title="Reset" class="btn btn-warning"><i class="material-icons">clear</i> Reset</button>
            
         </div>
<div class="form-group">
            <input id="txt" name="txt" rows="6" cols="60" readonly class="form-control" placeholder="Text output ...">
         </div>
<div class="form-group">
            <button type="button" title="Copy" onclick="OnCopy()" class="btn btn-info"><i class="material-icons">content_copy</i> Copy</button>
            <button type="button" title="Save" onclick="OnSave()" class="btn btn-light"><i class="material-icons">save_alt</i> Save</button>
         </div>
</form>
</div>
</div>

4th Step :-

Copy the JavaScript code and then Paste your HTML editor into the upper </body>.

Javascript Code :-

 
<script src="https://www.rapidtables.com/lib/text-encoding/encoding-indexes.js" defer></script>
<script src="https://www.rapidtables.com/lib/text-encoding/encoding.js" defer></script>
<script src="https://www.rapidtables.com/lib/FileSaver.js-master/FileSaver.js" defer></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
   "use strict"
   $(document).ready( function() {
      $("#charsel").on("change", function() { OnEncodingChange(); });
      $("#del").on("change", function() { OnDelChange() });
      $("#bin").on("dragover", function(event) {
         event.preventDefault();  
         event.stopPropagation();
         $(this).addClass('draghover');
         return false;  
      });
      $("#bin").on("dragleave dragend", function(event) {
         event.preventDefault();  
         event.stopPropagation();
         $(this).removeClass('draghover');
         return false;  
      });
      $("#bin").on("drop", function(event) {
         event.preventDefault();  
         //event.stopPropagation();
         $(this).removeClass('draghover');
         var file = event.originalEvent.dataTransfer.files[0]
         document.getElementById("fileElem").value="";
         fileLoad(file);
      });
   });
   function OnOpen()
   {
      $("#fileElem").click();
   }
   function OnOpenBin()
   {
      $("#binFileElem").click();
   }
   function OnViewSelection()
   {
      var iencode = document.getElementById("charsel").selectedIndex;
      if( iencode>0 ) return;
      var start=document.getElementById("bin").selectionStart;
      var end=document.getElementById("bin").selectionEnd;
      if( end-start==0 ) return;
      OnConvert();
      var bin=document.getElementById("bin").value;
      var binlen=bin.match(/[0-1]/g).join('').length;
      var dellen=Math.round((bin.length-binlen)/(binlen/8-1));
      var len=8+dellen;
      document.getElementById("txt").focus();
      document.getElementById("txt").selectionStart = start/len;
      document.getElementById("txt").selectionEnd = (end+dellen)/len;
   }
   function OnEncodingChange()
   {
      var iencode = document.getElementById("charsel").selectedIndex;
      if( iencode<1 )
         document.getElementById("viewsel").disabled = false;
      else
         document.getElementById("viewsel").disabled = true;
   }
   function OnFile()
   {
      var file = document.getElementById("fileElem").files[0];
      fileLoad(file);
   }
   function OnBinFile()
   {
      var file = document.getElementById("binFileElem").files[0];
      binFileLoad(file);
   }
   function OnSave()
   {
      //var file=$("#file").val();
      //if( file=="" ) file="file.txt";
      fileSave("text-output.txt");
   }
   function fileLoad(file)
   {
      var reader = new FileReader();
      reader.onloadend=function(e) {
         if( e.target.readyState==FileReader.DONE ) {
            var txt = e.target.result;
            $("#bin").val(txt);
            $("#bin").focus();
         }
      };
      reader.readAsText(file, "UTF-8");
   }
   function binFileLoad(file)
   {
      var reader = new FileReader();
      reader.onloadend=function(e) {
         if( e.target.readyState==FileReader.DONE ) {
            //var txt = e.target.result;
            var bin=reader.result;
            var bytes = new Uint8Array(bin);
            var txt="";
            for(var i=0; i<bytes.length; i++)
            {
               var b=bytes[i].toString(2);
               txt+="0".repeat(8-b.length)+b+" ";
            }
            $("#bin").val(txt.trim());
            $("#bin").focus();
         }
      };
      reader.readAsArrayBuffer(file);
   }
   function fileSave(filename)
   {
      var txt=$("#txt").val();
      if( txt=="" ) return;
      var blob = new Blob([txt], {type: "text/plain;charset=utf-8"});
      saveAs(blob, filename);
   }
   function OnConvert()
   {
      var bin = $("#bin").val();
      //var i=$(".calc select")[0].selectedIndex;
      //if( i==0 )
      var iencode = document.getElementById("charsel").selectedIndex;
      if( iencode==0 )
      {
         bin = bin.replace(/[^0-1]/g,"");
         bin = bin.match(/[0-1]{8}/g);
      }
      else
         bin = bin.match(/[0-1]*/g).filter(function (el) {
            return el!="";
         });
      var len = bin.length;
      if( len==0 ) return;
      var txt='';
      if( iencode<2 )
      {
         for(var i=0; i<len; i++)
         {
            var b = bin[i];
            var code = parseInt(b,2);
            var t = String.fromCodePoint(code);
            /*
            var t;
            if( iencode==0 )
               t = String.fromCharCode(code);
            else
               t = String.fromCodePoint(code);
            */
            txt += t;
         }
      }
      else
      {
         var encoding = document.getElementById("charsel").value;
         bin = bin.map(function(item) {
            return parseInt(item, 2);
         });
         var bytes = new Uint8Array(bin);
         txt = new TextDecoder(encoding, { NONSTANDARD_allowLegacyEncoding: true }).decode(bytes);
      }
      document.calcform.txt.value = txt;
   }
   function OnSelect()
   {
      document.calcform.txt.select();
   }
   function OnCopy()
   {
      $("#txt").select();
      document.execCommand("copy");
   }
</script>
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": ["WebPage","FAQPage"],
  "name": "Binary to Text Converter",
  "mainEntity": [{
    "@type": "Question",
    "name": "How to convert Binary to Text?",
    "acceptedAnswer": {
      "@type": "Answer",
      "text": "<ol>
<li>Get binary byte code</li>
<li>Convert binary byte to decimal</li>
<li>Get character of decimal ASCII code from <a href='https://www.rapidtables.com/code/text/ascii-table.html'>ASCII table</a></li>
<li>Continue with next binary byte</li>
</ol>
<p>
<a href='https://www.rapidtables.com/convert/number/binary-to-ascii.html'>Read more</a></p>
"
    }
  }, {
    "@type": "Question",
    "name": "How to use Binary to Text converter?",
    "acceptedAnswer": {
      "@type": "Answer",
      "text": "<ol>
<li>Paste binary byte codes in input text box.</li>
<li>Select character encoding type.</li>
<li>Press the Convert button.</li>
</ol>
<p>
<a href='https://www.rapidtables.com/convert/number/binary-to-ascii.html'>Read more</a></p>
"
    }
  }, {
    "@type": "Question",
    "name": "How to convert Binary code to English?",
    "acceptedAnswer": {
      "@type": "Answer",
      "text": "<ol>
<li>Get binary byte code</li>
<li>Convert binary byte to decimal</li>
<li>Get english letter of decimal ASCII code from <a href='https://www.rapidtables.com/code/text/ascii-table.html'>ASCII table</a></li>
<li>Continue with next binary byte</li>
</ol>
<p>
<a href='https://www.rapidtables.com/convert/number/binary-to-ascii.html'>Read more</a></p>
"
    }
  }, {
    "@type": "Question",
    "name": "How to convert 01000001 binary to text?",
    "acceptedAnswer": {
      "@type": "Answer",
      "text": "Use ASCII table:<br>01000001 = 2^6+2^2 = 64+1 = 65 = 'A' character
      <p>
<a href='https://www.rapidtables.com/convert/number/binary-to-ascii.html'>Read more</a></p>
"
    }
  }, {
    "@type": "Question",
    "name": "How to convert 00110000 binary to text?",
    "acceptedAnswer": {
      "@type": "Answer",
      "text": "Use ASCII table:<br>00110000 = 2^5+2^4 = 2^5+2^4 = 32+16 = 48 = '0' character
      <p>
<a href='https://www.rapidtables.com/convert/number/binary-to-ascii.html'>Read more</a></p>
"
    }
  }]
}
</script>

How To Download This Project

The first step you click on the ''Download Project'' button you will see a new popup, then click on again the ''Download'' button. Now your project will be downloaded.

Project source Code

Related Project

3 Comments

AnonymousJuly 4, 2024 at 5:29 AM
I am overwhelmed by your post with such a nice topic. Usually I visit your blogs and get updated through the information you include but today’s blog would be the most appreciable. Well done! fullstack java course in pune , is also good choice to become java developer . wish you good luck
AnonymousJuly 4, 2024 at 5:44 AM
great post keep posting fullstack java course in pune
iteducationcentreJuly 17, 2024 at 10:52 PM
Thanks for posting. It was worth reading.
Java training in Pune

1Add

BINARY TO TEXT TRANSLATOR USING JAVASCRIPT | BEGINNER

Demo👀

How Do You Make A Binary To Text Converter Using JavaScript !

How To Download This Project

Project source Code

Related Project

Post a Comment

3 Comments

Followers

Followers

Popular Posts

TO-DO LIST USING JAVASCRIPT | BEGINNER

CHUCK NORRIS JOKE GENERATOR USING JAVASCRIPT

Best 40+ javascript projects for beginners With Source Code

1Add

BINARY TO TEXT TRANSLATOR USING JAVASCRIPT | BEGINNER

Demo👀

How Do You Make A Binary To Text Converter Using JavaScript !

How To Download This Project

Project source Code

Binary To Text Converter Source Code

Related Project

You may like these posts

Post a Comment

3 Comments

Followers

Followers

Social Plugin

Popular Posts

TO-DO LIST USING JAVASCRIPT | BEGINNER

CHUCK NORRIS JOKE GENERATOR USING JAVASCRIPT

Best 40+ javascript projects for beginners With Source Code