生活随笔
收集整理的這篇文章主要介紹了
JS正则表达式匹配域名
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
JS中常用正則表達(dá)式舉例二
JS正則表達(dá)式匹配域名
大家好，有關(guān)正則表達(dá)式的基本知識(shí)在其它文章中已做了介紹：
JS屬性&方法詳解
下面一起來看看JS中利用正則表達(dá)式匹配字符串的常用例子：
匹配域名
首先，對(duì)于域名的匹配問題，我們可以列出符合條件的正則表達(dá)式
在此過程中，出現(xiàn)了問題，不能兼容 -(短橫桿) 連續(xù)出現(xiàn) 和 規(guī)定位數(shù)在 63 位以內(nèi)的問題(在本例的基本規(guī)定中，沒有說明不可以 -(短橫桿) 開頭或者結(jié)尾，注：本例規(guī)定不嚴(yán)謹(jǐn)，只是舉個(gè)例子)：
var pattern = /^[a-z0-9]+(\-[a-z0-9]+)*$/i;
emmmmm，上邊的正則表達(dá)式還是錯(cuò)誤的，我們可以從反面考慮問題，如果把錯(cuò)誤的情況取反，不就成功了嗎？
規(guī)定：
（關(guān)于域名的匹配問題，在此處只做了基礎(chǔ)規(guī)定，實(shí)際上涉及到了域名背后的很多問題，很抱歉，目前小白能力有限，不能做深入了解）
- 域名不能超過63位；
- 域名中的字母只能為字母(a-z)、數(shù)字(0-9)、-(短橫桿）；
- -(短橫桿）不能連著出現(xiàn)兩次；
看到了規(guī)定，我們開始“反其道而行之”，考慮錯(cuò)誤情況： - 域名超過63位：^.{64,}$ ；
- 含有除a-z、0-9、- 以外的字符： [^a-z0-9-] ；
- -(短橫桿）連著出現(xiàn)兩次或多次：-{2,}；
但凡出現(xiàn)上述任意一種情況，均為錯(cuò)誤的域名
var pattern = /^.{64,}$|[^a-z0-9\-]|\-{2,}/;
對(duì)于上述正則表達(dá)式，我們要學(xué)會(huì)：很多時(shí)候，正則表達(dá)式可以從反面考慮問題。
程序執(zhí)行效果圖：
（為了讓效果對(duì)比明顯，特意設(shè)置了三個(gè)輸入文本框，進(jìn)行對(duì)比）
代碼
(小細(xì)節(jié)均在代碼注釋中列出，如果不合適的地方，還請(qǐng)指導(dǎo))
歡迎有興趣的小伙伴可以一起探討啊
<!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 = /^.{64,}$|[^a-z0-9\-]|\-{2,}/;var domainName = e.target.value;if (!pattern.test(domainName)) {if (!e.target.classList.contains("success")) {e.target.classList.add("success");}if (e.target.classList.contains("failure")) {e.target.classList.remove("failure");}} else {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>
代碼還有優(yōu)化之處，歡迎小伙伴一起探討學(xué)習(xí)，也歡迎大佬指導(dǎo)教學(xué)！
總結(jié)
以上是生活随笔為你收集整理的JS正则表达式匹配域名的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
