category: javascript

JavaScript - 半形 全形 轉換

on 2019-01-30

JavaScript - 半形 全形 轉換

因為一個奇怪的需求?

需要把使用者輸入的東西轉成可以方便驗證的格式(這應該後端做吧?)

反正因為以前也做過半形轉成全形(痛苦的回憶, 為啥政府的 opendata 各縣市格式不一致就算了, 竟然還有全形半形的問題…)

這邊就簡單的只針對最前面的基本拉丁字母字元符號集作轉換

因為大部分的需求應該這樣就可以應付了?

但是空白字元要特殊處理

那接下來只要知道需要轉換的字元範圍即可

全形從 U+FF01U+FF5E

半形從 U+0021U+007E

把 16 進制轉換回來就是

65281 到 65374

33 到 126

上述怎麼轉的?

就是這樣

parseInt('0xFF01', 16)

只要判斷輸入的字元這這些編碼區間就進行轉換

trans char

所以簡單做了一個 demo 頁面

程式檢視原始碼即可

Refer - Wiki

Refer - Unicode / UTF-8 字元編碼區間表 - 2013

Read more

JavaScript - 計算網頁元件的曝光

on 2018-11-21

JavaScript - 計算網頁元件的曝光

因為某些需求需要精確計算某些網頁上的 UI 元件的曝光

沒錯

就是要像廣告計算 impression 一樣

之前只要確認有該元件的 request 就好了

但是為了精確追求計算曝光, 所以必須做到像 Google Ad 一樣

要到該網頁元件讓使用者看到後才能計算曝光

聽起來這要求不太容易

但是實作下去其實發現還好誒!!

概念

DOM 元件進入可視範圍觸發 impression

所以需要能夠釐清一些問題

  1. 如何確認可視範圍?

  2. 如何確認要記錄 impression 的 DOM 元件在可視範圍?

  3. 如何在進入可視範圍時觸發?

看似困難

但是如果熟悉 JavaScript Window 物件和 DOM 物件的話就會發現很好解

實作

如何確認可視範圍?

window.document.documentElement.clientHeight

window.document.documentElement.clientWidth

完美解決

如何確認要記錄 impression 的 DOM 元件在可視範圍?

<DOM Object>.getBoundingClientRect();

完美解決

但是要取到對應可是範圍的位置建議使用(top, left), x y IE 和 Edge 不支援

還有一點要注意就是該 DOM 要先長在 browser 上面且不是 display: none 的狀態才能拿到值

Refer - Element.getBoundingClientRect() - Web API 接口 | MDN

Refer - ClientRect object (Internet Explorer)

如何在進入可視範圍時觸發?

這就得取決於使用情境了

在適當的 Event 去觸發

Ex:

在 list view 時就單純的用 scroll 事件觸發確認是否是進入可視範圍(當然得做 debounce 處理)

在 carousel view 就滑動或點擊觸發轉動時確認是否是進入可視範圍(如果有做動畫效果, 得等到動畫效果結束再去確認)

結論

熟悉基本 API 後就可以很輕鬆地解決很多問題 XD

最後附上包好的套件

GitHub - impression

Read more