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>

代码还有优化之处，欢迎小伙伴一起探讨学习，也欢迎大佬指导教学！

JS正则表达式匹配域名相关推荐

js正则表达式匹配span标签
1.js正则表达式匹配span标签 const spans = htmlStr.match(/<span (.*?)>(.*?)<\/span>/g) 2.js正则表达式–获取 ...
JS正则表达式匹配手机号
JS中常用正则表达式举例一 JS正则表达式匹配手机号大家好,有关正则表达式的基本知识在其它文章中已做了介绍: JS属性&方法详解下面一起来看看JS中利用正则表达式匹配字符串的常用例子: 手 ...
js正则表达式匹配字符串与优化过程
前言有时候需要实现对js源文件中的url字符串做拦截预处理,或者前端js语法高亮,或者需要对动态加载的关键源码做混淆保护,在某些步骤实现之前,有一个步骤是需要提炼出所有的合法字符串. 目标:检测源文 ...
Js读取Cookie中指定字段的值，Js中读取某个Cookie，Js中根据Cookie的key得到对应的value，Js正则表达式匹配指定的Cookie
Js中想要读取Cookie中指定字段的值,可以遍历Cookie根据指定Key提取Cookie,或者使用正则表达式匹配Cookie,代码如下: /*** @description: 遍历cookie得到 ...
js正则表达式匹配汉字
假期老师布置了一个大作业,需要用正则表达式匹配一下 uniocde编码的汉字,但是网上千篇一律都是 /[\u4e00-\u9fa5]/ ,结果当然没有通过老师的作业检查(当然问题不仅仅只有这一点). ...
js正则表达式-匹配空格/数字范围/网址/电话等常用表达式
1.项目需要匹配gh字符,要求gh前面有空格,后面有无空格都可以. 思路如下: \s : 表示 space ,空格 +: 一个或多个 ^: 开始,^\s,以空格开始 $: 结束,\s$,以空格结束 | ...
python正则表达式匹配网址中的域名_正则表达式匹配域名、网址、url
DNS规定,域名中的标号都由英文字母和数字组成,每一个标号不超过63个字符,也不区分大小写字母.标号中除连字符(-)外不能使用其他的标点符号.级别最低的域名写在最左边,而级别最高的域名写在最右边.由多 ...
js正则表达式匹配数字
普通的一位数字到几位数字的用/^\d{m,n}$/,如果固定死位数则只填m; 如果是特定数字范围的,比如0-64这种,先匹配一位的([0-9])或者(\d),然后匹配两位的10-59-----([1- ...
JavaScript 技术篇-js正则表达式匹配字符串左右两边是否包含空格
/(^\s)|(\s$)/ 这个是匹配左右两边的空格. 演示如下: /(^\s)/ 是匹配左侧的空格. 演示如下: 同理 /(\s$)/ 是匹配右边的空格. 只要包含空格是 /(\s)/. 还可以通过 ...
js正则表达式匹配纯中文或纯英文
(项目用到,记录一下) 匹配纯中文 ---------------------------------------------------------------------------------- ...

JS正则表达式匹配域名

JS中常用正则表达式举例二

JS正则表达式匹配域名

匹配域名

规定：

程序执行效果图：

代码

JS正则表达式匹配域名相关推荐

最新文章

热门文章