别在不嫌烦琐正则表明式深入分析html了,正则表

作者: 韦德国际1946国际网址  发布:2019-05-29

  近段时光在论坛下面兴起了一股正则之风,不论做如何都喜欢用正则

正则表达式 分析html的主题材料

*
*
*

增加产量的竹签

区块标签

acticle
section
nav
aside
header
别在不嫌烦琐正则表明式深入分析html了,正则表达式。footer

内容分组标签

figure
figcaption
main

文本品级标签

time
i和b(html4)
em和strong

选用示例
article
代表包蕴三个文书档案,页面,应用程序或网址中的壹段独立的源委
,它亦可独立的被颁发或重新利用
局地例子:

一篇博客
三个论坛帖子
1篇新闻报导
多少个用户评价

header
相似位于页面包车型客车顶上部分,或许页面有个别区块成分的最上部,包括全部页面或有个别区块的标题,简单介绍等新闻
header标签的施用

叁个文书档案中得以涵盖1个或三个上述的header标签
header标签不肯定非要展现在页面包车型大巴上面,它的内容决定这里是还是不是要动用header标签,地点并不首要
您可感到body,article,section,以至是aside成分扩张header标签

footer
一般被放在页面包车型大巴最底层,大概页面有个别区块成分的平底
nav
代表页面包车型大巴领航,能够透过导航链接到网址的别样页面,或当前页面包车型地铁别样一些
应用场景

用作页面独立的导航区域
用作页面尾部区域的一局地
呈现在侧面栏中

能够在3个页面使用三个nav标签
搜寻引擎和荧屏阅读器会根据nav标签鲜明网址的开始和结果
不是其余一组超链接都合乎放在nav标签中(举例二个登录条,页脚部分的版权申明,隐秘注明等)
aside
饱含的剧情不是页面包车型地铁机要内容,具备独立性,是对页面内容的补充
壹部分例子

页面包车型地铁侧面栏
广告
友情链接
小说引语(内容摘要)

section
叁个宗旨性的源委分组,平日蕴含三个头顶(header),恐怕还也许有3个尾巴(footer)
section与div区别
div

采纳更加宽广,只要想为1个区块定义多个样式,就是足以行使

section

一般包涵一个显著的大旨,常常有标题区域

main
来得页面包车型地铁入眼内容
种种页面只能分包三个main标签
main标签中不分包网址标题,logo,主导航,版权证明等新闻

figure figcaption
表示五个带标题标图片,录像等
time
意味着3个日子,或2个年华
代码例子

<time datetime="2016-1-1">2016年1月1日</time>

time的格式

点名年月日: 201六-一-1
点名时间: 201陆-1
年度是两位数:16-壹-1
点名时间: 1四:54:3玖
点名时间: 1四:5肆

  你在后台解析json格式字符串,必必要用正则,行吗,你或许不知情用JavaScriptSerializer类,

八个近乎那样的html
本人想得这么的结果(

html5 表单

新增input类型
新扩张表单成分
html伍表单验证
新扩充表单属性
新增的input类型

input原有的type属性值

text(普通文书, 暗中认可值)
password(密码框)
radio(单选按键)
checkbox(多选开关)
file(文件上传组件)
button(普通按键)
submit(提交开关)
hidden(隐藏文本域)
input新增的type属性值

search(搜索框)
email(邮件输入框)
url(url地址输入框)
tel(电话号码输入框)
number(数字输入框)
range(滑动条)
date(日期选取)
month(月份甄选)
week(周选择)
time(时间接选举取)
datetime-local(日期选拔)
datetime(包含时区)
color(颜色挑选)

新添表单成分

datalist

<input type="text" list="browers">
<datalist id="browers">
<option value="chrome"></option>
<option value="firfox"></option>
<option value="ie"></option>
</datalist>

  你解析类似www.xxx.com?a=a1&b=b二&c=c叁的querystring参数,必须用正则,可以吗,你也大概不明白string.split方法

 <div>*</div>*

表单验证

表单验证是指,在用户提交表单此前,确认保证用户输入是数量是官方的
证实输入类型
证明必填字段
证实字符长度
评释数值范围
说后天期和岁月范围
步长
正则表达式

示例
表明输入类型
<form action="success.html" method="post"> <h二>验证输入类型</h二> <label for=""> 数字: <input type="number"> </label> <label for=""> 邮箱: <input type="email"> </label> <label for=""> 网站: <input type="url"> </label> <input type="submit"></form>

申明必填字段
<form action="success.html" method="post"> <h2>验证必填字段</h2> <label for=""> 数字: <input type="number" required=""> </label> <label for=""> 邮箱: <input type="email" required=""> </label> <label for=""> 网站: <input type="url" required=""> </label> <input type="submit"></form>

注解字符长度
<form action="success.html" method="post"> <h二>验证字符长度</h二> <label for=""> 密码: <input type="password" required="" minlength="陆" maxlength="10"> </label> <input type="submit"></form>

表达数值范围
<form action="success.html" method="post"> <h二>验证数值范围</h贰> <label for=""> 订购数量: <input type="number" required="" min="陆" max="十"> </label> <input type="submit"></form>

证实日期和岁月范围
<form action="success.html" method="post"> <h2>验证日期和岁月限制</h二> <label for=""> 送货日期: <input type="date" required="" min="二〇一四-04-0一" max="二零一四-0伍-0一"> </label> <label for=""> 送货时间: <input type="time" required="" min="0八:00" max="1捌:00"> </label> <input type="submit"></form>

步长
<form action="success.html" method="post"> <h2>步长</h2> <label for=""> 订购数量: <input type="number" step="十"> </label> <input type="submit"></form>

正则表达式
<form action="success.html" method="post"> <h二>正则表明式</h二> <label for=""> 编号: <input type="text" pattern="[0-4]{3}"> </label> <input type="submit"></form>

剥夺表单验证
html5提供的表单验证依旧很简陋, 平日不能够达到规定的标准大家的实际上须求, 诸多时候大家依旧须求接纳javascript来产生表单验证, 那么大家就供给禁止使用html5表单验证,避防产生争辨
<form action="success.html" method="post" novalidate>

增加产量的表单属性
placeholder
autofocus
autocomplete
multiple

示例
placeholder
<input type="text" placeholder="请输入用户名">

autofocus
<input type="text" autofocus>

会在页面加载时自动得到关节
二个页面只可以有二个autofocus属性的定义

autocomplete提交成功后后一次输入自动补全
<form action="success.html" method="get" autocomplete="on"> <h二>autocomplete</h二> <label for=""> 用户名: <input type="text" name="username" placeholder="请输入用户名"> </label> <input type="submit"></form>

multiple
二种用法
着力用用

<select name="" id="" multiple> <option value="">option1</option> <option value="">option2</option> <option value="">option3</option></select>

type=file

<input type="file" multiple>

  你剖析html你还必须用正则,好啊,那就真不需求了,因为在解析html用到正则的时候你相当多时候就只能用到平衡组,你很有望卡在那边

)
有道是如何写正则

video

<video src="xx.mp4" controls></video>
录制格式

  正则的强大性与通用性就不提了,一般的拍卖完全够用了,你完全能够本身去“系统”的读书(注:系统学习正则),在配上Regex巴迪或许在线的正则(注:附注会提到内容)的工具就足以操纵一些常用的用法

当前 html5支撑二种录像格式mp5, webM, ogg

  不过去剖析html,照旧用标准的库去深入分析吧,纵然条条大路通秘Luli马,你真没供给以铁人叁项的精神去做用正则死嗑html。

video 属性

autoplay

布尔值, 钦命后,摄像会立时自动开首广播,不会停下来等着多少载入甘休

height width

内定播放器的的长度宽度

loop

重新播放,借使出现该属性,则当红娘文件完毕播放后再行开始播放。

muted

暗中认可静音播放

poster

为摄像内定海报图像

preload

钦命预先加载格局,多个可选值

none 暗中认可值,不加载任何事物
metadata 预先加载元数据
auto 预先加载整个录像

  其实深入分析html的库有满多科学的,如HtmlAgilityPack,又或者Jumony,以及Java的深入分析库htmlparser(有.net版的),下边列3个小例子:

音频audio

<audio controls src="xxx.mp3"></audio>

   地址:

正则表达式

  图片 1

创设正则表明式

var r = /a/;

    抓取商量区的:回复内容,购买人名字,购买时间

正则.test(字符串)

正则去相配字符串,倘若匹配成功就回去真,假若同盟失利就赶回假

var str = 'abcdef';
var re = /b/;

alert( re.test(str) );

    引用:HtmlAgilityPack库

转义字符

s : 空格
S : 非空格
d : 数字
D : 非数字
w : 字符 ( 字母 ,数字,下划线_ )
W : 非字符

(大写都是反义)

事例: 判断是不是全为数字

var str = '374829348791';

var re = /D/;

if( re.test(str) ){
    alert('不全是数字');
}
else{
    alert('全是数字');
}

    

字符串.search(正则)

正则去匹配字符串 , 要是相称成功,就回去相称成功的职位,假使同盟战败就赶回 -一

var str = 'abcdef';

var re = /b/;

alert( str.search(re) );

正则中的暗中认可 : 是分别轻重缓急写的
假诺不区分轻重缓急写的话,在正则的末段加标志 i

var str = 'abcdef';

var re = /B/i;

alert( str.search(re) );
using System;  using System.Collections.Generic;  using System.Linq;  using System.Text;  using HtmlAgilityPack;    namespace AnaHtml  {      class Program      {          static void Main(string[] args)          {              HtmlWeb html = new HtmlWeb();              var content = from page in html.Load("http://feedback.ebay.com/ws/eBayISAPI.dll?ViewFeedback2&ftab=AllFeedback&userid=paragad&iid=-1&de=off&items=25&interval=0&mPg=151")
                          //Skip(1)排除标题行 where((x,index)=>index%2==0)选取相应的内容行                            .DocumentNode.SelectSingleNode("//table[@]").Elements("tr").Skip(1).Where((x, index) => index % 2 == 0)                            let row = page                            where row != null                            select new                            {                                Content = row.ChildNodes[1].InnerText,
                              //注意,任何时候的SelectSingleNode方法都是以整个document为前提的,个人觉得应该当前的节点为前担                                Id =row.ChildNodes[2].SelectSingleNode(row.ChildNodes[2].XPath "//div[1]//a[1]//span[1]").InnerHtml,                                Retime = row.ChildNodes[3].InnerText                            };              foreach (var item in content)              {                  Console.WriteLine("rn Content:{0} Id={1} Time={2} ", item.Content, item.Id,item.Retime);              }              Console.Read();          }          }  }  

字符串.match(正则)

正则去相配字符串,假设相称成功,就回去匹配成功的数组,若是同盟不成事,就赶回null

var str = 'haj123sdk54hask33dkhalsd879';

var re = /d/;

alert( str.match(re) );

正则默许:正则相称成功就能够实现,不会持续合作
假使想任何招来,将在加标志 g(全局相配)

var str = 'haj123sdk54hask33dkhalsd879';

var re = /d/g;

alert( str.match(re) );

探寻连在一同的数字

var str = 'haj123sdk54hask33dkhalsd879';

var re = /dd/g;

alert( str.match(re) );//只会找到12 54 33 87

量词 : 相配不明确的岗位
: 至少出现叁遍

var str = 'haj123sdk54hask33dkhalsd879';

var re = /d /g;

alert( str.match(re) );

  整个结构清晰自然,利用Xpath的来进行精选一定便利,轻便就足以抓取内容。

字符串.replace(正则,新的字符串)

正则去相称字符串,相称成功的字符去替换来新的字符串

var str = 'aaa';
var re = /a /g;

str = str.replace(re,'b');

alert(str);

事例:关键字过滤

//菲称仁爱礁附近17艘中国船均在菲军监视之下

//| : 或的意思

//replace : 第二个参数:可以是字符串,也可以是一个回调函数

var aT = document.getElementsByTagName('textarea');
var oInput = document.getElementById('input1');

var re = /菲称|中国船|监视之下/g;

oInput.onclick = function(){

     //aT[1].value = aT[0].value.replace(re,'*');

     aT[1].value = aT[0].value.replace(re,function(str){
    //函数的第一个参数:就是匹配成功的字符     

         //alert( str );

         var result = '';

         for(var i=0;i<str.length;i  ){
             result  = '*';
         }


         return result;

     });

};

 

相配子项 : 小括号 () (还应该有其它三个意思,分组操作)

把正则的一体化叫做(老母)
下一场把左边手第一个小括号内部的正则,叫做那么些第三个子项(阿娘的率先个孩子)
其次个小括号便是第3个儿女

var str = '2013-6-7';

var re = /(d )(-)/g;

str = str.replace(re,function($0,$1,$2){
    //第一个参数:$0(母亲),第二个参数 : $1(第一个孩子)
    //,第二个参数 : $1(第二个孩子)

    //alert( $2 );

    return $1   '.';

});

alert( str );   //2013.6.7

本文由韦德国际1946发布于韦德国际1946国际网址,转载请注明出处:别在不嫌烦琐正则表明式深入分析html了,正则表

关键词: html 正则表达式 html5+css3