<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>前端处理支持emoji表情</title> </head> <body> <h1>测试</h1> <textarea rows="10" cols="40" id="text"></textarea> <button type="" id="enbtn">编码</button> <button type="" id="debtn">解码</button> <h2>结果</h2> <div id="dv"></div> </body> </html> <script> /** * * Base64 encode / decode * **/ var Base64 = { // private property _keyStr: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=", // public method for encoding encode: function (input) { var output = ""; var chr1, chr2, chr3, enc1, enc2, enc3, enc4; var i = 0; input = Base64._utf8_encode(input); while (i < input.length) { chr1 = input.charCodeAt(i++); chr2 = input.charCodeAt(i++); chr3 = input.charCodeAt(i++); enc1 = chr1 >> 2; enc2 = ((chr1 & 3) << 4) | (chr2 >> 4); enc3 = ((chr2 & 15) << 2) | (chr3 >> 6); enc4 = chr3 & 63; if (isNaN(chr2)) { enc3 = enc4 = 64; } else if (isNaN(chr3)) { enc4 = 64; } output = output + this._keyStr.charAt(enc1) + this._keyStr.charAt(enc2) + this._keyStr.charAt(enc3) + this._keyStr.charAt(enc4); } return output; }, // public method for decoding decode: function (input) { var output = ""; var chr1, chr2, chr3; var enc1, enc2, enc3, enc4; var i = 0; input = input.replace(/[^A-Za-z0-9+/=]/g, ""); while (i < input.length) { enc1 = this._keyStr.indexOf(input.charAt(i++)); enc2 = this._keyStr.indexOf(input.charAt(i++)); enc3 = this._keyStr.indexOf(input.charAt(i++)); enc4 = this._keyStr.indexOf(input.charAt(i++)); chr1 = (enc1 << 2) | (enc2 >> 4); chr2 = ((enc2 & 15) << 4) | (enc3 >> 2); chr3 = ((enc3 & 3) << 6) | enc4; output = output + String.fromCharCode(chr1); if (enc3 != 64) { output = output + String.fromCharCode(chr2); } if (enc4 != 64) { output = output + String.fromCharCode(chr3); } } output = Base64._utf8_decode(output); return output; }, // private method for UTF-8 encoding _utf8_encode: function (string) { string = string.replace(/ /g, " "); var utftext = ""; for (var n = 0; n < string.length; n++) { var c = string.charCodeAt(n); if (c < 128) { utftext += String.fromCharCode(c); } else if ((c > 127) && (c < 2048)) { utftext += String.fromCharCode((c >> 6) | 192); utftext += String.fromCharCode((c & 63) | 128); } else { utftext += String.fromCharCode((c >> 12) | 224); utftext += String.fromCharCode(((c >> 6) & 63) | 128); utftext += String.fromCharCode((c & 63) | 128); } } return utftext; }, // private method for UTF-8 decoding _utf8_decode: function (utftext) { var string = ""; var i = 0; var c = c1 = c2 = 0; while (i < utftext.length) { c = utftext.charCodeAt(i); if (c < 128) { string += String.fromCharCode(c); i++; } else if ((c > 191) && (c < 224)) { c2 = utftext.charCodeAt(i + 1); string += String.fromCharCode(((c & 31) << 6) | (c2 & 63)); i += 2; } else { c2 = utftext.charCodeAt(i + 1); c3 = utftext.charCodeAt(i + 2); string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63)); i += 3; } } return string; } } //编码 document.getElementById('enbtn').onclick = encodeFn; function encodeFn() { // 获取 value var enval = document.getElementById('text').value; // 获取 value 中所有表情 var reg = enval.match(/[uD83C|uD83D|uD83E][uDC00-uDFFF][u200D|uFE0F]|[uD83C|uD83D|uD83E][uDC00-uDFFF]|[0-9|*|#]uFE0Fu20E3|[0-9|#]u20E3|[u203C-u3299]uFE0Fu200D|[u203C-u3299]uFE0F|[u2122-u2B55]|u303D|[A9|AE]u3030|uA9|uAE|u3030/ig); console.log(reg) // 将所有表情转成 base 64 var emojiBaseArr = reg.map(function (v) { return '[' + Base64.encode(v) + ']' }) console.log(emojiBaseArr); // 替换文本中所有表情 for (var i = 0; i < emojiBaseArr.length; i++) { // 相当于每次替换字符串中的第一个 var str = enval.replace(/[uD83C|uD83D|uD83E][uDC00-uDFFF][u200D|uFE0F]|[uD83C|uD83D|uD83E][uDC00-uDFFF]|[0-9|*|#]uFE0Fu20E3|[0-9|#]u20E3|[u203C-u3299]uFE0Fu200D|[u203C-u3299]uFE0F|[u2122-u2B55]|u303D|[A9|AE]u3030|uA9|uAE|u3030/, emojiBaseArr[i]); // 将替换后的值重新赋值给 enval enval = str; } console.log(enval); return enval; } //解码 document.getElementById('debtn').onclick = function () { // 前端做了处理 后端不需要做任何操作，只需要原封不动的返回来即可 （ 假设获取后台返回的值 ） var deval = encodeFn() console.log(deval); // 正则获取所有中括号中长度为8位的字符（包括中括号） var res = deval.match(/[[0-9a-zA-Z]{8}]|[[0-9a-zA-Z+]{8}|[[0-9a-zA-Z+/]{8}/g); console.log(res); // 数组中的元素两边的中括号去掉，得到新的数组 var arr = res.map(function (v) { return v.substr(1, 8) }) console.log(arr); // 将新数组中的每个元素解码，得到新的数组 var deArr = arr.map(function (v) { return Base64.decode(v); }) console.log(deArr); // 将解码后的元素和文本中正则匹配到的一一替换 for (var i = 0; i < deArr.length; i++) { var decode = deval.replace(/[[0-9a-zA-Z]{8}]|[[0-9a-zA-Z+]{8}]|[[0-9a-zA-Z+/]{8}/, deArr[i]); deval = decode; } console.log(deval); // 渲染 document.getElementById('dv').innerHTML = deval } </script>