Skip to content

Javascript高级实验

1 实验类型

验证型，2学时，必选实验

2 实验目的

熟悉正则表达式书写规则；了解Html 5中Canvas对象基础使用

3 实验要求

验证参考代码；修改参考代码，实现自己的设计；将关键结果截图及源代码整理成实验报告

4 实验环境

Windows7、Microsoft Edge/Chrome/Firefox等浏览器、Visual Studio Code(VS Code)

5 实验步骤

创建工作目录：{盘符}:/{学号}/exp3_js_advanced， 后续文件均存放在工作目录

正则表达式

补充1：正则表达式修饰符

修饰符可以在全局搜索中不区分大小写:

修饰符 描述
i 执行对大小写不敏感的匹配。
g 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m 执行多行匹配。

补充2：String对象的replace方法

语法

string.replace(searchvalue,newvalue)

参数值

参数 描述
searchvalue 必须。规定子字符串或要替换的模式的 RegExp 对象。请注意，如果该值是一个字符串，则将它作为要检索的直接量文本模式，而不是首先被转换为 RegExp 对象。
newvalue 必需。一个字符串值。规定了替换文本或生成替换文本的函数。

返回值

类型 描述
String 一个新的字符串，是用 replacement 替换了 regexp 的第一次匹配或所有匹配之后得到的。

  1. 创建文件：js_regular.html，将字符串中的Xust替换为Xidian，参考代码如下：

    替换
    1
2
3
4
    <script type="text/javascript">
  var str = "Visit Xust!";
  document.write(str.replace(/Xust/, "Xidian"));
</script>

  2. 创建文件：js_regular_global.html，全局替换Xust为Xidian，参考代码如下：

    全局替换
    1
2
3
4
5
6
    <script type="text/javascript">
  var str = "Welcome to Xust! ";
  str = str + "We are proud to announce that Xust has ";
  str = str + "one of the largest Web Developers sites in the world.";
  document.write(str.replace(/Xust/g, "Xidian"));
</script>

  3. 创建文件：js_regular_global.html，确保字符串中的Javascript首字母大写，参考代码如下：

    03_Javascript高级实验/src/js_regular_i.html
    1
2
3
4
    <script type="text/javascript">
  var str = "javascript Tutorial";
  document.write(str.replace(/javascript/i, "JavaScript"));
</script>

  4. 创建文件：js_regular_exchange.html，将字符串Doe, John转换为John Doe的形式，参考代码如下：

    局部转换
    1
2
3
4
    <script type="text/javascript">
  var str = "Doe, John";
  document.write(str.replace(/(\w+)\s*, \s*(\w+)/, "$2 $1"));
</script>

  5. 创建文件：js_regular_quote.html，把所有的花引号替换为直引号，参考代码如下：

    花引号替换为直引号
    1
2
3
4
    <script type="text/javascript">
  var str = '"a", "b"';
  document.write(str.replace(/"([^"]*)"/g, "'$1'"));
</script>

  6. 创建文件：js_regular_cap_first.html，把字符串中所有单词的首字母都转换为大写，参考代码如下：

    首字母转换大写
    1
2
3
4
5
6
    <script type="text/javascript">
  var str = 'aaa bbb ccc';
  document.write(str.replace(/\b\w+\b/g, function (word) {
    return word.substring(0, 1).toUpperCase() + word.substring(1);
  }));
</script>

  7. 编写代码验证常见正则表达式

选择某类常见字符串，编写代码进行验证

校验数字的表达式

功能 正则表达式
数字 ^[0-9]*$
n位的数字 ^\d{n}$
至少n位的数字 ^\d{n,}$
m-n位的数字 ^\d{m,n}$
零和非零开头的数字 ^(0|[1-9][0-9]*)$
非零开头的最多带两位小数的数字 ^([1-9][0-9]*)+(.[0-9]{1,2})?$
带1-2位小数的正数或负数 ^(-)?\d+(.\d{1,2})?$
正数、负数、和小数 ^(-|+)?\d+(.\d+)?$
有两位小数的正实数 ^[0-9]+(.[0-9]{2})?$
有1~3位小数的正实数 ^[0-9]+(.[0-9]{1,3})?$
非零的正整数 ^[1-9]\d$ 或 ^([1-9][0-9]){1,3}$ 或 ^+?[1-9][0-9]*$
非零的负整数 ^-[1-9][]0-9"$ 或 ^-[1-9]\d$
非负整数 ^\d+$ 或 ^[1-9]\d*|0$
非正整数 ^-[1-9]\d*|0$ 或 ^((-\d+)|(0+))$
非负浮点数 ^\d+(.\d+)?$ 或 ^[1-9]\d.\d|0.\d[1-9]\d|0?.0+|0$
非正浮点数 ^((-\d+(.\d+)?)|(0+(.0+)?))$ 或 ^(-([1-9]\d.\d|0.\d[1-9]\d))|0?.0+|0$
正浮点数 ^[1-9]\d.\d|0.\d[1-9]\d$ 或 ^(([0-9]+.[0-9][1-9][0-9])|([0-9][1-9][0-9].[0-9]+)|([0-9][1-9][0-9]))$
负浮点数 ^-([1-9]\d.\d|0.\d[1-9]\d)$ 或 ^(-(([0-9]+.[0-9][1-9][0-9])|([0-9][1-9][0-9].[0-9]+)||([0-9][1-9][0-9])))$
浮点数 ^(-?\d+)(.\d+)?$ 或 ^-?([1-9]\d.\d|0.\d[1-9]\d|0?.0+|0)$

校验字符的表达式

功能 正则表达式
汉字 ^[\u4e00-\u9fa5]{0,}$
英文和数字 ^[A-Za-z0-9]+$ 或 ^[A-Za-z0-9]{4,40}$
长度为3-20的所有字符 ^.{3,20}$
由26个英文字母组成的字符串 ^[A-Za-z]+$
由26个大写英文字母组成的字符串 ^[A-Z]+$
由26个小写英文字母组成的字符串 ^[a-z]+$
由数字和26个英文字母组成的字符串 ^[A-Za-z0-9]+$
由数字、26个英文字母或者下划线组成的字符串 ^\w+$ 或 ^\w{3,20}$
中文、英文、数字包括下划线 ^[\u4E00-\u9FA5A-Za-z0-9_]+$
中文、英文、数字但不包括下划线等符号 ^[\u4E00-\u9FA5A-Za-z0-9]+$ 或 ^[\u4E00-\u9FA5A-Za-z0-9]{2,20}$
可以输入含有^%&',;=?$\"等字符 [^%&',;=?$\x22]+ 12
禁止输入含有~的字符 [^~\x22]+

特殊需求表达式

功能 正则表达式
Email地址 ^\w+([-+.]\w+)@\w+([-.]\w+).\w+([-.]\w+)*$
域名 [a-zA-Z0-9][-a-zA-Z0-9]{0,62}(/.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+/.?
InternetURL [a-zA-z]+://[^\s] 或 ^http://([\w-]+.)+[\w-]+(/[\w-./?%&=])?$
手机号码 ^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$
电话号码("XXX-XXXXXXX"、"XXXX-XXXXXXXX"、"XXX-XXXXXXX"、"XXX-XXXXXXXX"、"XXXXXXX"和"XXXXXXXX) ^((\d{3,4}-)|\d{3.4}-)?\d{7,8}$
国内电话号码(0511-4405222、021-87888822) \d{3}-\d{8}|\d{4}-\d{7}
身份证号(15位、18位数字) ^\d{15}|\d{18}$
短身份证号码(数字、字母x结尾) ^([0-9]){7,18}(x|X)?$ 或 ^\d{8,18}|[0-9x]{8,18}|[0-9X]{8,18}?$
帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线) ^[a-zA-Z][a-zA-Z0-9_]{4,15}$
密码(以字母开头，长度在6~18之间，只能包含字母、数字和下划线) ^[a-zA-Z]\w{5,17}$
强密码(必须包含大小写字母和数字的组合，不能使用特殊字符，长度在8-10之间) ^(?=.\d)(?=.[a-z])(?=.*[A-Z]).{8,10}$
日期格式 ^\d{4}-\d{1,2}-\d{1,2}
一年的12个月(01～09和1～12) ^(0?[1-9]|1[0-2])$
一个月的31天(01～09和1～31) ^((0?[1-9])|((1|2)[0-9])|30|31)$
xml文件 ^([a-zA-Z]+-?)+[a-zA-Z0-9]+\.[x|X][m|M][l|L]$
中文字符的正则表达式 [\u4e00-\u9fa5]
双字节字符 [^\x00-\xff] (包括汉字在内，可以用来计算字符串的长度(一个双字节字符长度计2，ASCII字符计1))
空白行的正则表达式 \n\s*\r (可以用来删除空白行)
HTML标记的正则表达式 <(\S?)[^>]>.?</\1>|<.? /> (网上流传的版本太糟糕，上面这个也仅仅能部分，对于复杂的嵌套标记依旧无能为力)
首尾空白字符的正则表达式 ^\s|\s$或(^\s)|(\s$) (可以用来删除行首行尾的空白字符(包括空格、制表符、换页符等等)|，非常有用的表达式)
腾讯QQ号 [1-9][0-9]{4,} (腾讯QQ号从10000开始)
中国邮政编码 [1-9]\d{5}(?!\d) (中国邮政编码为6位数字)
IP地址 \d+.\d+.\d+.\d+ (提取IP地址时有用)
IP地址 ((?:(?:25[0-5]|2[0-4]\d|[01]?\d?\d)\.){3}(?:25[0-5]|2[0-4]\d|[01]?\d?\d))
IP-v4地址 \b(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\b (提取IP地址时有用)
子网掩码 ((?:(?:25[0-5]|2[0-4]\d|[01]?\d?\d)\.){3}(?:25[0-5]|2[0-4]\d|[01]?\d?\d))
抽取注释
查找CSS属性: ^\s[a-zA-Z\-]+\s[:]{1}\s[a-zA-Z0-9\s.#]+[;]{1}
提取页面超链接: (])(href="https?:\/\/)((?!(?:(?:www\.)?'.implode('|(?:www\.)?', $follow_list).'))[^" rel="external nofollow" ]+)"((?!.\brel=)[^>])(?:[^>])>
提取网页图片 \< [img][^\\>][src] = [\"\']{0,1}([^\"\'\ >]*)
提取网页颜色代码 ^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$
文件扩展名效验 ^([a-zA-Z]\:|\\)\\([^\\]+\\)[^\/:?"<>|]+\.txt(l)?$
判断IE版本 ^.MSIE 5-8?(?!.Trident\/[5-9]\.0).*$

Html5 Canvas

  1. 创建文件：js_canvas_line.html，绘制一条路径，形状是字母L，参考代码如下：

    绘制路径
     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
    <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>lineTo</title>
</head>

<body>
  <canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
    您的浏览器不支持 HTML5 canvas 标签。
  </canvas>
  <script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.beginPath();
    ctx.moveTo(20, 20);
    ctx.lineTo(20, 100);
    ctx.lineTo(70, 100);
    ctx.stroke();
  </script>
</body>

</html>

  2. 创建文件：js_canvas_transform.html，实现图形旋转，参考代码如下:

    图形旋转
     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
    <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>setTransform</title>
</head>

<body>
  <canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
    您的浏览器不支持 HTML5 canvas 标签。
  </canvas>
  <script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.fillStyle = "yellow";
    ctx.fillRect(0, 0, 250, 100)
    ctx.setTransform(1, 0.5, -0.5, 1, 30, 10);
    ctx.fillStyle = "red";
    ctx.fillRect(0, 0, 250, 100);
    ctx.setTransform(1, 0.5, -0.5, 1, 30, 10);
    ctx.fillStyle = "blue";
    ctx.fillRect(0, 0, 250, 100);
  </script>
</body>

</html>

拓展练习

  1. 使用正则表达式验证课程表表单

    在课程表表单实验结果基础上修改

  2. 使用Canvas绘制一个较为复杂的图形