Javascript正则表达式测试网页

你平时如何测试正则表达式?直接写在大段的代码中,然后等待程序运行到那里,再用alert显示结果?或者是临时写一个页面,测试完成后把它丢掉?

你可以试一下我这个页面,虽然它很粗糙,但是测试正则表达式也足够了:))

一、说明:

1. 我的本意为交流技术.本人水平很菜.因此所贴出的代码中,会有不足之处.

2. 代码可任意修改.如果你觉得你修改过的代码比我的好,可将它贴出,我非常感谢.

3. 我对javascript的规范并不很熟悉.我的经验来自于开发.因此,若你对它有更好的见解,欢迎提出,我非常感谢.

二、测试用例:

1. 检查字符串中是否有非数字的字符:

test regex: \D

test regex flags: g

test string: 1234g56t78

2. 检查字符串中是否有非0-9、a~z、A-Z、_的字符:

test regex: \W

test regex flags: g

test string: i'm a pig! yes I'm!

3. 匹配字符串中的实数:

test regex: ([\d]+])\.([\d]+)

test regex flags: g

test string: float1234.58.723c65.183

三、程序代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<HTML>

<HEAD>

<TITLE>Javascript regex test page</TITLE>

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=GB2312">

<SCRIPT>

/**

* Method 测试正则表达式函数

* @param method 接收到的正则表达式类的方法

*/

function check(method)

{

// 将用户输入的正则表达式的标志转换为小写

form1.flags.value = form1.flags.value.toLowerCase();

// 如果含有不是g、i、m的字符, 则 提示并返回

if ( form1.flags.value.search(/[^g|i|m]/g) != -1 )

{

alert("flags only can be g, i, m");

return;

}

// 利用用户输入的字符串和标志建立正则表达式

var re = new RegExp(form1.regex.value, form1.flags.value);

// 获得并显示生成的正则表达式的字符串形式

destRegex.innerText = re.toString() + ' ';

// 定义 返回值

var cr;

ex = "new RegExp('" + form1.regex.value + "', '" + form1.flags.value + "').";

// 根据用户选择的方法, 进行相应的调用

switch ( method )

{

case '0': // 正则表达式的 exec 方法

cr = re.exec(form1.string.value);

ex = ex + "exec('" + form1.string.value + "')";

break;

case '1': // 正则表达式的 test 方法

cr = re.test(form1.string.value);

ex = ex + "test('" + form1.string.value + "')";

break;

case '2': // 字符串类的 match 方法

cr = form1.string.value.match(re);

ex = "'" + form1.string.value + "'.match(" + re.toString() + ")";

break;

case '3': // 字符串类的 search 方法

cr = form1.string.value.search(re);

ex = "'" + form1.string.value + "'.search(" + re.toString() + ")";

break;

case '4': // 字符串类的 replace 方法

cr = form1.string.value.replace(re);

ex = "'" + form1.string.value + "'.replace(" + re.toString() + ")";

break;

case '5': // 字符串类的 split 方法

cr = form1.string.value.split(re);

ex = "'" + form1.string.value + "'.split(" + re.toString() + ")";

break;

}

// 获得并显示表达式

expression.innerText = ex;

// 获得并显示计算结果的类型

returnType.innerText = typeof(cr);

// 定义结果

var result = '';

if ( cr != null && typeof(cr) == 'object' && cr.length != null ) // 如果计算结果是一个数组, 则取出所有数组的值

{

for ( i = 0; i < cr.length; i++ )

{

result += "array[" + i + "] = '" + cr[i] + "'\n";

}

}

else

if ( cr != null ) // 如果计算结果不为null, 则取出计算结果的值

{

result = cr;

}

// 获得并显示结果

matchResult.innerText = result + ' ';

// 获得并显示正则表达式的lastIndex属性

lastIndex.innerText = re.lastIndex + ' ';

}

</SCRIPT>

</HEAD>

<BODY ALIGN=CENTER>

<FORM NAME="form1" METHOD="post" ACTION="" ALIGN=CENTER>

<TABLE BORDER="1">

<TR>

<TD COLSPAN="2" ALIGN="CENTER">test javascript regex</TD>

</TR>

<TR>

<TD>test regex:</TD>

<TD><INPUT NAME="regex" TYPE="text"></TD>

</TR>

<TR>

<TD>test regex flags:</TD>

<TD><INPUT NAME="flags" TYPE="text" ID="flags"></TD>

</TR>

<TR>

<TD>test string:</TD>

<TD><INPUT NAME="string" TYPE="text"></TD>

</TR>

<TR>

<TD>select method:</TD>

<TD ALIGN="CENTER">

<SELECT NAME="select" onChange="check(this.value)">

<OPTION VALUE="0">exec</OPTION>

<OPTION VALUE="1">test</OPTION>

<OPTION VALUE="2">match</OPTION>

<OPTION VALUE="3">search</OPTION>

<OPTION VALUE="4">replace</OPTION>

<OPTION VALUE="5">split</OPTION>

</SELECT>

<INPUT VALUE='run' onclick="check(form1.select.value)" TYPE=button>

</TD>

</TR>

<TR>

<TD>dest regex:</TD>

<TD STYLE="color:blue" ID=destRegex> </TD>

</TR>

<TR>

<TD>dest expression:</TD>

<TD STYLE="color:blue" ID=expression> </TD>

<TR>

<TR>

<TD>return type:</TD>

<TD STYLE="color:darkred" ID=returnType> </TD>

</TR>

<TR>

<TD>result:</TD>

<TD STYLE="color:red" ID=matchResult> </TD>

</TR>

<TR>

<TD>regex lastIndex:</TD>

<TD STYLE="color:red" ID=lastIndex> </TD>

</TR>

</TABLE>

</FORM>

</BODY>

</HTML>

(0)

相关推荐

  • Javascript正则表达式测试网页

    你平时如何测试正则表达式?直接写在大段的代码中,然后等待程序运行到那里,再用alert显示结果?或者是临时写一个页面,测试完成后把它丢掉? 你可以试一下我这个页面,虽然它很粗糙,但是测试正则表达式也足够了:)) 一.说明: 1. 我的本意为交流技术.本人水平很菜.因此所贴出的代码中,会有不足之处. 2. 代码可任意修改.如果你觉得你修改过的代码比我的好,可将它贴出,我非常感谢. 3. 我对javascript的规范并不很熟悉.我的经验来自于开发.因此,若你对它有更好的见解,欢迎提出,我非常感谢.

  • JavaScript正则表达式小结(test|match|search|replace|split|exec)

    学JavaScript正则的好文一篇:http://www.cainiao8.com/web/js_note/js_regular_expression.html test:测试string是否包含有匹配结果,包含返回true,不包含返回false. <script type="text/javascript"> var str = "bbs.byr.cn"; var reg = /b/; var ret = reg.test(str); alert(r

  • 软件测试面试如何测试网页的登录页面

    软件测试面试如何测试网页的登录页面 这个面试题碰到过很多次, 再次总结下来. 具体需求: 有一个登陆页面, 上面有2个textbox, 一个提交按钮.  请针对这个页面设计30个以上的test case. 此题的考察目的: 面试者是否熟悉各种测试方法,是否有丰富的Web测试经验, 是否了解Web开发,以及设计Test case的能力 这个题目还是相当有难度的, 一般的人很难把这个题目回答好. 功能测试(Function test) 输入正确的用户名和密码,点击提交按钮,验证是否能正确登录. 输入

  • JavaScript正则表达式验证代码(推荐)

    RegExp:是正则表达式(regular expression)的简写. 正则表达式描述了字符的模式对象.可以使用正则表达式来描述要检索的内容. 简单的模式可以是一个单独的字符.更复杂的模式包括了更多的字符,并可用于解析.格式检查.替换等等. //判断输入内容是否为空 function IsNull(){ var str = document.getElementById('str').value.trim(); if(str.length==0){ alert('对不起,文本框不能为空或者为

  • JavaScript正则表达式下之相关方法

    上篇文章给大家介绍了JavaScript 正则表达式上之基本语法介绍了JavaScript正则表达式的语法,有了这些基本知识,可以看看正则表达式在JavaScript的应用了,在一切开始之前,看看RegExp实例的几个属性 RegExp实例对象有五个属性 1.global:是否全局搜索,默认是false 2.ignoreCase:是否大小写敏感,默认是false 3.multiline:多行搜索,默认值是false 4.lastIndex:是当前表达式模式首次匹配内容中最后一个字符的下一个位置,

  • JavaScript正则表达式(总结篇)

    本文是小编参考其他有关js正则表达式资料整理的,主要目的有两个:一:自我复习归纳总结.二:共享方便大家搜索 .js正则表达式感兴趣的朋友可以一起学习,没有写的知识点,欢迎大家补充,共同学习进步. 验证数字:^[0-9]*$ 验证n位的数字:^\d{n}$ 验证至少n位数字:^\d{n,}$ 验证m-n位的数字:^\d{m,n}$ 验证零和非零开头的数字:^(0|[1-9][0-9]*)$ 验证有两位小数的正实数:^[0-9]+(.[0-9]{2})?$ 验证有1-3位小数的正实数:^[0-9]+

  • javascript 正则表达式分组、断言详解

     javascript 正则表达式分组.断言详解 提示:阅读本文需要有一定的正则表达式基础. 正则表达式中的断言,作为高级应用出现,倒不是因为它有多难,而是概念比较抽象,不容易理解而已,今天就让小菜通俗的讲解一下. 如果不用断言,以往用过的那些表达式,仅仅能获取到有规律的字符串,而不能获取无规律的字符串. 举个例子,比如html源码中有<title>xxx</title>标签,用以前的知识,我们只能确定源码中的<title>和</title>是固定不变的.因

  • 学习JavaScript正则表达式

    JavaScript正则表达式学习: 有个在线调试正则的工具.下面的所有示例代码,都可以在codepen上查看到. 1.创建正则表达式 var re = /ab+c/; //方式一 正则表达式字面量 var re = new RegExp("ab+c"); //方式二 RegExp对象的构造函 1)正则表达式字面量在脚本加载后编译.若你的正则表达式是常量,使用这种方式可以获得更好的性能. 2)使用构造函数,提供了对正则表达式运行时的编译.当你知道正则表达式的模式会发生改变, 或者你事先

  • JavaScript 正则表达式中global模式的特性

    返回 Boolean 值,指出正则表达式使用的global 标志 (g) 的状态.默认值为 false.只读. rgExp.global 必选项 rgExp 参数是正则表达式对象. 如果正则表达式设置了global 标志,那么global 属性返回 true,否则返回 false. 使用 global 标志表明在被查找的字符串中搜索操作将查找所有符合的项,而不仅仅是第一个.这也被称为全局匹配. 一直不是很清楚javascript的global到底表现在哪些方面,所以今天特地做了几个测试: var

  • python使用正则表达式分析网页中的图片并进行替换的方法

    本文实例讲述了python使用正则表达式分析网页中的图片并进行替换的方法.分享给大家供大家参考.具体分析如下: 这段代码分析网页中的所有图片表单<img>,分析后为其前后添加相应的修饰标签,并添加到图片的超级链接. 复制代码 代码如下: result = value.replace("[ page ]","").replace('  ',u' ') p=re.compile(r'''(<img\b[^<>]*?\bsrc[\s\t\r\

随机推荐