日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔！

生活随笔

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

javascript

JS正则表达式匹配域名

發布時間：2023/12/16 javascript 24 豆豆
生活随笔 收集整理的這篇文章主要介紹了 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語句 --><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正则表达式匹配域名的全部內容，希望文章能夠幫你解決所遇到的問題。

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