解決html中文轉unicode問題

更改gulp套件來去實現中文轉unicode的問題

 

在同事的建議下,開始了我的第一篇部落格,來記錄我的工作上面的問題,隨意寫寫,那...開始吧!

因工作需要,常常要把寫好的有帶中文的html裡面的中文轉成unicode,

以往的做法是貼到線上工具去做轉換,我就在想說 gulp應該有人寫套件

於是我找到了一個npm https://www.npmjs.com/package/gulp-chinese2unicode

想說這樣就解決了每次都要很累的複製貼上

但是!!事情沒有那麼簡單!!

平常工作上轉好的Unicode與外面常見的unicode並不同,好像雖然都是unicode 但寫法不同

所以直接GG,上線之後整個美賽

套件裡的是轉成 / + u +轉譯過的unicode

function toUnicode(s){
   return s.replace(/([\u4E00-\u9FA5]|[\uFE30-\uFFA0])/g, function(s){
   return '\\u' + s.charCodeAt(0).toString(16);
   });
}

所以 哈囉=>\u54c8\u56c9

但是公司的資料庫要吃的是長這樣

哈囉=>哈&#22217  (可以很明顯地知道這是兩種不同規則)

所以很努力的找有沒有其他線上工具,去看看別人怎麼寫

後來找到http://www.pinyin.info/tools/converter/chars2uninumbers.html

裡面的funcition寫得很簡單

function convertToEntities() {
  var tstr = document.form.unicode.value;
  var bstr = '';
  for(i=0; i<tstr.length; i++)
  {
    if(tstr.charCodeAt(i)>127)
    {
      bstr += '&#' + tstr.charCodeAt(i) + ';';
    }
    else
    {
      bstr += tstr.charAt(i);
    }
  }
  document.form.entity.value = bstr;
}

簡單來說 就是先判斷 tstr 轉譯過的unicode數字有沒有大於127 (我猜是中文從128開始算起)

沒有超過的字直接輸出,有的話就透過 charCodeAt(i)算出他的代碼 

說到charCodeAt(i),他就是把文字轉成unicode的js原生語法

請參閱http://www.w3school.com.cn/jsref/jsref_charCodeAt.asp

好,得到這些,可以來改gulp套件了

首先,打開這款套件的index.js

直接跳到他轉中文到unicode的規則裡

看到這一行

function toUnicode(s)

知道他接受一個s的參數

然後看到我們剛剛得到的code裡面的

var tstr = document.form.unicode.value;

可以知道他的參數是來自這裡

所以,將所有的 tstr 改成 s 因為這兩者的意思是一樣的

變成

function toUnicode(s){

   var bstr = '';
   for (var i = 0; i < s.length; i++) {
       if (s.charCodeAt(i) > 127) {
          bstr += '&#' + s.charCodeAt(i) + ';';
          }
       else {
          bstr += s.charAt(i);
          }
       }
   return bstr;
}

最後使用 return 把 bstr 吐回去,存檔,執行gulp,大功告成,收工!

有任何疑問,歡迎提出,但是我不一定有能力回答你 T_T