正则表达式——贪婪模式与懒惰模式

知识点：正则表达式中表示字符串重复个数的元字符，如 ?,+,*,{} 默认贪婪模式匹配最大长度匹配字符串。在元字符后加个?即可切换为懒惰模式

前言

之前做过一个短信模版的配置功能，需要用到正则判断完成预览方法，踩了个小坑。

<!-- 部分代码 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function () {
	createContentPreview()
});


function createContentPreview(){
        //遍历获取所有input标签值
	var vals=[];
	$("#tExaDiv").find("input").each(function(){
		var val=$(this).val();
		vals.push(val);
	})
	
        // 含有<input type=".." />标签
	var html=$("#tExaDiv").html();

        //遍历替换
	var reg=/<input[^]*?>/;
	for(var i=0;i<vals.length;i++){
		html=html.replace(reg,vals[i]);
	}

        //渲染
	$("#contentPreview").html(html);
}
</script>
</head>

<body>
<div id="tExaDiv">
	如果我是<input ="text" value="dj"/>,你会<input ="text" value="爱"/>我吗？
</div>

<div id="contentPreview"></div>
</body>
</html>

contentPreview内容：如果我是dj,你会爱我吗？
如果未加?，则是贪婪模式。contentPreview显示错误内容：如果我是dj我吗？

懒惰模式

对字符串进行最小长度匹配

字符串：32112
正则表达式：.*?
匹配结果：

共找到 2 处匹配：  
	<span>321</span> 
	<span>12</span>

贪婪模式

对字符串进行最大长度匹配

字符串：32112
正则表达式：.*
匹配结果：

共找到 1 处匹配：
<span>321</span><span>12</span>

常见元字符及其含义

符号               含义
————————————————————————————————————————————————————
.                  匹配除换行符之外的任意字符
^                  匹配字符的开始位置
$                  匹配字符的结束位置
*                  匹配0次，1次或多次前面的原子
?                  匹配0次或1次前面的原子
+                  匹配1次或多次前面的原子
{n}                前面的原子恰好出现n次
{n,}               前面的原子至少出现n次
{n,m}              前面的原子至少出现n次，至多出现m次
|                  模式选择符
()                 模式单元符