- 背景
在進行一些信息提交的時候，很多人都會選擇從word、excel或者其他地方進行復制然后粘貼在輸入框，但是這種輸入可能會帶有一些不可見的字符，提交的時候沒有顯示，但是在數據庫里面卻能看到該字符的編碼。
2. 不可見字符
不可見字符，在ascll碼表（0~127）中，0~31和127是不可見字符，不能直接被打印出來。
| 二進制 | 十進制 | 十六進制 | 字符/縮寫 | 解釋 |
|---|---|---|---|---|
| 00000000 | 0 | 00 | NUL (NULL) | 空字符 |
| 00000001 | 1 | 01 | SOH (Start Of Headling) | 標題開始 |
| 00000010 | 2 | 02 | STX (Start Of Text) | 正文開始 |
| 00000011 | 3 | 03 | ETX (End Of Text) | 正文結束 |
| 00000100 | 4 | 04 | EOT (End Of Transmission) | 傳輸結束 |
| 00000101 | 5 | 05 | ENQ (Enquiry) | 請求 |
| 00000110 | 6 | 06 | ACK (Acknowledge) | 回應/響應/收到通知 |
| 00000111 | 7 | 07 | BEL (Bell) | 響鈴 |
| 00001000 | 8 | 08 | BS (Backspace) | 退格 |
| 00001001 | 9 | 09 | HT (Horizontal Tab) | 水平制表符 |
| 00001010 | 10 | 0A | LF/NL(Line Feed/New Line) | 換行鍵 |
| 00001011 | 11 | 0B | VT (Vertical Tab) | 垂直制表符 |
| 00001100 | 12 | 0C | FF/NP (Form Feed/New Page) | 換頁鍵 |
| 00001101 | 13 | 0D | CR (Carriage Return) | 回車鍵 |
| 00001110 | 14 | 0E | SO (Shift Out) | 不用切換 |
| 00001111 | 15 | 0F | SI (Shift In) | 啟用切換 |
| 00010000 | 16 | 10 | DLE (Data Link Escape) | 數據鏈路轉義 |
| 00010001 | 17 | 11 | DC1/XON (Device Control 1/Transmission On) |
設備控制1/傳輸開始 |
| 00010010 | 18 | 12 | DC2 (Device Control 2) | 設備控制2 |
| 00010011 | 19 | 13 | DC3/XOFF (Device Control 3/Transmission Off) |
設備控制3/傳輸中斷 |
| 00010100 | 20 | 14 | DC4 (Device Control 4) | 設備控制4 |
| 00010101 | 21 | 15 | NAK (Negative Acknowledge) | 無響應/非正常響應/拒絕接收 |
| 00010110 | 22 | 16 | SYN (Synchronous Idle) | 同步空閑 |
| 00010111 | 23 | 17 | ETB (End of Transmission Block) | 傳輸塊結束/塊傳輸終止 |
| 00011000 | 24 | 18 | CAN (Cancel) | 取消 |
| 00011001 | 25 | 19 | EM (End of Medium) | 已到介質末端/介質存儲已滿/介質中斷 |
| 00011010 | 26 | 1A | SUB (Substitute) | 替補/替換 |
| 00011011 | 27 | 1B | ESC (Escape) | 逃離/取消 |
| 00011100 | 28 | 1C | FS (File Separator) | 文件分割符 |
| 00011101 | 29 | 1D | GS (Group Separator) | 組分隔符/分組符 |
| 00011110 | 30 | 1E | RS (Record Separator) | 記錄分離符 |
| 00011111 | 31 | 1F | US (Unit Separator) | 單元分隔符 |
| 00100000 | 32 | 20 | (Space) | 空格 |
| 00100001 | 33 | 21 | ! | |
| 00100010 | 34 | 22 | " | |
| 00100011 | 35 | 23 | # | |
| 00100100 | 36 | 24 | $ | |
| 00100101 | 37 | 25 | % | |
| 00100110 | 38 | 26 | & | |
| 00100111 | 39 | 27 | ' | |
| 00101000 | 40 | 28 | ( | |
| 00101001 | 41 | 29 | ) | |
| 00101010 | 42 | 2A | * | |
| 00101011 | 43 | 2B | + | |
| 00101100 | 44 | 2C | , | |
| 00101101 | 45 | 2D | - | |
| 00101110 | 46 | 2E | . | |
| 00101111 | 47 | 2F | / | |
| 00110000 | 48 | 30 | 0 | |
| 00110001 | 49 | 31 | 1 | |
| 00110010 | 50 | 32 | 2 | |
| 00110011 | 51 | 33 | 3 | |
| 00110100 | 52 | 34 | 4 | |
| 00110101 | 53 | 35 | 5 | |
| 00110110 | 54 | 36 | 6 | |
| 00110111 | 55 | 37 | 7 | |
| 00111000 | 56 | 38 | 8 | |
| 00111001 | 57 | 39 | 9 | |
| 00111010 | 58 | 3A | : | |
| 00111011 | 59 | 3B | ; | |
| 00111100 | 60 | 3C | < | |
| 00111101 | 61 | 3D | = | |
| 00111110 | 62 | 3E | > | |
| 00111111 | 63 | 3F | ? | |
| 01000000 | 64 | 40 | @ | |
| 01000001 | 65 | 41 | A | |
| 01000010 | 66 | 42 | B | |
| 01000011 | 67 | 43 | C | |
| 01000100 | 68 | 44 | D | |
| 01000101 | 69 | 45 | E | |
| 01000110 | 70 | 46 | F | |
| 01000111 | 71 | 47 | G | |
| 01001000 | 72 | 48 | H | |
| 01001001 | 73 | 49 | I | |
| 01001010 | 74 | 4A | J | |
| 01001011 | 75 | 4B | K | |
| 01001100 | 76 | 4C | L | |
| 01001101 | 77 | 4D | M | |
| 01001110 | 78 | 4E | N | |
| 01001111 | 79 | 4F | O | |
| 01010000 | 80 | 50 | P | |
| 01010001 | 81 | 51 | Q | |
| 01010010 | 82 | 52 | R | |
| 01010011 | 83 | 53 | S | |
| 01010100 | 84 | 54 | T | |
| 01010101 | 85 | 55 | U | |
| 01010110 | 86 | 56 | V | |
| 01010111 | 87 | 57 | W | |
| 01011000 | 88 | 58 | X | |
| 01011001 | 89 | 59 | Y | |
| 01011010 | 90 | 5A | Z | |
| 01011011 | 91 | 5B | [ | |
| 01011100 | 92 | 5C | \ | |
| 01011101 | 93 | 5D | ] | |
| 01011110 | 94 | 5E | ^ | |
| 01011111 | 95 | 5F | _ | |
| 01100000 | 96 | 60 | ` | |
| 01100001 | 97 | 61 | a | |
| 01100010 | 98 | 62 | b | |
| 01100011 | 99 | 63 | c | |
| 01100100 | 100 | 64 | d | |
| 01100101 | 101 | 65 | e | |
| 01100110 | 102 | 66 | f | |
| 01100111 | 103 | 67 | g | |
| 01101000 | 104 | 68 | h | |
| 01101001 | 105 | 69 | i | |
| 01101010 | 106 | 6A | j | |
| 01101011 | 107 | 6B | k | |
| 01101100 | 108 | 6C | l | |
| 01101101 | 109 | 6D | m | |
| 01101110 | 110 | 6E | n | |
| 01101111 | 111 | 6F | o | |
| 01110000 | 112 | 70 | p | |
| 01110001 | 113 | 71 | q | |
| 01110010 | 114 | 72 | r | |
| 01110011 | 115 | 73 | s | |
| 01110100 | 116 | 74 | t | |
| 01110101 | 117 | 75 | u | |
| 01110110 | 118 | 76 | v | |
| 01110111 | 119 | 77 | w | |
| 01111000 | 120 | 78 | x | |
| 01111001 | 121 | 79 | y | |
| 01111010 | 122 | 7A | z | |
| 01111011 | 123 | 7B | { | |
| 01111100 | 124 | 7C | | | |
| 01111101 | 125 | 7D | } | |
| 01111110 | 126 | 7E | ~ | |
| 01111111 | 127 | 7F | DEL (Delete) | 刪除 |
開發中較為常見的不可見字符
3.Trim() 和 preg_replace方法
trim() 方法用於刪除字符串的頭尾空白符，空白符包括：空格、制表符 tab、換行符等其他空白符等。但是卻無法完全去除掉不可見字符。對於去除不可見字符，先后有兩個思路，首先是在后台接受數據完成之后，對於需要驗證的數據進行處理。
首先拿到不可見字符的ascll碼值，然后用preg_replace進行字符的去除與拼接，需要在考慮到特殊字符出現在字符串的首尾問題。但是這個辦法有兩個缺點：首先是問題的復現問題，要拿到字符的ascll碼值就必須要先拿到對應的不可見字符，我是通過網上的轉碼工具來實現的，這里推薦兩個工具（http://www.msxindl.com/tools/unicode16.asp 、https://www.sojson.com/ascii.html ）。ascll碼值的問題可以解決，但是這種方法需要對所有的不可見字符都進行同樣的操作，顯得過於笨重和麻煩。於是考慮在前端輸入的時候就做了去除，這樣傳入到后台的時候就已經是處理過的數據了。
4. 最終解決辦法
在輸入框添加事件監聽，輸入框失去焦點便會進行字符的過濾。主要思路是先將輸入框的內容轉為unicode，然后使用正則進行去除，最后再將去除了不可見字符的數據回填到輸入框。
1 // 字符串trim函數
2 // @param {String} str 需要去掉首尾空格的字符串。
3 // @return {String} 返回去掉首尾空格后的字符串。
4 function trimNoPrintable(str){
5 var result = str.replace(/\\u2006|\\u00a0|\\u0020|\\u0008|\\u0009|\\u000a|\\u000b|\\u000c|\\u000d|\\u2028|\\u2029|\\ufeff|\\u200e|\\u200d|\\u3000/g,"");
6 return result;
7 }
8 //中文轉unicode
9 function zhToUnicode(s){
10 var str = "";
11 for (var i = 0; i < s.length; i++) {
12 var temp = s.charCodeAt(i).toString(16);
13 while (temp.length<4){
14 temp ="0"+temp;
15 }
16 str +="\\u"+temp;
17 }
18 console.log(str);
19 return str;
20 }
21 //unicode轉中文
22 function unicodeToZh(n){
23 var str = "";
24 var s = n.split('\\u');
25 for(let index = 0;index<s.length;index++){
26 if(s[index]=== ""){
27 s.splice(index,1)
28 }
29 }
30 console.log(s);
31 for(var i = 0;i < s.length;i++){
32 str += String.fromCharCode(parseInt(s[i],16));
33 }
34 return str;
35 }
1 $('input[id=\'input-supplier_name_zh\']').on('blur',function () {
2 var supplierZhName = $("#input-supplier_name_zh").val();
3 var temp = zhToUnicode(supplierZhName);
4 var ss = trimNoPrintable(temp);
5 var res = unicodeToZh(ss);
6 // alert(temp);
7 // console.log(ss);
8 // console.log(res+res.length);
9 $("#input-supplier_name_zh").val(res);
10 });
轉自：https://www.cnblogs.com/SpongeGirl/p/SpongGirl.html