前言
正则表达式测试工具可供您输入正则表达式和测试文本,立即查看匹配结果.
下面是离线的HTML文件,同样可以提供相同的服务.
目录
使用说明
HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
h2 {
color: #333;
margin-bottom: 20px;
}
label {
display: block;
margin-top: 10px;
font-weight: bold;
}
input[type="text"],
textarea {
padding: 5px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 14px;
}
input[type="checkbox"] {
margin-top: 10px;
}
button {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
button:hover {
background-color: #45a049;
}
#regex {
width: 1000px;
height: 80px;
border: 1px solid #ccc;
border-radius: 5px;
padding: 5px;
font-size: 14px;
resize: none;
}
#testString {
width: 1000px;
height: 180px;
white-space: pre-wrap;
border: 1px solid #ccc;
border-radius: 5px;
padding: 5px;
font-size: 14px;
resize: none;
}
#matchResult {
width: 1000px;
height: 180px;
white-space: pre-wrap;
border: 1px solid #ccc;
border-radius: 5px;
padding: 5px;
font-size: 14px;
resize: none;
}
</style>
</head>
<body>
<h2>正则表达式测试工具</h2>
<label for="testString">测试字符串:</label><br>
<textarea id="testString"></textarea><br>
<label for="regex">正则表达式:</label><br>
<input type="text" id="regex"><br>
<input type="checkbox" id="globalSearch"> 全局搜索
<input type="checkbox" id="ignoreCase"> 忽略大小写
<button onclick="testRegex()">测试</button>
<label for="matchResult">匹配结果:</label><br>
<textarea id="matchResult"></textarea>
<script>
function testRegex() {
var regex = document.getElementById("regex").value;
var testString = document.getElementById("testString").value;
var globalSearch = document.getElementById("globalSearch").checked;
var ignoreCase = document.getElementById("ignoreCase").checked;
try {
var regexOptions = '';
if (globalSearch) {
regexOptions += 'g';
}
if (ignoreCase) {
regexOptions += 'i';
}
var regexObj = new RegExp(regex, regexOptions);
var matches = testString.match(regexObj);
if (matches) {
var result = "匹配成功:\n" + matches.length + "个匹配结果\n";
for (var i = 0; i < matches.length; i++) {
result += matches[i] + "\n";
}
document.getElementById("matchResult").value = result;
} else {
document.getElementById("matchResult").value = "匹配失败";
}
} catch (e) {
document.getElementById("matchResult").value = "正则表达式错误: " + e.message;
}
}
</script>
</body>
</html>
正则表达式的编写经验和方法
总结
编写正则表达式,有常见的模式,可以直接参考我发的其它文章,介绍了几种经常用到的正则表达式.除此之外,借助这个测试工具,快速验证正则表达式的正确性.