當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

JS正则表达式匹配域名

發布時間：2023/12/16 javascript 21 豆豆

生活随笔收集整理的這篇文章主要介紹了 JS正则表达式匹配域名小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

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>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正则表达式匹配域名的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：《自己动手写cpu》读书笔记
下一篇： S32K--输入捕获（FTM_IC）配置