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

最新推荐文章于 2022-10-19 11:14:37 发布

Reacubeth

最新推荐文章于 2022-10-19 11:14:37 发布

阅读量763

点赞数

分类专栏： javascript html web css 徐奕的专栏文章标签： html 正则表达式 javascript

本文链接：https://blog.csdn.net/xyisv/article/details/78760209

版权

徐奕的专栏同时被 3 个专栏收录

228 篇文章 36 订阅

订阅专栏

web

15 篇文章 3 订阅

订阅专栏

javascript

7 篇文章 1 订阅

订阅专栏

正则表达式，又称规则表达式。（英语：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寻找正则表达式

Reacubeth

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Html与JS正则表达式测试代码

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

扫一扫