Javascript正则表达式学习（一）-优快云博客

本文链接：https://blog.youkuaiyun.com/pandeng4639088/article/details/52151894

最近感觉对文本字符串处理这块学习的不够，虽然自己也断断续续学习了一些正则表达式的知识，但是没有系统地进行学习与梳理，实战当中没有归纳总结碰到的场景问题。经过几天的学习与实践，自己写出了一些常用的正则表达式。

学习的传送门：

正则表达式

JavaScript 正则表达式上——基本语法

然后自己写了一个简单的页面用于进行测试自己的正则是否正确的页面并将结果显示在页面上：

效果如图：

代码后面附上。

然后就是自我实践与练习：

数值测试（不允许前导0）：
（1）正整数，负整数：^[-]?[1-9][0-9]*$
（2）自然数：^(0|([1-9][0-9]*))$
（3）正小数，负小数：^(0|([-]?[1-9][0-9]*))([\.]\d+)?$ （允许0.0）
不允许小数部份带有后续的0：^(0|([-]?[1-9][0-9]*))([\.][0-9]*[1-9]+)?$ （不允许0.0）
（4）货币：^(0|([1-9][0-9]*))([\.]\d{1,2})?$

生活信息：
（1）邮箱：^\w+@\w+.\w+$
（2）电话：
（3）手机：^(\d{2,3}?)?[1-9]\d{10}$ 形式：(86或086[可选])13412341234

URL:
（1）域名识别：^\w+://[-a-z\.A-Z0-9]+([:]\d)?[\/]?
（2）URL识别：\w+://[-a-z\.A-Z0-9]+([:]\d)?([\/]\w+)*([\.]\w+)?[\?]?([^\n\r])* （模式：gi）
（3）切割URL:

HTML:
（1）识别标签：<[^/][a-zA-Z0-9]+([^>]*)>（gi)
（2）识别标签属性：(\b[a-z0-9A-Z_-]+=["']([^'"])*['"])(gi)
（3）分组标签：
（4）标签中识别URL，带参数：\w+://[-a-z\.A-Z0-9]+([:]\d)?([\/]\w+)*([\.]\w+)?[\?]?([^\n\'\"\r])*
（5）获取完整的标签及内容：<([a-z0-9]+)[^>]*>[\s\S]*</\1>

后面（gi)形式的，是指正则表达式所使用的模式。

以上就是自己练习的成果。至于分析的过程，暂时后面再补上吧。如果哪位朋友拿去使用，发现有问题的，请不吝赐教，在这里先谢谢了！

现附页面测试代码如下：（记得自己导入本地的jquery脚本文本）

<span style="font-size:14px;"><!DOCTYPE html>

<html>

<head>
<title></title>
<meta http-equiv="Content-type" content="text/html;charset=utf-8" />
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>

<style style="text/css">
	 .cDiv{ margin:10% auto; width:80%; max-width: 650px; box-shadow: 5px 5px 5px #ccc; padding:1em; border:1px solid #ccc;}
	 .cDiv>p{margin:1em auto; vertical-align: text-top;}
	 .cDiv>p>span{margin-right: 1.2em;}
	 #cText{ resize:none; padding:5px; width:80%; min-height: 120px;}0
	 #cReg{padding:5px; width:60%;}
	 #cRegM{padding:5px; width:10%;}
</style>


</head>
<body>

	<div class="cDiv">
		<p><span>内容</span><textarea id="cText"></textarea></p>
		<p>
			<span>正则</span><input type='text' id="cReg" />
			<span>模式</span>
			<input type='text' id='cRegM' />
		</p>
		<p>
            <input type="button" id='bTestBool' value='验证正则' />
			<input type="button" id="bTest" value='测试结果' />            
               
             显示结果模式：
             <input type='radio' name='textModel' value='text' checked />文本模式
             <input type='radio' name='textModel' value='html' />html模式
		</p>

		<div >
			<h3>测试结果：</h3>
			<hr />	
			<div id="rDiv"></div>
		</div>
	</div>



</body>

<script type="text/javascript">
    $(function(){
        $('#bTest').bind('click',function(){
        	var str = $('#cText').val();
        	var reg;
        	var modelStr = $('#cRegM').val();
        	if( undefined == modelStr || modelStr == '' )
        	{
        		reg = new RegExp( $('#cReg').val() );
        	}else
        	{
        		reg = new RegExp( $('#cReg').val(), modelStr  );
        	}

        	var result = str.match(reg);
        	$('#rDiv').text('');
        	
            var resultStr = '';
            var resutlModel = getTextModel();

        	for( var i=0; null!=result && i<result.length; i++ )
        	{
                if( resutlModel == 'html' )
                {
                    $('#rDiv').append( result[i] );
                    $('#rDiv').append( $('<br />') );
                }
                else{
                    resultStr += result[i]  + '       ---|| 分割符 ||---     ';
                }        		
        	}

            if( resutlModel == 'text' )
            {
              $('#rDiv').text( resultStr );
            }

        });

        $('#bTestBool').bind('click',function(){
        	var str = $('#cText').val();
        	var reg ;
        	var modelStr = $('#cRegM').val();
        	if( undefined == modelStr || modelStr == '' )
        	{
        		reg = new RegExp( $('#cReg').val() );
        	}else
        	{
        		reg = new RegExp( $('#cReg').val(), modelStr  );
        	}
            var rseultBool = reg.test(str);
            show('<span style="color:'+(rseultBool?'#0aa770':'#e40')+';">'+rseultBool+'</span>');
            
        });

        function show(str)
        {
            var showModel = getTextModel();

            if( showModel=='text'){
                 $('#rDiv').text( str );
            }

            if( showModel =='html'){
                $('#rDiv').text('');
                $('#rDiv').html( str );
            }
        }

        function getTextModel()
        {
            var checkboxArray = document.getElementsByName('textModel');
            for( var i=0; i<checkboxArray.length; i++)
            {
                if(checkboxArray[i].checked){
                    return checkboxArray[i].value;
                }
            }
        }
    });
</script>
</html></span>