透過Vue實現限制數入字數

我們都知道,平常在社群網站上會限制使用者輸入的字數。最具代表性的網站就是Twitter,Twitter限制一般使用者每次發表文章的字數在140字以內。讓使用者用最簡短的文字來表達想法。對於優化使用者體驗比較好的方式是,當使用者在輸入的同時,提示使用者還有多少字可以輸入,當使用這輸入的字數達到限制時,及時地停止使用者繼續輸入。 像這樣子限制使用者輸入字數的機制要如何來實現呢? 有兩的點需要注意: 如何計算使用者輸入了多少字? 當使用這輸入的字數達到限制時,該如何停止繼續輸入? 今天我們就要透過Vue.js來製作一個可以幫我們控制輸入字數的程式。首先,我們先準備好需要的HTML檔案。 <!DOCTYPE html> <html lang=“zh-TW”> <head> <meta charset=“UTF-8” /> <meta name=“viewport” content=“width=device-width, initial-scale=1.0” /> <meta http-equiv=“X-UA-Compatible” content=“ie=edge” /> <link rel=“stylesheet” href=“https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css” integrity=“sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO” crossorigin=“anonymous” /> <title>Start</title> </head> <body> <div id=“app” class=“container”> <div class=“row”> <div class=“col”> <textarea cols=“30”

Regular Expression - 正規表示式在Python的用法

正規表示式(Regular Expression可簡稱為 regex)是文字模式的表示方法,其功能十分強大,可用於處理字串的強大工具。如果學會用正規表示式處理問題的話,就意味著可以用較少的程式碼完成一件事情。一個別人可能要處理很久才得以搞定的問題,正規表示式的你可能只需要幾行程式碼就解決了。

然而正規表示式本身並不是Python所獨有的。在Python中如果要使用正規表示式的話需要匯入re模組,因為所有函示都寫在re模組內。一但匯入re模組後,就可以利用re 指定搜尋的字串樣式,然後從檔案中找出符合該樣式的字串,並加以處理。

使用的時候,需要先定義一個想要比對的「字串模式」,以及要被比對的「對象字串」。簡單說,就像是這樣:
result = re.match(“He’,’ “Hello World” )
在這裡,「He」是字串模式,「Hello World」是對象字串。

match()

前面說過,match() 可以取出比對項目,來對字串進行比對。
import re
message = '請來電洽詢(02)2555-1011,或致電 2555-9999'
mo = re.match('請來' ,message)
if mo:
print(mo.group())

但是,如果要比對字串中間的字,match() 就無法找到了。例如我們如果用同樣的程式尋找「洽詢」:
import re
message = '請來電洽詢(02)2555-1011,或致電 2555-9999'
mo = re.match('洽詢' ,message)
if mo:
print(mo.group())

這樣子就找不到任何字串了。match() 不會傳回任何東西。

我們要如何修改上面這個程式?

在「洽詢」的前面加上「.*」符號的話,就可以匹配到洽詢這個字串,因為「.*」符號表示比對尋找任何數量的字元。

import re
message = '請來電洽詢(02)2555-1011,或致電 2555-9999'
mo = re.match('.*洽詢' ,message)
if mo:
print(mo.group())

compile()

也可以先使用compile()編譯你的比對模式「pattern object」,並且將其保存下來,以備後續之用。

這樣可以提昇匹配的速度。根據文件的說明,下面的兩的兩個程式碼是一樣的。(https://docs.python.org/2/library/re.html)


prog = re.compile(pattern)
result = prog.match(string)
#等同於
result = re.match(pattern, string)

search()

search()方法可尋找傳入的字串,搜尋比對符合該正規表示式的第一個項目。如果找到了匹配的項目則會返回一個match物件,反之如果沒有發現匹配的項目,則會返回None。
若使用search()方法,就不需要使用「.*」符號。前面的程式可以改成:

import re
message = '請來電洽詢(02)2555-1011,或致電 2555-9999'
mo = re.search('洽詢' ,message)
if mo:
print(mo.group())

「.*」符號屬於貪婪比對而「.*?」符號為非貪婪比對。
import re
message = '請來電洽詢(02)2555-1011,或致電 2555-9999'
phoneNumber = re.compile(r'(\(\d\d)\)\d\d\d\d-\d\d\d\d')
mo = phoneNumber.search(message)
可以利用match物件中的group()方法,返回被搜尋字串中實際符合的文字。

findall()

如果你想要找一個字母,在某個字串中出現幾次的話,findall()可以幫你完成這個任務。下面的例子可以幫你找出字串中有兩個「電」字。
import re
message = '請來電洽詢(02)2555-1011,或致電 2555-9999'
mo = re.findall('電', message)
print(mo)

split()

spilt() 可以將一個字串分割成一串串列(List)。下面的例子可以依照逗點( , )的位置將source的內容分割成一串串列 [‘May', 'John', 'Lin', 'Frank', 'Stien']

import re
source = "May, John, Lin, Frank, Stien"
m = re.split(',', source)
print(m)


sub() 取代字串

sub() 可以取代字串。在下面的例子中『 ? 』將會取代句子中的『 n 』

import re source = "This is my name"m = re.sub('n', '?',source) print(m)
注意:
match()只會在模式位於來源的『開頭』時才會生效。
使用search()的話,不管模式在任何地方都會生效。不需要使用 ( .* )萬用字元。

特殊字元

下面是正規表示式中常用的特殊符號和字元:
字元分類速記
表示
\d 0~9的任何一個數字,等效於 [0-9]
\D 除了0~9數字以外的任何一個非數字字元,等效於 [^0-9]
\w 任何字母、數字或底線的英數字元,等效於 [A-Za-z0-9_]
\W 除了字母、數字和底線以外的任何非英數字元,等效於 [^A-Za-z0-9_]
\s 空格、定位符號或換行符號,等效於 [ \f\n\r\t\v]
\S 除了空格、定位符號或換行符號以外的任何字元,等效於 [^ \f\n\r\t\v]
[xyz] 比對中括弧內的任一個字元
[^xyz] 比對不在中括弧內出現的任一個字元
? 比對非必須項目,零次或一次
* 比對符號前面任何數字,零次或更多次
+ 比對前一個字元一次或更多次,等效於 {1,}
{n}   比對前一個字元 n
{n,m} 比對前一個字元至少 n 次,至多 m
[xyz] 比對中括弧內的任一個字元
[^xyz] 比對不在中括弧內出現的任一個字元
^ 比對輸入列的啟始位置
$ 比對輸入列的結束位置
. 比對除了換行字元(\n)以外的任何一個字元,但只比對單一字元
.* 比對尋找任何數量的字元



留言

這個網誌中的熱門文章

用Python的條件實現電影分級流程

Vue元件實作,將HTML網頁Vue元件化

Python基礎篇--[條件]如果發生這種狀況時,我該怎麼辦?