正则表达式与HTML5新元素

227 阅读 0 评论 150 点赞

我是靠谱客的博主无语棒棒糖，最近开发中收集的这篇文章主要介绍正则表达式与HTML5新元素，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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是设置这个文本为必填项，否则会在提交表单时提示填写。

而具体的使用正则，则需要记得元字符、量词及方括号的用意。

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>

效果图：

它的属性：

autoplay autoplay 如果出现该属性，则音频在就绪后马上播放。

controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。

loop loop 如果出现该属性，则每当音频结束时重新开始播放。

preload preload 如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。

src url 要播放的音频的 URL。

video视频标签

<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>