Javascript正则表达式测试网页

简介: 你平时如何测试正则表达式?直接写在大段的代码中,然后等待程序运行到那里,再用alert显示结果?或者是临时写一个页面,测试完成后把它丢掉?   你可以试一下我这个页面,虽然它很粗糙,但是测试正则表达式也足够了:))   一、说明: 1.      我的本意为交流技术.本人水平很菜.因此所贴出的代码中,会有不足之处. 2.      代码可任意修改.如果你觉得你修改过的代码比我
你平时如何测试正则表达式?直接写在大段的代码中,然后等待程序运行到那里,再用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>
相关文章
|
2月前
|
存储 JavaScript 前端开发
使用JavaScript构建动态交互式网页:从基础到实践
【10月更文挑战第12天】使用JavaScript构建动态交互式网页:从基础到实践
89 1
|
3月前
|
编解码 前端开发 JavaScript
javascript检测网页缩放演示代码
javascript检测网页缩放演示代码
|
3月前
|
Web App开发 JavaScript 前端开发
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
|
21天前
|
数据采集 Web App开发 iOS开发
如何使用 Python 语言的正则表达式进行网页数据的爬取?
使用 Python 进行网页数据爬取的步骤包括:1. 安装必要库(requests、re、bs4);2. 发送 HTTP 请求获取网页内容;3. 使用正则表达式提取数据;4. 数据清洗和处理;5. 循环遍历多个页面。通过这些步骤,可以高效地从网页中提取所需信息。
|
21天前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
|
22天前
|
JavaScript
js实现简洁实用的网页计算器功能源码
这是一款使用js实现简洁实用的网页计算器功能源码。可实现比较基本的加减乘除四则运算功能,界面简洁实用,是一款比较基本的js运算功能源码。该源码可兼容目前最新的各类主流浏览器。
24 2
|
2月前
|
存储 JavaScript 前端开发
【JavaScript】网页交互的灵魂舞者
本文介绍了 JavaScript 的三种引入方式(行内、内部、外部)和基础语法,包括变量、数据类型、运算符、数组、函数和对象等内容。同时,文章还详细讲解了 jQuery 的基本语法和常用方法,如 `text()`、`html()`、`val()`、`attr()` 和 `css()` 等,以及如何插入和删除元素。通过示例代码和图解,帮助读者更好地理解和应用这些知识。
19 1
【JavaScript】网页交互的灵魂舞者
|
2月前
|
JavaScript 前端开发 测试技术
精通Selenium:从基础到高级的网页自动化测试策略
【10月更文挑战第6天】随着Web应用变得越来越复杂,手动进行功能和兼容性测试变得既耗时又容易出错。自动化测试因此成为了现代软件开发不可或缺的一部分。Selenium是一个强大的工具集,它支持多种编程语言(包括Python),允许开发者编写脚本来模拟用户与Web页面的交互。本文将带领读者从Selenium的基础知识出发,逐步深入到高级的应用场景,通过丰富的代码示例来展示如何高效地进行网页自动化测试。
354 5
|
2月前
|
人工智能 监控 JavaScript
模拟依赖关系和 AI 是Vue.js测试的下一个前沿领域
模拟依赖关系和 AI 是Vue.js测试的下一个前沿领域
30 1
|
2月前
|
JavaScript 前端开发
电话号码正则表达式 代码 javascript+html,JS正则表达式判断11位手机号码
电话号码正则表达式 代码 javascript+html,JS正则表达式判断11位手机号码
115 1