因為工作上的需要
需要把使用者輸入的訊息中含有 url 的部分把它取出來轉成超連結
參照以下範例
https://gist.github.com/metafeather/202974/34c2d31bd82f59c2486f38790054bbbc0b10ca8b
不知為何他的正規有點問題
所以又做了修正
function urlParse(str) { var urlArray = []; var urlRegex = /((http[s]?|ftp):\/)\/?([^:\/\s]+)(?::([0-9]+))?((\/\w+)*\/)?([\w\-\.]*)?([#?\w\=]+)?([\&\w=\w]+.*)?([\w\+\-\/\%]*)?[A-Za-z0-9_\/]/g; var arr = str.split(/[\n,' ']+/gm); for (let u = 0; u < arr.length; u++) { const element = arr[u]; var validate = element.match(urlRegex); if (validate) { urlArray.push(validate[0]); } } return urlArray; } url 格式遵循 RFC3986
refer - rfc3986
這邊可以在實作一個白名單機制限制只有白名單中的域名所屬的 url 才可以轉成超連結
function urlWhitrList(url) { var list = [ 'www.instagram.com/', 'youtu.be/', 'www.youtube.com/', 'www.
...
# 在 Web 中的 emoji 處理 在普遍的字串計算長度的部分
一個字元是單位是一
但是因為 emoji 的 unicode 是比較後面定義的
這超出了原有 JavaScript 原有定義的範圍
可以參照網站的介紹
Unicode – The World Standard for Text and Emoji
所以 emoji 的字串長度在 JavaScript 一率都是從 2 起跳
這在 Web 中會造成有需要處理字串長度的地方就會出現問題
例如:
input 文字的長度限制的使用
<input type="text" maxlength="10"> 字串需要計算長度時
string.length; 尤其是在現在行動裝置的普及, 內建的鍵盤已經有 emoji 的輸入可以使用
更會大大的增加在需要的邏輯處理會出現問題
# 如何解決 有一個方便的套件 runes 會把 emoji 識別出來
所以就可以解決掉 emoji 的問題了
# 背後原理 其實背後的原理也不難
就是去比對 emoji 的 unicode 碼
比對該字串是不是 emoji 的 unicode 碼
...
Refer - Firebase Remote Config API
取用和更新都需要以下 Google oauth2.0 的權限
https://www.googleapis.com/auth/firebase.remoteconfig https://www.googleapis.com/auth/cloud-platform
...
處理 CORS 算是許多 Web 開發者會處理的情況
其中要又有一個比較重要的部分就是要設定 Access-Control-Allow-Origin 這個允許來源的 header
通常為了安全性問題, 都是只會設定允許的 host 上去
但是常常設定而且在不同環境設定也是有點麻煩
所以這邊就用了直接在 server 設定的方式來處理
這樣直接看 server 的 rule 設定即可
也可以快速的條列不同環境的 host
# 用法 if ($http_referer ~* example.com) { add_header 'Access-Control-Allow-Origin' 'https://example.com'; } if ($http_referer ~* dev.example.com) { add_header 'Access-Control-Allow-Origin' 'https://dev.example.com'; } 這個判斷沒有固定的寫法
可以參考底下 Nginx 對 http_referer 的介紹來針對需要判斷 host 的方式進行修改
Refer - 跨來源資源共用（CORS）
Refer - Module ngx_http_referer_module
...
因為在 2020 年下半年 Google 更新的 GA4 的版本出來
基本上就是全新版本的 GA 了
和舊的 GA 使用方式與數據都不相容
主要是因為因應現在 App 記錄和觀察數據的方式和以前單純在 Web 上面不一樣
所以 Google 開發了新的 GA4 來對應這種情況
應該也是會漸漸的都要使用新的 GA4 了
舊的目前還可以繼續用, 開新的 GA 也可以使用通用型來切成開舊版的 GA
但是建議是在使用中的先繼續使用(有餘力再轉換)
新的話就開新的 GA4
這邊主要是記錄新版的使用
但大多也都是會參照其他網站的說明為主(因為很多網站介紹的很詳細)
Refer - 【最全 GA 攻略】2021 最新版 GA4 教學，從新舊比較到自訂報表都 OK！
這網站介紹的蠻詳細的
...
# 最近剛好遇到個問題就順便筆記一下(但是遇到的問題和要寫的內文無關就是了 XD) # 前言 基本上在 url query string 的 value 都要做 url encode
URL encode 會用到以下標準
RFC 1738
RFC 2396
RFC 3986
主要會使用 % 字符來針對需要 escape 的字元做編碼
ex: / -> %2F, + -> %2B 等
但是主要又有幾個問題是基於 HTTP GET 和 POST 與 application/x-www-form-urlencoded 的問題
基本上在使用 HTML form 表單使用時
採用的會是把 空格轉成 +
但這些都不算是大問題
因為基於 CGI 和程式語言的實作
會把 urldeode 回來
所以在程式語言接到 query string 時都是 urldecode 回來的值
問題是在於 browser 上發出到 server 的 URL(就是打開 server 的 access log 看到進來的 Path 拉)
...
# Intro Gmail 提供 IMAP & SMTP 的功能
### 內送郵件 (IMAP) 伺服器 imap.gmail.com 需要安全資料傳輸層 (SSL)：是 通訊埠：993 ### 外寄郵件 (SMTP) 伺服器 smtp.gmail.com 需要安全資料傳輸層 (SSL)：是 需要傳輸層安全性 (TLS)：是 (如果可用) 需要驗證：是 安全資料傳輸層 (SSL) 通訊埠：465 傳輸層安全性 (TLS)/STARTTLS 通訊埠：587 Refer - 透過其他電子郵件平台查看 Gmail
簡單的說 IMAP(Internet Message Access Protocol) 可以存取該 mail 的信件
SMTP(Simple Mail Transfer Protocol) 是可以利用該 mail 發信
詳細說明可以參照 wiki
Refer - 網際網路資訊存取協定
Refer - 簡單郵件傳輸協定
另外還有 POP3(Post Office Protocol) 這個和 IMAP 類似的協定
Refer - 郵局協定
...
# docker images 列出所有拉下來的 docker image
docker images REPOSITORY TAG IMAGE ID CREATED VIRTUAL SIZE ubuntu latest 07f8e8c5e660 3 weeks ago 188.3 MB # build dockerfile 使用 dockerfile 建立 docker image
直接建立
docker build . 預設會找當前的目錄的 Dockerfile
-t 可以設定建立的 image & tag name
docker build . -t image_name:tag_name -f 指定用哪個 dockerfile 建立
docker build . -t ubuntu_dev:16.04 -f local.Dockerfile # dockerfile 使用 ## 使用 nginx official image 建立 FROM nginx:1.
...
Puppeteer 是 Google 推出的基於 nodejs 的一套工具 可以控制 Chrome 和 Chromium 所以在爬蟲和測試等等需求都很好用
這裡記錄一下在 GCP 上面開一台 Computer Engine 後裝 Puppeteer 的紀錄
# 1. CE 開一個 instance 之前開 f1-mirco(1vCPU & 0.6G RAM)(共用核心)
這樣的等級如果只是 load 完頁面爬內容還是可以撐得住的
但是要做一些操作行為或是下滑垃取 AJAX 內容等等就不夠用了
所以就開了一台 e2-small (2vCPU & 2GB RAM)(非共用核心) 來跑
這次是裝 ubuntu 20.04 LTS
# 2. 安裝 node 先拉 node 套件庫下來
curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash - 裝 nodejs
sudo apt install nodejs Refer - How to Install Node.
...
常常會遇到用 JavaScript 處理一些資料結構的排序
這裡會列舉一些使用情境與案例
# 取出排名前幾名的資料(排名的值不重複) ## 資料 var data = { 123: { count: 123, type: "video", source: "", }, 345: { count: 345, type: "video", source: "", }, 99: { count: 99, type: "image", source: "", }, 1: { count: 1, type: "video", source: "", }, 9786: { count: 9786, type: "image", source: "", }, 347: { count: 347, type: "video", source: "", }, }; ## 處理方式 function topNine(data) { var arr = []; (tmp = Object.
...