网页制作心得技巧:正则表达式语法

 更新时间:2016年9月20日 19:05  点击:2221

一个正则表达式就是由普通字符(例如字符 a 到 z)以及特殊字符组成的。在查找文字主体时待匹配的一个或多个字符串。正则表达式作为一个模板,将某个字符模式与所搜索的字符串进行匹配。

这里有一些可能会遇到的正则表达式示例:
JScript
 VBScript
 匹配
 
/^[ t]*$/
 "^[ t]*$"
 匹配一个空白行。
 
/d{2}-d{5}/
 "d{2}-d{5}"
 验证一个ID 号码是否由一个2位数字,一个连字符以及一个5位数字组成。
 
/<(.*)>.*</1>/
 "<(.*)>.*</1>"
 匹配一个 HTML 标记。
 

下表是元字符及其在正则表达式上下文中的行为的一个完整列表:  字符
 描述
 

 将下一个字符标记为一个特殊字符、或一个原义字符、或一个 后向引用、或一个八进制转义符。例如,'n' 匹配字符 "n"。'n' 匹配一个换行符。序列 '\' 匹配 "" 而 "(" 则匹配 "("。
 
^
 匹配输入字符串的开始位置。如果设置了 RegExp 对象的 Multiline 属性,^ 也匹配 'n' 或 'r' 之后的位置。
 
$
 匹配输入字符串的结束位置。如果设置了RegExp 对象的 Multiline 属性,$ 也匹配 'n' 或 'r' 之前的位置。
 
*
 匹配前面的子表达式零次或多次。例如,zo* 能匹配 "z" 以及 "zoo"。 * 等价于{0,}。
 
+
 匹配前面的子表达式一次或多次。例如,'zo+' 能匹配 "zo" 以及 "zoo",但不能匹配 "z"。+ 等价于 {1,}。
 
?
 匹配前面的子表达式零次或一次。例如,"do(es)?" 可以匹配 "do" 或 "does" 中的"do" 。? 等价于 {0,1}。
 
{n}
 n 是一个非负整数。匹配确定的 n 次。例如,'o{2}' 不能匹配 "Bob" 中的 'o',但是能匹配 "food" 中的两个 o。
 
{n,}
 n 是一个非负整数。至少匹配n 次。例如,'o{2,}' 不能匹配 "Bob" 中的 'o',但能匹配 "foooood" 中的所有 o。'o{1,}' 等价于 'o+'。'o{0,}' 则等价于 'o*'。
 
{n,m}
 m 和 n 均为非负整数,其中n <= m。最少匹配 n 次且最多匹配 m 次。刘, "o{1,3}" 将匹配 "fooooood" 中的前三个 o。'o{0,1}' 等价于 'o?'。请注意在逗号和两个数之间不能有空格。
 
?
 当该字符紧跟在任何一个其他限制符 (*, +, ?, {n}, {n,}, {n,m}) 后面时,匹配模式是非贪婪的。非贪婪模式尽可能少的匹配所搜索的字符串,而默认的贪婪模式则尽可能多的匹配所搜索的字符串。例如,对于字符串 "oooo",'o+?' 将匹配单个 "o",而 'o+' 将匹配所有 'o'。
 
.
 匹配除 "n" 之外的任何单个字符。要匹配包括 'n' 在内的任何字符,请使用象 '[.n]' 的模式。
 
(pattern)
 匹配pattern 并获取这一匹配。所获取的匹配可以从产生的 Matches 集合得到,在VBScript 中使用 SubMatches 集合,在JScript 中则使用 $0…$9 属性。要匹配圆括号字符,请使用 '(' 或 ')'。
 
(?:pattern)
 匹配 pattern 但不获取匹配结果,也就是说这是一个非获取匹配,不进行存储供以后使用。这在使用 "或" 字符 (|) 来组合一个模式的各个部分是很有用。例如, 'industr(?:y|ies) 就是一个比 'industry|industries' 更简略的表达式。
 
(?=pattern)
 正向预查,在任何匹配 pattern 的字符串开始处匹配查找字符串。这是一个非获取匹配,也就是说,该匹配不需要获取供以后使用。例如, 'Windows (?=95|98|NT|2000)' 能匹配 "Windows 2000" 中的 "Windows" ,但不能匹配 "Windows 3.1" 中的 "Windows"。预查不消耗字符,也就是说,在一个匹配发生后,在最后一次匹配之后立即开始下一次匹配的搜索,而不是从包含预查的字符之后开始。

<

  在Nielsen的可用性工程里提到可用性的其中一个原则是Errors,记得刚开博客的时候也穷举了一些关于可用性方面的文章,里面将这个errors翻译成了“少错”,实际上我个人觉得(也有不少版本这么翻译)“容错”更为贴切。无论是客户端软件还是web软件,用户毕竟不是专业人员,他的操作必然不能按照程序员所设定的路线来走,那么很有可能就会发生错误,“少错”是一个很含糊的概念,怎样做到少错,如何才是少错呢?真正需要做的应该是“容错”,当用户发生错误时,系统要能做到给予正确友好的提示,帮助他完成操作流程以及目的。

  前阵子由于工作的需要,对于系统给予用户填写信息的反馈进行了一些肤浅的研究,主要以web注册页的操作体验为主,现整理出来与大家共同分享,也欢迎大家拍砖,以共同提高。第一次写所谓的“技术贴”,必然有很多不足,希望各位及时纠正,万分感谢。

  首先举一个失败的用户体验的例子,126邮箱注册,不过那是一个月以前了,今天本想截图贴上来的,结果登录发现已经改版了,不错,确实该改了,需要进步嘛!不过却不利于文章的描述了,看来我只能凭着自己的印象来写了,要是有什么偏差,见谅!

  原有的126邮箱注册页并不象现在将用户名的填写单独做为一页进行强调,当时所有的信息填写都在一页中,而且没有检测用户名的按钮,这就意味着用户在进行填写时必须完成所有的输入框才能得知自己所键入的用户名是否合法或是否可用。而且整个页面没有一点提示信息,实在让人费解。更郁闷的事,对于错误的提示采用的是弹出对话框,以上所有都大大降低了用户操作的效率。我简要模拟一下当时的过程:

  首先,我在用户名的输入框中键入一个特殊符号,为了节省时间更快的看到系统给予的反馈,我直接跳过了中间所有的信息填写,并点击注册,这时,系统弹出了一个对话框:

  

  这里的文字实在太为模糊,怎么就不合法了呢?那怎么样的用户名才是合法的?实在让人伤透脑筋。

  我重新输入了一个数字,系统又提示到:

  

  好,那我不用数字,我用字母总可以了吧,我输入“a”:

  

<

编写JS的时候,总会调用的网页上的控件,今天有心情,把获得网页上的控件方法写了下,有不足,请补充.
【总结】一般我喜欢使用:document.getElementById()和document.all().现在觉得document.all.*比较不错!
关于其更深一步的原理暂不清楚,希望有明白的人给个深入讲解的链接!!


本帖以获得页面的text文本为例,获得控件后为其赋值为"你好!"
【附一:方法大全】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>获得网页控件的方法大全</title>
<script language="javascript">
 function AXzhz()
 { 
  //【AX为文本框的id,通过下面的方法对文本框赋内容】
 
  //【根据控件ID】
  document.getElementById("AX").value="你好!" ;
  //document.all("AX").value="你好!"; 
  //document.all.AX.value="你好!";
  //不成功 document.AX.value="你好!";
 
  //document.body.all("AX").value="你好!";
  //document.body.all.AX.value="你好!";
  //不成功 document.body.getElementById("AX").value="你好!";
 
  //formid.AX.value="你好!"; 
  //不成功 formid.getElementById("AX").value="你好!";
  //不成功 formid.all.getElementById("AX").value="你好!";
  //formid.all.AX.value="你好!";
  //formid.all("AX").value="你好!";
 
  //【根据控件name,返回的是一个数组集合,再通过下标获得控件】
  //document.getElementsByName("textfield")[0].value="你好!";
  //不成功 formid.all.getElementsByName("textfield")[0].value="你好!";
  //不成功 formid.getElementsByName("textfield")[0].value="你好!";
 
  //【根据标签,返回的是一个数组集合,严格来说是获得标签中的内容,估计用到的机会不是很多】 
  //document.getElementsByTagName("td")[1].innerHTML="你好!";   
 }
</script>
</head>
<body>
<form id="formid">
<table width="200" border="1">
<!--title是鼠标在上面的时候出现的提示-->
  <tr title="快啊快啊!!" onclick="AXzhz()">
    <td bgcolor="#FF9933">你点我啊!!<br>
 <INPUT TYPE="text"value="根据标签测试时使用,请仔细观察结果!">
 </td>  
  </tr>
  <tr>
  &nbs

<

  使层能够遮挡住下面的列表,只要在层中加入一个和层相同大小的<Iframe>就可以了。

  具体做法如下:

<DIV>
<!--//原来的内容//-->
<IFRAME width="100%" height="100%" style="position:absolute; top:0px; z-index:-1; border-style:none;"></IFRAME>
</DIV>

  这个方法对于透明的或外形不规则的层无效。




  目前,WWW网站已经成为互联网最重要的组成部分,是您通往成功的关键。因此,创建WWW网站不仅是您网路行销的基础,更是每一个参与网路行销活动的企业或个人的第一步,也是极为重要的一步。首先,我们应该了解一下成功的网站应该具备哪些特点:

  结构清晰并且便于使用。如果人们看不懂或很难看懂您的网站,那么,他如何购买您的产品或服务呢?尽量使用一些醒目的标题或文字来突出您的产品或服务。并且始终牢记即使您拥有最棒的产品,如果客户从您的网站上不清楚您在卖什么或不清楚如何受益的话,他们是不会购买的。

  导向清晰。使用超文本链接或图片链接,使人们能够在您的网站上自由前进或后退,而不要让他们使用浏览器上的前进或后退。记住在所有的图片上使用“ALT”标识符注明图片名称或解释,以便那些不愿意自动加载图片的观众能够了解图片的含义。

  快速的下载时间。不要妄想人人都使用33.6K的猫。很多的浏览者不会进入需要等待5分钟下载时间才能进入的网站,请记住在互联网上30 秒的等待时间与我们平常10分钟等待时间的感觉相同。因此,要尽量避免使用过多的图片及体积过大的图片。

  非图形的内容。许多网站的设计者使用了动态“Gif”图片和Java动画以使网站上的图形或文字产生动态的效果。这不仅仅会增加网页下载时间,它更会分散观众对您网站其他信息的注意力。由于在互联网浏览的大多是一些寻找信息的人们,因此您要确定您的网站将为他们提供的是有价值的内容,而不是过度的装饰。

  方便的反馈及订购程序。这是一个通常被网站设计者忽略的问题。让客户明确您所能提供的产品或服务并让他们非常方便地订购是您获得成功的重要因素。如果客户在您的网站上产生了购买产品或服务的欲望,您是否能够让他们尽快实现吗?是在线还是离线?




<
[!--infotagslink--]

相关文章

  • PHP正则表达式取双引号内的内容

    取双引号内的内容我们如果一个字符串中只有一个可以使用explode来获得,但如果有多个需要使用正则表达式来提取了,具体的例子如下。 写程序的时候总结一点经验,如何只...2016-11-25
  • PHP正则表达式之捕获组与非捕获组

    今天遇到一个正则匹配的问题,忽然翻到有捕获组的概念,手册上也是一略而过,百度时无意翻到C#和Java中有对正则捕获组的特殊用法,搜索关键词有PHP时竟然没有相关内容,自己试了一下,发现在PHP中也是可行的,于是总结一下,分享的同...2015-11-08
  • 一个关于JS正则匹配的踩坑记录

    这篇文章主要给大家介绍了一个关于JS正则匹配的踩坑记录,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-13
  • php 验证只能输入汉字、英语、数字的正则表达式

    正则表达式是一门非常有用的并且进行模糊判断的一个功能了,我们下面来看通过正则来验证输入汉字、英语、数字,具体如下。 收藏了正则表达式。可以验证只能输入数...2016-11-25
  • java正则表达式判断前端参数修改表中另一个字段的值

    这篇文章主要介绍了java正则表达式判断前端参数修改表中另一个字段的值,需要的朋友可以参考下...2021-05-07
  • 常用的日期时间正则表达式

    常用的日期时间正则表达式 下面收藏了大量的日期时间正则匹配函数,包括分钟,时间与秒都能达到。 正则表达式 (?n:^(?=d)((?<day>31(?!(.0?[2469]|11))|30(?!.0?2)|29(...2016-11-25
  • PHP正则表达式匹配验证提取网址URL实例总结

    网址规则是可寻的,所以我们可以使用正则表达式来提取字符串中的url地址了,下面一起来看看小编整理的几个PHP正则表达式匹配验证提取网址URL实例. 匹配网址 URL 的...2016-11-25
  • 正则表达式中两个反斜杠的匹配规则详解

    这篇文章主要介绍了正则表达式中两个反斜杠的匹配规则,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-05-07
  • JS中使用正则表达式g模式和非g模式的区别

    这篇文章给大家详细介绍了JS中使用正则表达式g模式和非g模式的区别,非常不错,具有参考借鉴价值,需要的朋友参考下吧...2017-04-03
  • C#正则表达式使用方法示例

    这篇文章主要介绍了C#正则表达式使用方法,大家参考使用...2020-06-25
  • 常用C#正则表达式汇总介绍

    c#正则表达式,用于字符串处理、表单验证等场合,实用高效。现将一些常用的表达式收集于此,以备不时之需。...2020-06-25
  • JavaScript利用正则表达式替换字符串中的内容

    本文主要介绍了JavaScript利用正则表达式替换字符串中内容的具体实现方法,并做了简要注释,便于理解。具有一定的参考价值,需要的朋友可以看下...2017-01-09
  • 一文秒懂python正则表达式常用函数

    这篇文章主要介绍了python正则表达式常用函数及使用方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-05-07
  • Idea使用正则表达式批量替换字符串的方法

    这篇文章给大家介绍了Idea使用正则表达式批量替换字符串的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧...2021-07-21
  • js正则学习小记之匹配字符串字面量

    关于匹配字符串问题,有很多种类型,今天讨论 js 代码里的字符串匹配,因为我想学完之后写个语法高亮练手,所以用js代码当作例子...2021-05-07
  • PHP正则表达式之捕获组与非捕获组

    今天遇到一个正则匹配的问题,忽然翻到有捕获组的概念,手册上也是一略而过,百度时无意翻到C#和Java中有对正则捕获组的特殊用法,搜索关键词有PHP时竟然没有相关内容,自己试了一下,发现在PHP中也是可行的,于是总结一下,分享的同...2015-11-08
  • C# 中使用正则表达式匹配字符的含义

    正则表达式的作用用来描述字符串的特征。本文重点给大家介绍C# 中使用正则表达式匹配字符的含义,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧...2020-06-25
  • Python验证的50个常见正则表达式

    这篇文章主要给大家介绍了关于利用Python验证的50个常见正则表达式的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-11
  • C#编程自学之运算符和表达式

    这篇文章主要介绍了C#运算符和表达式,这是自学C#编程的第五篇,希望对大家的学习有所帮助。...2020-06-25
  • PHP正则表达式过滤html标签属性(DEMO)

    这篇文章主要介绍了PHP正则表达式过滤html标签属性的相关内容,实用性非常,感兴趣的朋友参考下吧...2016-05-06