首頁 >web前端 >H5教程 >正規表示式與HTML5新元素

正規表示式與HTML5新元素

高洛峰
高洛峰原創
2017-01-11 17:03:192315瀏覽

ProcessOn是一個線上協作繪圖平台,為用戶提供最強大、易用的作圖工具!

它可以很方便的在線簡單繪製一些東西,讓自己去具體理解。

正規表示式

今日的正規只是學習正規表示的簡單使用。在HTML5的標籤屬性的強大面前,我們已經可以不用去先學習javascript才能再去正則了,因為HTML5的input標籤的pattern可以實現標籤的驗證,近似取代複雜的javascript使用正則驗證表單,在未來一定會完全取代的。

正規的簡單使用:

[0-9] 找出任何從 0 至 9 的數字。
[a-z] 找出任何從小寫 a 到小寫 z 的字元。
[A-Z] 找出任何從大寫 A 到大寫 Z 的字元。
[A-z] 找出任何從大寫 A 到小寫 z 的字元。
n{X} 符合包含 X 個 n 的序列的字串。
n{X,Y} 符合包含 X 或 Y 個 n 的序列的字串。
n{X,} 符合包含至少 X 個 n 的序列的字串。

記得這幾個可以實現簡單的正規運算了。如:

<form action="#">
<input type="text" pattern="[0-9a-zA-Z]{1,}" required>
<input type="submit" value="提交">
</form>

這就是個簡單驗證範圍在1個字元以上的任意0到9或a到z或A到Z的表單驗證,而required是設定這個文字為必填項,否則會在提交表單時提示填寫。

而具體的使用正規,則需要記住元字符、量詞及方括號的用意。

正規表示式與HTML5新元素

pattern屬性規定了正規的匹配方式,還有隻能是編寫與正規匹配的長度。

它現在無法現實到像javascript的RegExp物件那麼方便,不可以去設定修飾符,就是設定全域或大小寫敏感等。

但它的功能已經很強大了。

而為什麼無法設定修飾符,因為它是正規表示式,而在w3c裡解釋是pattern 是正則表達式,而不是字串,則必須省略該修飾符,所以它不能設定這個修飾符,不是會出錯。

補充小知識:匹配中文的正則

[u4e00-u9fa5]這個確實只匹配中文

[^x00-xff]這個匹配所有非ASCII的半角字符,也就是一般意義上的半角字符而這些%! )(之類的是全角字符。

HTML5之音頻與視頻元素

audio音頻標籤

<audio controls autoplay loop >
<source src="URL" type="audio/mp4">
<source ssrc="URL" type="audio/ogg">
<p>你的浏览器不支持</p> 
</audio>

效果圖:

正規表示式與HTML5新元素

基?音訊在就緒後馬上播放。 preload preload 如果出現該屬性,則音訊在頁面加載時進行加載,並預備播放。

<video controls loop muted width="400" height="400" poster="播放前的显示图片URL">
<source src="视频本地地址URL" type="video/mp4">
<source src="视频本地地址URL" type="video/ogg">
<p>你的浏览器不支持</p> 
</video>


它的屬性: 


autoplay autoplay 如果出現該屬性,則影片在就緒後馬上播放。 loop loop 如果出現該屬性,則當媒介檔案完成播放後再次開始播放。按鈕前顯示的圖片。 URL。在這方面支援的格式還不夠完善。會及時回覆大家的。

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn