Home > Developer > JavaScript

Talking about Javascript Base64 encryption and decryption, javascriptbase64

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Talking about Javascript Base64 encryption and decryption, javascriptbase64

Html code:

Copy codeThe Code is as follows:
<! DOCTYPE html>
<Html>
<Head>
<Title> Page Title </title>
<Style type = "text/css">
* {Font-family: Consolas; font-style: italic}
. Responsebox {width: 900px; margin: 10px auto; padding: 10px; border: 2px solid #366; border-radius: 10px 0 10px 0; text-align: center}
. Responsebox input,. responsebox button {font-size: 30px; margin: 5px; padding: 5px ;}
. Spansuper {vertical-align: super; font-size: 14px}
. Spanbottom {vertical-align: text-bottom; font-size: 12px; margin-left:-110px}
# Showbox {width: 900px; height: pixel PX; border: 5px solid #663; border-radius: 0 20px 0 20px; margin: 10px auto; padding: 8px; font-size: 20px}
</Style>
</Head>
<Body>
<Div class = "responsebox">
<H1> Javascript Base64 Encode & Decode <span class = "spansuper"> veinyf@gmail.com </span> <span class = "spanbottom"> </span>
<Input type = "text" id = "input">
<Input type = "checkbox" id = "checkbox" checked = "checked"> Base64 </input>
<Button id = "btn"> Convert done! </Button>
</Div>
<Div id = "showbox"> </div>
</Body>
<Script type = "text/javascript">
/* Javascript knowledge:
* Function: window. atob () window. btoa () unescape () escape () encodeURIComponent () decodeURIComponent ()
* Clear the first space in the regular expression: _ string. replace (/(^ \ s *) | (\ s * $)/g ,"");
*
* CovertBase64orString self-executed Function
* Inputid input box id
* Checkboxid select box id
* Btnid button id
* Showid html shows the container id. Here is a div # showbox
*/
(Function CovertBase64orString (inputid, checkboxid, btnid, showid ){
Var checkbox = document. getElementById (checkboxid); // html dom select checkbox
Var chkvalue = checkbox. getAttribute ("checked"); // html dom select checkedvalue
Var btn = document. getElementById (btnid); // html dom select button id
Var isbase64; // base64toString or StringtoBase64 bool
Var returnval = null; // Converted string
Chkvalue = "checked "? Isbase64 = true: isbase64 = false; // you can specify isbase64 as the check button's initialization status.
Checkbox. addEventListener ("click", function (e) {// checkbox click event registration
Var _ ckvak = checkbox. getAttribute ("checked"); // when a click event occurs, the check status is changed and the value is isbase64.
If (_ ckvak = "checked "){
Checkbox. setAttribute ("checked", null );
Isbase64 = false;
} Else {
Checkbox. setAttribute ("checked", "checked ");
Isbase64 = true;
}
}, True );
Btn. addEventListener ("click", function (e) {// button click event registration
Var _ show = document. getElementById (showid); // html dom select showbox id
Var _ inputvalue = document. getElementById (inputid). value; // value of the text box
// _ Inputvalue = _ inputvalue. replace (/(^ \ s *) | (\ s * $)/g, ""); // removes the first space in the regular expression. It seems that btoa and abob have already done this.
Var _ showlength = _ show. childNodes. length; // traverses the showbox and clears the showbox content.
While (_ showlength> 0 ){
_ Show. removeChild (_ show. childNodes [_ showlength-1]);
_ Showlength --;
}
If (isbase64) {// string to base64, supports Chinese encoding, unescape, encodeURIComponent
Returnval = window. btoa (unescape (encodeURIComponent (_ inputvalue )));
} Else {// base64 to string
Returnval = decodeURIComponent (escape (window. atob (_ inputvalue )));
}
_ Show. appendChild (document. createTextNode (returnval); // add context to showbox
}, True );
}) ("Input", "checkbox", "btn", "showbox ");
// CovertBase64orString ("input", "checkbox", "btn", "showbox ");
</Script>
</Html>

Effect:

We recommend that you use Javascript IDE better than Aptana. Komodo IDE (free version: Komodo Edit, which has the same basic functions) supports syntax highlighting, intelligent sensing, and perl, python, ruby, and nodejs syntax.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More