JS中常用正则表达式举例二
JS正则表达式匹配域名
大家好,有关正则表达式的基本知识在其它文章中已做了介绍:
JS属性&方法详解
下面一起来看看JS中利用正则表达式匹配字符串的常用例子:
匹配域名
首先,对于域名的匹配问题,我们可以列出符合条件的正则表达式
在此过程中,出现了问题,不能兼容 -(短横杆) 连续出现 和 规定位数在 63 位以内的问题(在本例的基本规定中,没有说明不可以 -(短横杆) 开头或者结尾,注:本例规定不严谨,只是举个例子):
var pattern = /^[a-z0-9]+(\-[a-z0-9]+)*$/i;
emmmmm,上边的正则表达式还是错误的,我们可以从反面考虑问题,如果把错误的情况取反,不就成功了吗?
规定:
(关于域名的匹配问题,在此处只做了基础规定,实际上涉及到了域名背后的很多问题,很抱歉,目前小白能力有限,不能做深入了解)
- 域名不能超过63位;
- 域名中的字母只能为字母(a-z)、数字(0-9)、-(短横杆);
- -(短横杆)不能连着出现两次;
看到了规定,我们开始“反其道而行之”,考虑错误情况: - 域名超过63位:^.{64,}$ ;
- 含有除a-z、0-9、- 以外的字符: [^a-z0-9-] ;
- -(短横杆)连着出现两次或多次:-{2,};
但凡出现上述任意一种情况,均为错误的域名
var pattern = /^.{64,}$|[^a-z0-9\-]|\-{2,}/;
对于上述正则表达式,我们要学会:很多时候,正则表达式可以从反面考虑问题。
程序执行效果图:
(为了让效果对比明显,特意设置了三个输入文本框,进行对比)
代码
(小细节均在代码注释中列出,如果不合适的地方,还请指导)
欢迎有兴趣的小伙伴可以一起探讨啊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>域名匹配</title>
<style>
.default {
border: 3px solid #a5a3a3a1;
}
.success {
border: 3px solid #06fd3b;
}
.failure {
border: 3px solid #fd3e04;
}
</style>
</head>
<body>
<!-- 为了对比效果明显,设置了三个文本输入框 -->
<label for="domainName">域名:</label>
<input type="text" name="domainName" id="domainName" class="domainName default">
<br/><br/>
<label for="domainName">域名:</label>
<input type="text" name="domainName" id="domainName" class="domainName default">
<br/><br/>
<label for="domainName">域名:</label>
<input type="text" name="domainName" id="domainName" class="domainName default">
<!-- script语句 -->
<script>
var domainNames = document.querySelectorAll(".domainName");
domainNames.forEach(function(domainName) {
domainName.addEventListener("keyup", function(e) {
// 正则表达式的定义两种方式:
// var pattern = /^[a-z0-9]+(\-[a-z0-9]+)*$/i;
// 从反面考虑问题,出现任意一种不匹配的情况就出错
var pattern = /^.{64,}$|[^a-z0-9\-]|\-{2,}/;
// var pattern = new RegExp("/^.{64,}$|[^a-z0-9\-]|\-{2,}/");
// 获取input输入框所输入的值
var domainName = e.target.value;
// 将规定的pattern与input输入框中所输入的值进行匹配
if (!pattern.test(domainName)) {
// 匹配成功,添加success样式,移去failure样式
if (!e.target.classList.contains("success")) {
e.target.classList.add("success");
}
if (e.target.classList.contains("failure")) {
e.target.classList.remove("failure");
}
} else {
// 匹配不成功,添加failure样式,移去success样式
if (!e.target.classList.contains("failure")) {
e.target.classList.add("failure");
}
if (e.target.classList.contains("success")) {
e.target.classList.remove("success");
}
}
});
});
</script>
</body>
</html>
代码还有优化之处,欢迎小伙伴一起探讨学习,也欢迎大佬指导教学!