Html与JS正则表达式测试代码

正则表达式，又称规则表达式。（英语：Regular Expression，在代码中常简写为regex、regexp或RE），计算机科学的一个概念。正则表通常被用来检索、替换那些符合某个模式(规则)的文本。
许多程序设计语言都支持利用正则表达式进行字符串操作。例如，在Perl中就内建了一个功能强大的正则表达式引擎。正则表达式这个概念最初是由Unix中的工具软件（例如sed和grep）普及开的。正则表达式通常缩写成“regex”，单数有regexp、regex，复数有regexps、regexes、regexen。
代码：
更多内容访问omegaxyz.com

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<head>
<title>在线正则表达式测试</title>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<meta http-equiv="Content-Language" content="zh-CN" />
<meta name="keywords" content="omegaxyz.com"/>
<meta name="description" content="omegaxyz.com" />
<link rel="shortcut icon" href="/img/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="/css/basic.css?20120912" type="text/css"/>
<script type="text/javascript" src='/js/jquery/jquery-1.7.2.js'></script>
<script type="text/javascript" src='/js/jquery/jquery.cookies.2.2.0.min.js'></script>
<link rel="stylesheet" href='/js/bootstrap/css/bootstrap.min.css'/>
<script src='/js/bootstrap/js/bootstrap.min.js'></script></head>
<body><!--     头部header开始    -->
<div id="header"><div class="wrapper"><div id="mainSearch"><!-- Put the following javascript before the closing </head> tag. -->
<style>
.go_search {width: 300px;}
.go_search .gsc-input td,.go_search .gsc-input tddiv {padding:0 0 0 0;margin:0 0 0 0;height:23px;}
.go_search .gsc-input input:focus{
border:none;}
.go_search .gsc-input input {border:none;height:23px;width: 100%;padding: 0px;border: none;margin: 0px;height: auto;outline: none;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;background-image: url(../img/google_custom_search_watermark.gif?20140625);background-color: rgb(255, 255, 255);background-position: 0% 50%;background-repeat: no-repeat no-repeat;
}
</style><div class="go_search">
<!-- Place this tag where you want the search box to render -->
</div></div><div id="logo" class="texthidden" onclick="javascript:location.href='/'"></div></div>
</div>
<!--     头部header结束    --><div class="wrapper"><script type="text/javascript" src="/js/ad/tag.js?date=20140625"></script></div><style>
.topBar{margin:10px 0 10px 0;}
.bottomBar{margin:10px 0 10px 0;}
#mainContent textarea{width:650px;height:150px;}
#mainContent ul{margin-top:10px;}
#right_area li{height:40px;font-size:13pt;}
</style>
<div id="mainContent" class="wrapper clearfix"><div class="toolName">在线正则表达式测试<a data-toggle="modal" href="#advice" style="float:right;text-decoration:none;"><span class="badge badge-important"><i class="icon-envelope icon-white"></i></span></a></div><div class="row-fluid"><div class="span8"><div class="topBar"><textarea id="textSour" placeholder="在此输入待匹配文本"></textarea></div><div class="operateTB"><form class="well form-inline"><div class="input-prepend"><span class="add-on">正则表达式</span><input type="text" id="textPattern" placeholder="在此输入正则表达式" class="input-xlarge" ></input></div><label class="checkbox"><input type="checkbox" value="global" checked="checked" id="optionGlobal" name="optionGlobl"/>全局搜索</label><label class="checkbox"><input type="checkbox" value="ignoreCase" id="optionIgnoreCase" name="optionIgnoreCase"/>忽略大小写</label><a onclick="return onMatch();" class="btn btn-primary"><i class="icon-chevron-down icon-white"></i><font size="5">点击此处测试匹配</font></a></form></div><div class="bottomBar"><div class="title">匹配结果：</div><textarea readonly="readonly" id="textMatchResult"></textarea></div><div class="operateTB"><form class="well form-inline"><div class="input-prepend"><span class="add-on">替换文本</span><input type="text" id="textReplace" class="input-xlarge" placeholder="在此输入替换文本"></input></div><a onclick="return onReplace()" class="btn btn-primary"><i class="icon-chevron-down icon-white"></i><font size="5">替换</font></a></form></div><div class="bottomBar"><div class="title">替换结果：</div><textarea readonly="readonly" id="textReplaceResult"></textarea><br/></div></div><div class="span4" id="right_area"><ul class="nav nav-list well"></ul></div></div>
</div> <!-- /container -->
<script language="javascript">
$(document).ready(function (){$("#right_area li a").click(function (){$("#textPattern").val($(this).attr("title"));onMatch();});});function setVisible(idElement, visible) {var obj = document.getElementById(idElement);obj.style.visibility = visible ? "visible" : "hidden";
}
function isValidFields() {var textSour = document.getElementById("textSour");if (null==textSour.value || textSour.value.length<1) {textSour.focus();alert("请输入待匹配文本");return false;}var textPattern = document.getElementById("textPattern");if (null==textPattern.value || textPattern.value.length<1) {textPattern.focus();alert("请输入正则表达式");return false;}return true;
}
function buildRegex() {var op = "";if (document.getElementById("optionGlobal").checked)op = "g";if (document.getElementById("optionIgnoreCase").checked)op = op + "i";return new RegExp(document.getElementById("textPattern").value, op);
}
function onMatch() {if (!isValidFields())return false;document.getElementById("textMatchResult").value = "";var regex = buildRegex();var result = document.getElementById("textSour").value.match(regex);if (null==result || 0==result.length) {document.getElementById("textMatchResult").value = "（没有匹配）";return false;}if (document.getElementById("optionGlobal").checked) {var strResult = "共找到 " + result.length + " 处匹配：\r\n";for (var i=0;i < result.length;++i)strResult = strResult + result[i] + "\r\n";document.getElementById("textMatchResult").value = strResult;}else {document.getElementById("textMatchResult").value= "匹配位置：" + regex.lastIndex + "\r\n匹配结果：" + result[0];}return true;
}
function onReplace() {var str = document.getElementById("textSour").value;var regex = buildRegex();document.getElementById("textReplaceResult").value= str.replace(regex, document.getElementById("textReplace").value);
}
function reset()
{$("#textSour").val("");$("#textPattern").val("");$("#textMatchResult").val("");$("#textReplace").val("");$("#textReplaceResult").val("");
}
</script><div class="modal hide fade" id="advice" style="display:none;"><div class="modal-header"><button type="button" class="close" data-dismiss="modal">×</button><h3>在线正则表达式测试</h3></div><div class="modal-footer"><a href="#" class="btn" data-dismiss="modal">取消</a><a href="#" class="btn btn-primary" id="advice_submit" disabled='disabled'>提交建议</a></div></div>
<script>
function verifyEmail(){if(null == $("#advice_email").val().match(/^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/)){$("#email_error").html(" email输入错误 ");$("#advice_email").focus();}else{$("#email_error").html("<i class='icon-ok'></i>");$("#advice_submit").removeAttr("disabled");}
}
$(document).ready(function (){$("#advice_submit").click(function (){$.post("/action/advice/add_advice",{ tool_name : $("#tool_name_f").val() , email: $("#advice_email").val(), content: $("#advice_content").val() ,verifyCode: $("#verifyCode").val()},function (result){var m=eval('(' + result + ')');if("ok"==m.msg){alert("谢谢您的建议，我们会参考您的建议使ostools变得更好！");$('#advice').modal('hide');$("#captcha_code").attr("src",'/action/jsbin/captcha?'+new Date().getTime());}else{alert(m.msg);}});});
});
</script>
</body>
</html>

实际测试请访问omegaxyz.com寻找正则表达式

Html与JS正则表达式测试代码相关推荐

前端Js WebSocket测试代码，连websocket.org
连接ws://echo.websocket.org/进行测试,代码如下: <script>function initWebSocket(wsUri) {var websocket = ne ...
手机号判断正则php2019,2019手机号码JS正则表达式验证实例代码
概念正则表达式是对字符串操作的一种逻辑公式,就是用事先定义好的一些特定字符.及这些特定字符的组合,组成一个"规则字符串",这个"规则字符串"用来表达对字符串的 ...
js深入了解——正则表达式测试工具demo
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
【正则表达式】regex101超好用的正则表达式测试和学习工具（内含使用教程、Python和C#正则表达式代码示例）
文章目录 1.使用介绍 2.正则表达式例子 2.1 Python例子 2.2 C#例子今天使用了正则表达式从文本中捕获目标数据,虽然之前有一定的基础,但是现在忘的差不多了,感觉自己纯手写的正则表达式 ...
2022手机号码JS正则表达式验证实例代码
这篇文章主要介绍了2022手机号码JS正则表达式验证实例代码,代码简单易懂,非常不错,具有一定的参考借鉴价值 ,需要的朋友可以参考下概念正则表达式是对字符串操作的一种逻辑公式,就是用事先定义好的 ...
js正则表达式的使用详解
本文转自:http://www.jb51.net/article/39623.htm 1定义正则表达式 2关于验证的三个这则表达式方法 3正则表达式式的转义字符 1定义正则表达式在js中定义正则表达式 ...
正则表达式测试工具、网页版
有时候为了测试正则表达式.临时自己写了这么一个.我对于JS也不懂.所以写的很差.. 代码:(我测试在IE8中是正常的.然而在我的FireFox中的.却无法使用.原因不明.这个我也不管了.反正就自己用用 ...
JS正则表达式大全(整理详细且实用)
JS正则表达式大全(整理详细且实用) 作者: 字体:[增加减小] 类型:转载时间:2013-11-14 我要评论 JS正则表达式大全(整理详细且实用).需要的朋友可以过来参考下,希望对大家有所帮助 ...
JS正则表达式大全【转】
正则表达式中的特殊字符字符含意 \ 做为转意,即通常在"\"后面的字符不按原来意义解释,如/b/匹配字符"b",当b前面加了反斜杆后/\b/,转意为匹配一个 ...
JS正则表达式-附身份证号码验证（简易版）
文章目录 JS正则表达式匹配与搜索一.方括号,圆括号二.修饰符三.元字符四.量词身份证号码验证(简易版) 身份证号码规则: 1.地址码 2.年份码 3.月份码 4.日期码 5.顺序码 6. ...

Html与JS正则表达式测试代码

Html与JS正则表达式测试代码相关推荐

最新文章

热门文章