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

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

代码：

<!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>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>在线正则表达式测试</title>

</head>

<body>

<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>

</div>

</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 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>

<span class="add-on">正则表达式</span><input type="text" id="textPattern" placeholder="在此输入正则表达式" class="input-xlarge" ></input>

</div>

<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>

</div>

</form>

</div>

</div>

</ul>

</div>

</div>

$(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>

<h3>在线正则表达式测试</h3>

</div>

</div>

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>

在线测试工具：http://www.omegaxyz.com/onlinetools/regular_expression/

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

NLG文本评估任务或许并不需要真值或参考文本

大模型中的RepE表征工程

大模型也是一种优化器（LLM as Optimizer）

全栈开发与快速部署Demo

学术idea自动发现与生成

自回归语言模型（language model）Python实现

粉丝期待的三体电影宇宙（近四十部电影与电视剧集）

基于历史对比学习的时序知识图谱推理

泰拉瑞亚Terriaria快速部署Linux服务器

iPad生产力指南——编程

留下评论取消回复

相关文章

留下评论取消回复