Extended application of charCodeAt() and fromCharCode() methods in JS: encryption and decryption

JS implements client-side web page encryption and decryption technology, which can be used for selective hidden display. Of course, the encryption security of the client cannot be compared with that of the server, and it certainly cannot be used to encrypt content such as passwords, but it is enough for display of general-level content.

There are many solutions for JS encryption and decryption. This article uses the charCodeAt() method and fromCharCode() method of the String object to obtain and modify the ASCII encoding of the characters.

Encryption, decryption code:

<span style="color: #008080;"> 1</span> <span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">DOCTYPE html</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 2</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 3</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 4</span>     <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="utf-8"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 5</span> 
<span style="color: #008080;"> 6</span>     <span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>网页加密及解密<span style="color: #0000ff;"></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 7</span>     <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="author"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="xiongzaiqiren"</span> <span style="color: #0000ff;">/></span>
<span style="color: #008080;"> 8</span>     <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="keywords"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">=""</span> <span style="color: #0000ff;">/></span>
<span style="color: #008080;"> 9</span>     <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="description"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">=""</span> <span style="color: #0000ff;">/></span>
<span style="color: #008080;">10</span>     <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="generator"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="ClassBao team coding in July 10, 2017"</span> <span style="color: #0000ff;">/></span>
<span style="color: #008080;">11</span> 
<span style="color: #008080;">12</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">13</span> 
<span style="color: #008080;">14</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">15</span>     <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">><</span><span style="color: #800000;">textarea </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="text1"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="textfield"</span><span style="color: #ff0000;"> cols</span><span style="color: #0000ff;">="50"</span><span style="color: #ff0000;"> rows</span><span style="color: #0000ff;">="5"</span><span style="color: #0000ff;">></span>钱庄王员外这个人怎么样?<span style="color: #0000ff;"></</span><span style="color: #800000;">textarea</span><span style="color: #0000ff;">></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">16</span>     <span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="button"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="Button1"</span><span style="color: #ff0000;"> value</span><span style="color: #0000ff;">="加密"</span><span style="color: #ff0000;"> onClick</span><span style="color: #0000ff;">="text1.value = MySign.Encrypt(text1.value);"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">17</span>     <span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="button"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="Button2"</span><span style="color: #ff0000;"> value</span><span style="color: #0000ff;">="解密"</span><span style="color: #ff0000;"> onClick</span><span style="color: #0000ff;">="text1.value = MySign.UnEncrypt(text1.value);"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">18</span> 
<span style="color: #008080;">19</span>     <span style="color: #0000ff;"><</span><span style="color: #800000;">script </span><span style="color: #ff0000;">language</span><span style="color: #0000ff;">="JavaScript"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">20</span>         <span style="background-color: #f5f5f5; color: #0000ff;">var</span><span style="background-color: #f5f5f5; color: #000000;"> MySign </span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;"> {
</span><span style="color: #008080;">21</span>             <span style="background-color: #f5f5f5; color: #008000;">//</span><span style="background-color: #f5f5f5; color: #008000;">加密/解密次数</span>
<span style="color: #008080;">22</span> <span style="background-color: #f5f5f5; color: #000000;">            num: </span><span style="background-color: #f5f5f5; color: #000000;">0</span><span style="background-color: #f5f5f5; color: #000000;">,
</span><span style="color: #008080;">23</span>             <span style="background-color: #f5f5f5; color: #008000;">//</span><span style="background-color: #f5f5f5; color: #008000;">加密</span>
<span style="color: #008080;">24</span> <span style="background-color: #f5f5f5; color: #000000;">            Encrypt: </span><span style="background-color: #f5f5f5; color: #0000ff;">function</span><span style="background-color: #f5f5f5; color: #000000;"> (Text) {
</span><span style="color: #008080;">25</span>                 <span style="background-color: #f5f5f5; color: #0000ff;">this</span><span style="background-color: #f5f5f5; color: #000000;">.num </span><span style="background-color: #f5f5f5; color: #000000;">=</span> <span style="background-color: #f5f5f5; color: #0000ff;">this</span><span style="background-color: #f5f5f5; color: #000000;">.num </span><span style="background-color: #f5f5f5; color: #000000;">+</span> <span style="background-color: #f5f5f5; color: #000000;">1</span><span style="background-color: #f5f5f5; color: #000000;">;
</span><span style="color: #008080;">26</span> <span style="background-color: #f5f5f5; color: #000000;">                output </span><span style="background-color: #f5f5f5; color: #000000;">=</span> <span style="background-color: #f5f5f5; color: #0000ff;">new</span><span style="background-color: #f5f5f5; color: #000000;"> String;
</span><span style="color: #008080;">27</span> <span style="background-color: #f5f5f5; color: #000000;">                alterText </span><span style="background-color: #f5f5f5; color: #000000;">=</span> <span style="background-color: #f5f5f5; color: #0000ff;">new</span><span style="background-color: #f5f5f5; color: #000000;"> Array();
</span><span style="color: #008080;">28</span> <span style="background-color: #f5f5f5; color: #000000;">                varCost </span><span style="background-color: #f5f5f5; color: #000000;">=</span> <span style="background-color: #f5f5f5; color: #0000ff;">new</span><span style="background-color: #f5f5f5; color: #000000;"> Array();
</span><span style="color: #008080;">29</span> <span style="background-color: #f5f5f5; color: #000000;">                TextSize </span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;"> Text.length;
</span><span style="color: #008080;">30</span>                 <span style="background-color: #f5f5f5; color: #0000ff;">for</span><span style="background-color: #f5f5f5; color: #000000;"> (i </span><span style="background-color: #f5f5f5; color: #000000;">=</span> <span style="background-color: #f5f5f5; color: #000000;">0</span><span style="background-color: #f5f5f5; color: #000000;">; i </span><span style="background-color: #f5f5f5; color: #000000;"><</span><span style="background-color: #f5f5f5; color: #000000;"> TextSize; i</span><span style="background-color: #f5f5f5; color: #000000;">++</span><span style="background-color: #f5f5f5; color: #000000;">) {
</span><span style="color: #008080;">31</span> <span style="background-color: #f5f5f5; color: #000000;">                    idea </span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;"> Math.round(Math.random() </span><span style="background-color: #f5f5f5; color: #000000;">*</span> <span style="background-color: #f5f5f5; color: #000000;">111</span><span style="background-color: #f5f5f5; color: #000000;">) </span><span style="background-color: #f5f5f5; color: #000000;">+</span> <span style="background-color: #f5f5f5; color: #000000;">77</span><span style="background-color: #f5f5f5; color: #000000;">;
</span><span style="color: #008080;">32</span> <span style="background-color: #f5f5f5; color: #000000;">                    alterText[i] </span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;"> Text.charCodeAt(i) </span><span style="background-color: #f5f5f5; color: #000000;">+</span><span style="background-color: #f5f5f5; color: #000000;"> idea;
</span><span style="color: #008080;">33</span> <span style="background-color: #f5f5f5; color: #000000;">                    varCost[i] </span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;"> idea;
</span><span style="color: #008080;">34</span> <span style="background-color: #f5f5f5; color: #000000;">                }
</span><span style="color: #008080;">35</span>                 <span style="background-color: #f5f5f5; color: #0000ff;">for</span><span style="background-color: #f5f5f5; color: #000000;"> (i </span><span style="background-color: #f5f5f5; color: #000000;">=</span> <span style="background-color: #f5f5f5; color: #000000;">0</span><span style="background-color: #f5f5f5; color: #000000;">; i </span><span style="background-color: #f5f5f5; color: #000000;"><</span><span style="background-color: #f5f5f5; color: #000000;"> TextSize; i</span><span style="background-color: #f5f5f5; color: #000000;">++</span><span style="background-color: #f5f5f5; color: #000000;">) {
</span><span style="color: #008080;">36</span> <span style="background-color: #f5f5f5; color: #000000;">                    output </span><span style="background-color: #f5f5f5; color: #000000;">+=</span><span style="background-color: #f5f5f5; color: #000000;"> String.fromCharCode(alterText[i], varCost[i]);
</span><span style="color: #008080;">37</span> <span style="background-color: #f5f5f5; color: #000000;">                }
</span><span style="color: #008080;">38</span>                 <span style="background-color: #f5f5f5; color: #008000;">//</span><span style="background-color: #f5f5f5; color: #008000;">text1.value = output;</span>
<span style="color: #008080;">39</span>                 <span style="background-color: #f5f5f5; color: #0000ff;">return</span><span style="background-color: #f5f5f5; color: #000000;"> output;
</span><span style="color: #008080;">40</span> <span style="background-color: #f5f5f5; color: #000000;">            },
</span><span style="color: #008080;">41</span> 
<span style="color: #008080;">42</span>             <span style="background-color: #f5f5f5; color: #008000;">//</span><span style="background-color: #f5f5f5; color: #008000;">解密</span>
<span style="color: #008080;">43</span> <span style="background-color: #f5f5f5; color: #000000;">            UnEncrypt: </span><span style="background-color: #f5f5f5; color: #0000ff;">function</span><span style="background-color: #f5f5f5; color: #000000;"> (Text) {
</span><span style="color: #008080;">44</span>                 <span style="background-color: #f5f5f5; color: #0000ff;">if</span><span style="background-color: #f5f5f5; color: #000000;"> (</span><span style="background-color: #f5f5f5; color: #0000ff;">this</span><span style="background-color: #f5f5f5; color: #000000;">.num </span><span style="background-color: #f5f5f5; color: #000000;">></span> <span style="background-color: #f5f5f5; color: #000000;">0</span><span style="background-color: #f5f5f5; color: #000000;">) {
</span><span style="color: #008080;">45</span>                     <span style="background-color: #f5f5f5; color: #0000ff;">this</span><span style="background-color: #f5f5f5; color: #000000;">.num </span><span style="background-color: #f5f5f5; color: #000000;">=</span> <span style="background-color: #f5f5f5; color: #0000ff;">this</span><span style="background-color: #f5f5f5; color: #000000;">.num </span><span style="background-color: #f5f5f5; color: #000000;">-</span> <span style="background-color: #f5f5f5; color: #000000;">1</span><span style="background-color: #f5f5f5; color: #000000;">;
</span><span style="color: #008080;">46</span> <span style="background-color: #f5f5f5; color: #000000;">                    output </span><span style="background-color: #f5f5f5; color: #000000;">=</span> <span style="background-color: #f5f5f5; color: #0000ff;">new</span><span style="background-color: #f5f5f5; color: #000000;"> String;
</span><span style="color: #008080;">47</span> <span style="background-color: #f5f5f5; color: #000000;">                    alterText1 </span><span style="background-color: #f5f5f5; color: #000000;">=</span> <span style="background-color: #f5f5f5; color: #0000ff;">new</span><span style="background-color: #f5f5f5; color: #000000;"> Array();
</span><span style="color: #008080;">48</span> <span style="background-color: #f5f5f5; color: #000000;">                    varCost1 </span><span style="background-color: #f5f5f5; color: #000000;">=</span> <span style="background-color: #f5f5f5; color: #0000ff;">new</span><span style="background-color: #f5f5f5; color: #000000;"> Array();
</span><span style="color: #008080;">49</span> <span style="background-color: #f5f5f5; color: #000000;">                    TextSize </span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;"> Text.length;
</span><span style="color: #008080;">50</span>                     <span style="background-color: #f5f5f5; color: #0000ff;">for</span><span style="background-color: #f5f5f5; color: #000000;"> (i </span><span style="background-color: #f5f5f5; color: #000000;">=</span> <span style="background-color: #f5f5f5; color: #000000;">0</span><span style="background-color: #f5f5f5; color: #000000;">; i </span><span style="background-color: #f5f5f5; color: #000000;"><</span><span style="background-color: #f5f5f5; color: #000000;"> TextSize; i</span><span style="background-color: #f5f5f5; color: #000000;">++</span><span style="background-color: #f5f5f5; color: #000000;">) {
</span><span style="color: #008080;">51</span> <span style="background-color: #f5f5f5; color: #000000;">                        alterText[i] </span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;"> Text.charCodeAt(i);
</span><span style="color: #008080;">52</span> <span style="background-color: #f5f5f5; color: #000000;">                        varCost[i] </span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;"> Text.charCodeAt(i </span><span style="background-color: #f5f5f5; color: #000000;">+</span> <span style="background-color: #f5f5f5; color: #000000;">1</span><span style="background-color: #f5f5f5; color: #000000;">);
</span><span style="color: #008080;">53</span> <span style="background-color: #f5f5f5; color: #000000;">                    }
</span><span style="color: #008080;">54</span>                     <span style="background-color: #f5f5f5; color: #0000ff;">for</span><span style="background-color: #f5f5f5; color: #000000;"> (i </span><span style="background-color: #f5f5f5; color: #000000;">=</span> <span style="background-color: #f5f5f5; color: #000000;">0</span><span style="background-color: #f5f5f5; color: #000000;">; i </span><span style="background-color: #f5f5f5; color: #000000;"><</span><span style="background-color: #f5f5f5; color: #000000;"> TextSize; i </span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;"> i </span><span style="background-color: #f5f5f5; color: #000000;">+</span> <span style="background-color: #f5f5f5; color: #000000;">2</span><span style="background-color: #f5f5f5; color: #000000;">) {
</span><span style="color: #008080;">55</span> <span style="background-color: #f5f5f5; color: #000000;">                        output </span><span style="background-color: #f5f5f5; color: #000000;">+=</span><span style="background-color: #f5f5f5; color: #000000;"> String.fromCharCode(alterText[i] </span><span style="background-color: #f5f5f5; color: #000000;">-</span><span style="background-color: #f5f5f5; color: #000000;"> varCost[i]);
</span><span style="color: #008080;">56</span> <span style="background-color: #f5f5f5; color: #000000;">                    }
</span><span style="color: #008080;">57</span>                     <span style="background-color: #f5f5f5; color: #008000;">//</span><span style="background-color: #f5f5f5; color: #008000;">text1.value = output;</span>
<span style="color: #008080;">58</span>                     <span style="background-color: #f5f5f5; color: #0000ff;">return</span><span style="background-color: #f5f5f5; color: #000000;"> output;
</span><span style="color: #008080;">59</span> <span style="background-color: #f5f5f5; color: #000000;">                }
</span><span style="color: #008080;">60</span> <span style="background-color: #f5f5f5; color: #000000;">            }
</span><span style="color: #008080;">61</span> <span style="background-color: #f5f5f5; color: #000000;">        };
</span><span style="color: #008080;">62</span> 
<span style="color: #008080;">63</span> 
<span style="color: #008080;">64</span>         <span style="background-color: #f5f5f5; color: #008000;">//</span><span style="background-color: #f5f5f5; color: #008000;">测试代码</span>
<span style="color: #008080;">65</span>         <span style="background-color: #f5f5f5; color: #0000ff;">var</span><span style="background-color: #f5f5f5; color: #000000;"> testString </span><span style="background-color: #f5f5f5; color: #000000;">=</span> <span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">光头强，还不去砍树？</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">;
</span><span style="color: #008080;">66</span> <span style="background-color: #f5f5f5; color: #000000;">        console.log(testString);
</span><span style="color: #008080;">67</span> 
<span style="color: #008080;">68</span>         <span style="background-color: #f5f5f5; color: #0000ff;">var</span><span style="background-color: #f5f5f5; color: #000000;"> sign </span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;"> MySign.Encrypt(testString); </span><span style="background-color: #f5f5f5; color: #008000;">//</span><span style="background-color: #f5f5f5; color: #008000;">凑ˆ妣o忕›ｧ[還¬什³呯´硠S桲aﾁb</span>
<span style="color: #008080;">69</span>         <span style="background-color: #f5f5f5; color: #0000ff;">var</span><span style="background-color: #f5f5f5; color: #000000;"> sign2 </span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;"> MySign.UnEncrypt(sign); </span><span style="background-color: #f5f5f5; color: #008000;">//</span><span style="background-color: #f5f5f5; color: #008000;">光头强，还不去砍树？</span>
<span style="color: #008080;">70</span> 
<span style="color: #008080;">71</span> <span style="background-color: #f5f5f5; color: #000000;">        console.log(sign);
</span><span style="color: #008080;">72</span> <span style="background-color: #f5f5f5; color: #000000;">        console.log(sign2);
</span><span style="color: #008080;">73</span> 
<span style="color: #008080;">74</span>     <span style="color: #0000ff;"></</span><span style="color: #800000;">script</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">75</span> 
<span style="color: #008080;">76</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">77</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>

The above is the detailed content of Extended application of charCodeAt() and fromCharCode() methods in JS: encryption and decryption. For more information, please follow other related articles on the PHP Chinese website!