JS正则表达式匹配域名

最新推荐文章于 2024-04-13 20:09:19 发布

劭兮劭兮

最新推荐文章于 2024-04-13 20:09:19 发布

阅读量6.9k

点赞数 1

分类专栏：笔记 JS注意事项文章标签：正则表达式 javascript

本文链接：https://blog.csdn.net/weixin_44694201/article/details/110728966

版权

笔记同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

JS注意事项

4 篇文章 0 订阅

订阅专栏

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>

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

劭兮劭兮

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JS正则表达式匹配域名

JS中常用正则表达式举例二JS正则表达式匹配域名大家好，有关正则表达式的基本知识在其它文章中已做了介绍：JS属性&方法详解下面一起来看看JS中利用正则表达式匹配字符串的常用例子：匹配域名首先，对于域名的匹配问题，我们可以列出符合条件的正则表达式在此过程中，出现了问题，不能兼容 -(短横杆) 连续出现和规定位数在 63 位以内的问题(在本例的基本规定中，没有说明不可以 -(短横杆) 开头或者结尾，注：本例规定不严谨，只是举个例子)：var pattern = /^[a-z0-9]
复制链接

扫一扫