轉換內容爲html實體

在開發業務過程中,遇到了對特殊字符的各種兼容,即需要支持各種特殊符號輸入,又不引起注入問題,簡單的方式就是轉換爲 utf8 編碼,這些編碼和html實體的作用一致,
轉換過程中,又遇到了emoji表情是佔用兩個字節的,又加了對 emoji 字符的處理,
我這裏就叫它html實體吧,參考了文末的文章,寫出瞭如下方法:

/**
 * 字符串轉字符實體
 * @param text 轉換文本
 * @param radix 返回的字符實體進制,只能是10進制和16進制,默認是10進制
 * @returns
 */
var convertStringToHtmlEntity = function (text, radix) {
    if (radix == null || radix == undefined) {
        radix = 10;
    }
    //檢測字符是否在 utf16字符範圍內,特別用於處理 emoji 字符(HL)
    var regUtf16High = /[\ud800-\udbff]+/;
    var regUtf16Low = /[\udc00-\udfff]+/;
    var htmlEntities = [];
    var i = 0;
    var prefix = radix === 10 ? "&#" : "&#x";
    while (i < text.length) {
        var char1 = text.charAt(i);
        //如果是 emoji 字符
        if (regUtf16High.test(char1) && i < text.length - 1) {
            var char2 = text.charAt(i + 1);
            if (regUtf16Low.test(char2)) {
                var hCode = char1.charCodeAt(0);
                var lCode = char2.charCodeAt(0);
                var code = (hCode - 0xd800) * 0x400 + 0x10000 + lCode - 0xdc00;
                var entity =
                    prefix +
                    (radix === 10 ? code.toString() : code.toString(16)) +
                    ";";
                htmlEntities.push(entity);
                i += 2;
            }
        } else {
            var code = char1.charCodeAt(0);
            var entity =
                prefix +
                (radix === 10 ? code.toString() : code.toString(16)) +
                ";";
            htmlEntities.push(entity);
            i += 1;
        }
    }
    var htmlEntityText = htmlEntities.join("");
    return htmlEntityText;
};

測試:

convertStringToHtmlEntity('hello nick ,種花家 , Great Wall 😍😎🍜🍚',10);
/*
&#104;&#101;&#108;&#108;&#111;&#32;&#110;&#105;&#99;&#107;&#32;&#44;&#31181;&#33457;&#23478;&#32;&#44;&#32;&#71;&#114;&#101;&#97;&#116;&#32;&#87;&#97;&#108;&#108;&#32;&#128525;&#128526;&#127836;&#127834;
*/
convertStringToHtmlEntity('hello nick ,種花家 , Great Wall 😍😎🍜🍚',16);
/*
&#x68;&#x65;&#x6c;&#x6c;&#x6f;&#x20;&#x6e;&#x69;&#x63;&#x6b;&#x20;&#x2c;&#x79cd;&#x82b1;&#x5bb6;&#x20;&#x2c;&#x20;&#x47;&#x72;&#x65;&#x61;&#x74;&#x20;&#x57;&#x61;&#x6c;&#x6c;&#x20;&#x1f60d;&#x1f60e;&#x1f35c;&#x1f35a;
*/

注意:mysql數據庫如果數據庫編碼類型爲 utf8 是存儲不了 emoji字符的,需要改爲 utf8mb4

參考鏈接:
移動前端手機輸入法自帶emoji表情字符處理
https://blog.csdn.net/binjly/article/details/47321043

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章