【網路】Google Form與正規表達式:收集格式統一的好資料

Google Form(Google表單,以下簡稱GF)是非常好用的雲端問卷工具,被普遍用於民意調查、揪團、線上抽獎等⋯⋯用途。然而,讀者或許也有這樣的經驗:收集來的資料往往格式不一,舉例來說:光是「手機號碼」就有可能包含了千奇百怪的格式⋯⋯

6.png

儘管我們可以在問題的備註中加上「請使用0912-345-678格式」。然而,在缺乏良好的使用者介面(UI)的指引下,這樣的道德勸說是無法讓使用者配合的。格式混亂的結果就是:資料收集者必須在事後花大量的精神來校對資料。

本篇文章要介紹GF比較鮮為人知,但又非常實用的小功能「正規表達式」[1]。透過正規表達式的設定,GF可以比對用戶輸入的資料是否為理想的格式——如果錯誤,則在問卷介面中顯示錯誤訊息與警告。要注意的是,在設定規範的同時,別忘了提供對應的錯誤訊息,避免用戶進入迷失的狀態。

螢幕快照 2016-05-21 下午5.50.55.png

正規表達式可以讓Google Form拒絕格式不正確的資料,並提供錯誤指引。

什麼是正規表達式?

簡單地說,正規表達式(Regular Expression)是程式領域通用的標準工具,程式設計師可以透過這個編碼標準,來比對字串是否符合預期的規範,並進行各種處置等工作。

第一個範例(百位數):^[1-9][0-9]{2}$

作為一個「正規表達式」,上述的範例代表了一個百位數的正整數(例如365)。這串編碼所傳達的意義為:開頭必須為1-9其中一個數,接著必須為兩個0-9之間的數字,然後結尾——這些條件,最後就會構成一個標準的百位數。

透過這樣的解釋,讀者或許已經可以猜測出來:^代表開頭;$代表結尾;[]代表一個接受的字集。事實上,正規表達式有非常多的記號,用來組合成世界上各種千奇百怪的資料規範。正規表達式可以寫到非常非常複雜,舉例來說,我們可以在stack overflow[2] 中找到這麼一段的正規表達式:

/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(“.+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/

這麼一段很像貓踩到鍵盤噴出來的亂碼,它代表著一段符合主流規範的Email格式——它包含了前段的username、小老鼠、以及後段的網域名稱。例如someone.tw@gmail.com,就可以通過它的檢查;反之如果輸入的時候少了一個@,則無論如何無法通過。

儘管看起來很嚇人,但我們只要懂得基礎的邏輯,並學會排出一些簡單的用途即可。對於大部分複雜的資料規格,我們都可以透過像這樣的搜尋「Email, 正規表達式」或是「身分證字號, 正規表達式」,來找到最成熟可靠的寫法直接套用。

對於GF的使用者來說,我們也只需要知道正規表達式是什麼,以及如何結合到GF就沒問題囉。除了GF外,Google Sheet或Excel也有一些公式可以與正規表達式結合,但一般來說並不是太常用,在此就不多提。

螢幕快照 2016-05-21 下午6.07.39.png

(小知識:上圖為常見的網頁登入與註冊等表單,即是透過網頁前端語言Javascript的正規表達式,來判斷資料是否合法——正確的話則顯示正確訊息,錯誤的話則顯示必要的提示。這樣的互動式表單不僅提高了使用者體驗,也讓資料的可靠度大幅提升,透過在用戶端預先排除掉非惡意的錯誤,還能為伺服器與資料庫省去大量的工作。)

Google Form如何套用正規表達式?

要在GF中套用正規表達式非常簡單,只要是【簡答】或是【段落】的問題型態,都可以透過右下角的選單找到Data Validation啟動並進行設定[3]

ezgif-3601237285.gif

筆者也編寫了一份【Demo版問卷】,讀者可以直接至連結中體驗應用的效果。

正規表達式怎麼寫?

如果你要的資料型態的正規表達式真的在網路上找不到怎麼辦呢(舉例來說:某間學校特殊的學號格式?)那就只能自己寫囉!以下將會介紹正規表達式基本的用法,如果不是要規定太複雜的資料格式,這些知識通常在Google Form當中應用已經足夠。

▎結尾/起始/字集[4]

最基本的三個符號。

^ :起始符號
$ :結尾符號
[]:群集符號

例句:^[br]
翻譯:開頭必須是b或是r。

例句:[0123456789]$
翻譯:結尾必須是數字,同義於 [0-9]$。

例句:^[a-zA-Z]$
翻譯:開頭只能是一個大小或小寫的英文字母,然後結束。

假設有一所大學的學號是b開頭+9碼數字(例如筆者的b95704069),如果要使用問卷收集同學的正確學號(皆為b開頭),那麼就是:

^b[0-9]{9}$

同樣的道理,如果學號有可能是b或r開頭,b代表大學部而r開頭代表研究所呢?其實也非常簡單:

^[br][0-9]{9}$

▎數量標示

用以標示某個符號或字集被允許出現的次數。

{}   :數量符號
{10} :代表正好10個
{10,}:代表10個或以上
{1,3}:代表1~3個之間

例句:^[0-9]{10}$
翻譯:開頭到結尾都必須是數字,而且正好10個
說明:手機號碼0912345678可以通過這個檢查。在這個條件下,使用0912-345-678或是886123456789,都是不會過關的。

▎縮寫[5]

對於幾個常用的字集以及數量標示,正規表達式也提供了常用的縮寫。要注意的是「\」符號是Enter鍵上方的反斜線,與數字鍵上方的正斜線「/」是不同的。儘管使用縮寫不是必要的,但是如果要閱讀網路上各種分享的正規表達式,還是必須要了解縮寫的意義。

\w:同義於[a-zA-Z]
\d:同義於[0-9]
+ :同義於{1,}
? :同義於{0,1}
* :同義於{0,}

▎跳脫字元(反斜線)

反斜線「\」除了用於字集的縮寫之外,它還代表跳脫字元的意思。對於已經被正規表達式歸納為有特殊意義的符號來說,如果需要使用符號的本身,就必須使用\來「跳脫」它的特殊意義。

例句:^\+(886)-\d{3}-\d{3}-\d{3}$
翻譯:這個例子會檢查出一個+886-123-456-789的手機號碼。其中+符號已經被正規表達式規定為數量符號的縮寫了。當我們要使用+符號本身時,就必須使用\+來表達:「我不需要+代表的特殊意義,我只要+的本身」[6]

▎小括號

就像數學一樣(3+2)*2,括號中的加法會先被處理。在處理大型的正規表達式時會很常見使用(一個雞包紙包雞包紙包雞的概念)。GF實務上倒是不太常用到,淺談即止。

例句:(ha){2}$
翻譯:結尾是haha,這通常是聊天時尷尬的象徵(就是個例句,沒有任何用途)。

▎或

例句:(ha|bye|lol)$
翻譯:結尾是ha或bye或lol,這通常是聊天時尷尬的象徵(就是個例句,沒有任何用途)。

▎練習

想要快速掌握正規表達式的技巧,別忘了自己動手寫寫看。以下這個練習可以應用到大部分前述的技巧,不妨一試!

請寫出西元生日的(例如:1987/6/25)的正規表達式
  • 別忘了「月」和「日」都有可能是個位數或十位數 。
  • /這個符號必須被「跳脫」。
  • 想寫複雜一點,還可以檢查年月日的開頭第一碼。

正規表達式沒有標準答案,端看設計者希望驗證到多詳細囉,以下為兩種參考答案。

簡單版:^\d{4}\/\d{1,2}\/\d{1,2}$
複雜版:^[1-9]\d{3}\/[1]?\d\/[123]?\d$

▎參考資料

以上大概介紹了最科普與實用的表達式,如果讀者想要知道更多相關的技術,也可以參考這些外站資料。

要怎麼測試寫得對不對呢?

如果想要測試自己撰寫的正規表達式是否可以產生正確的過濾效果,可以使用Regexr.com這個網站。使用方法非常簡單,只要輸入你的正規表達式,並且在下方輸入可能的字串,就可以知道運作方式是否符合自己的預期囉。

2.png

當然,也可以直接寫在Google Form當中,再自己試著填寫表格,看看效果是否符合。

結語

Google Form提供了完美的操作介面與強大的表單功能,讓企劃人員可以在沒有技術人員協助的情況下,產生優良的問卷服務。如果能再多懂一些正規表達式的眉角,Regular Expression可以更好地協助用戶回填有效的資料,並大幅降低操作者整理資料的時間!

註解


  1. Google Form中文版將之翻譯為「規則運算式」。
  2. 知名的英文程式社群。
  3. GF的正規表達式包含了Matches與Contains(符合/包含)兩種比對模式,後者只需要字串的其中一部份符合比對即可通過。本篇文章只以Matches作為範例。
  4. ^在[]中代表否定之意,舉例來說[^abc]代表[abc]的否定。為了避免干擾學習效果,因此只在註解中說明。
  5. 使用大寫的\W, \D代表\w, \d的差集,在正規表達式中這是通用的概念。
  6. 完整地說,反斜線代表切換「特殊字符」與「普通字符」的意義:在特殊字符前時,將之跳脫為普通字符;而在普通字符前時,則將之跳脫為特殊字符。舉例來說,當使用\d代表[0-9]時,\本身也是一個將正常的字元d「跳脫」為「特殊字符」。
  7. 封面圖片取材自Google Form佈景主題圖素。

補充:Javascript與正規表達式


如果你是一個網頁開發人員,只要使用Chrome的Console即可快速進行正規表達式的測試。只要記得JS會使用/myPattern/標示一個正規表達式物件即可。範例語法如下

//JS格式:/myRegularExpression/.test("myStringToBeTest")
/^[1-9][0-9]{2}$/.test("356");     //正確,會回報true
/^[1-9][0-9]{2}$/.test("1072");    //錯誤,會回報false
/^[1-9][0-9]{2}$/.test("someone"); //錯誤,會回報false

更多的應用方式請自行搜尋JS中String與RegExp物件相關的規格。應用於實務上的表單驗證,只要配合CSS與DOM,就可以實作出漂亮的前端表格囉。前端的效果是無極限的,要做多花俏,多到位,多貼心,端看設計者願意投注多少資源在用戶身上囉。

7 thoughts on “【網路】Google Form與正規表達式:收集格式統一的好資料

  1. 原來 google form 使用 regex 作 validation
    我以為他們會有更好的 idea,畢竟 regex 對一般人(尤其是大量使用google form的HR而言)應該還是很陌生的,對吧。

    喜歡

    • 在某個角度來看,Google Form支援Regex其實有點太貼心了。因為會使用Google Form的通常是企劃人員(像你說的HR),不是技術人員。但這大概也是這篇文章的目的吧,如果有好的懶人包的話,檢查基本形式資料的regex其實沒有這麼難哦。

      所以GF還是有一些比如說長度、Email之類的基本檢查功能給非程式背景的用戶使用囉。

      說到底,開放的彈性與可親的介面終究是無法共存的啊。

      喜歡

  2. 假設有一所大學的學號,那邊的正規表示式範例是不是與題意不符?
    ^b[0-9]{6}$ →應為 ^b[0-9]{9}$ ? 題意寫9碼! 哈哈

    謝謝你寫的這篇,讓我逛來這學到好多~

    喜歡

  3. 你好! 好感谢你的这篇文章,以下有项问题需要你的协助:
    请问是否可以限制英文只写大写? 我在RegExr尝试了可行但是GF表示无法储存,但更改其他的东西时又可以储存,不知道是不是有什么写错了。我尝试的表达式: ^[A -Z]*
    谢谢!

    喜歡

    • 正好看到留言,試了一下也不行,看起來疑似是Google Form的小BUG

      不過用 $[ABCDEFGHIJXLMNOPQRSTUVWXYZ]是可以運作的,醜是醜了點,如果很堅持要這個功能,就暫時先擋著用吧 -.-

      喜歡

      • 我尝试了一下,发现好像用不到,就照着你的格式用各种方法乱改XD
        最后这个OK ^[A BCDEFGHIJXLMNOPQRSTUVWXYZ]*
        谢谢你!帮了很大的忙!

        喜歡

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s