[Html]
<! Doctype html>
<Html>
<Head>
<Meta charset = "UTF-8">
<Title> transcoding and Decoding in js </title>
<Style>
/* Reset */
Body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {margin: 0; padding: 0 ;}
Table {border-collapse: collapse; border-spacing: 0 ;}
Fieldset, img {border: 0 ;}
Address, caption, cite, code, dfn, em, strong, th, var {font-style: normal; font-weight: normal ;}
Ol, ul {list-style: none ;}
Caption, th {text-align: left ;}
H1, h2, h3, h4, h5, h6 {font-size: 100%; font-weight: normal ;}
Q: before, q: after {content :'';}
Abbr, acronym {border: 0; font-variant: normal ;}
Sup {vertical-align: text-top ;}
Sub {vertical-align: text-bottom ;}
Input, textarea, select {font-family: inherit; font-size: inherit; font-weight: inherit ;}
Input, textarea, select {* font-size: 100% ;}
Input: focus, textarea: focus, select: focus {outline: none ;}
Select, input {vertical-align: middle ;}
Legend {color: #000 ;}
. Clean: before,. clean: after,. clearfix: before,. clearfix: after {content: ""; display: table ;}
. Clean: after,. clearfix: after {clear: both ;}
. Clean,. clearfix {zoom: 1 ;}
. Clear {clear: both ;}
. Fl {float: left ;}
. Fr {float: right ;}
. Break {word-wrap: break-word; width: inherit ;}
. Linkhidden {text-indent:-9999em; overflow: hidden ;}
. Hidden {display: none ;}
/* Reset */
Body {background: url (http://webapp.bdimg.com/static/11281511/appweb/images/new_index/bg.png );}
. Main {margin: 20px auto; padding: 20px 0; width: 960px; background: url (http://2uncd.sinaapp.com/images/bodybg.png); border-radius: 10px; box-shadow: 2px 5px 7px # ccc ;}
H1 {font: 30px/50px "microsoft yahei"; color: #069; text-align: center; text-shadow: 2px 2px 2px #006666 ;}
Textarea {display: block; margin: 20px auto; padding: 10px; width: 80%; height: 200px; border: 1px solid # eee; border-radius: 5px; box-shadow: 2px 5px 5px # ccc; resize: vertical ;}
. Box {margin: 10px auto; width: 50% ;}
. Box label {padding: 0 20px; width: 150px; font: 12px/28px Arial, simsun; text-align: right ;}
. Box input {margin: 0 15px 0 0; padding: 0 5px; height: 26px; border: 1px solid # 2A77FF; border-radius: 4px; background: -webkit-gradient (linear, 0 0, 0 100%, from (# 008EEA), to (#0080D3); background:-moz-linear-gradient (top, # 008EEA, #0080D3); box-shadow: 2px 4px #999999; font-size: 12px; color: # FFF; cursor: pointer ;}
</Style>
<Script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"> </script>
<Script>
$ (Function (){
$ ("Input"). click (function (){
Var fun = $ (this). data (). type;
$ Txt = $ ("# txt ");
Str = $ txt. val ();
Function dispose (str ){
Switch (fun ){
Case "escape ":
Return escape (str );
Break;
Case "unescape ":
Return unescape (str );
Break;
Case "encodeURI ":
Return encodeURI (str );
Break;
Case "decodeURI ":
Return decodeURI (str );
Break;
Case "encodeURIComponent ":
Return encodeURIComponent (str );
Break;
Case "decodeURIComponent ":
Return decodeURIComponent (str );
Break;
Case "unicode ":
Return decodeURIComponent (escape (str ). toLocaleLowerCase (). replace (/% u/gi, '\ U'); // transcoding, lowercase conversion, regular replacement "%", decodeURIComponent Decoding
Break;
Case "deunicode ":
Return unescape (str. replace (// \ u/gi, '% U'); // regular replacement "\", decoding
Break;
Default:
Break;
};
};
$ Txt. val (dispose (str ));
});
});
</Script>
</Head>
<Body>
<Div class = "main">
<H1> common JavaScript transcoding <Textarea id = "txt"> </textarea>
<Div class = "box clearfix">
<Label class = "fl"> escape </label>
<Input class = "fl" type = "button" data-type = "escape" value = "encrypted"/>
<Input class = "fl" type = "button" data-type = "unescape" value = "decrypt"/>
</Div>
<Div class = "box clearfix">
<Label class = "fl"> encodeURI </label>
<Input class = "fl" type = "button" data-type = "encodeURI" value = "encrypted"/>
<Input class = "fl" type = "button" data-type = "decodeURI" value = "decrypt"/>
</Div>
<Div class = "box clearfix">
<Label class = "fl"> encodeURIComponent </label>
<Input class = "fl" type = "button" data-type = "encodeURIComponent" value = "encrypted"/>
<Input class = "fl" type = "button" data-type = "decodeURIComponent" value = "decrypt"/>
</Div>
<Div class = "box clearfix">
<Label class = "fl"> unicode </label>
<Input class = "fl" type = "button" data-type = "unicode" value = "encrypted"/>
<Input class = "fl" type = "button" data-type = "deunicode" value = "decryption"/>
</Div>
</Div>
</Body>
</Html>