自制正則表示式測試工具
阿新 • • 發佈：2020-08-16
按照國際慣例先放效果圖
直接上程式碼：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <title>正則表示式測試工具</title> <style> dl, dd { padding: 0; margin: 0; } .cf { zoom: 1; } .cf:after { display: block; clear: both; content: ""; } .wrap { width: 1000px; margin: 100px auto; } .title { color: #777; font-size: 24px; text-align: center; } #regexp { float: left; width: 650px; font-size: 14px; } #regexp .textbox{ width: 638px; height: 150px; border: 1px solid #ccc; border-radius: 5px; padding: 5px; resize: none; } #regexp .readonly { background-color: #eee; } #regexp .textfield { width: 215px; padding: 5px; border: 1px solid #ccc; } #reglist { float: right; width: 320px; border: 1px solid #ccc; border-radius: 5px; background-color: #f5f5f5; padding: 20px 0; } #reglist dt { margin-bottom: 10px; text-indent: 20px; color: #999; font-size: 18px; font-weight: bold; } #reglist dd { height: 40px; line-height: 40px; text-indent: 20px; } #reglist a { display: block; color: #08c; text-decoration: none; } #reglist a:hover { color: #005580; background-color: #eee; } </style> </head> <body> <div class="wrap cf"> <h1 class="title">正則表示式測試工具</h1> <div id="regexp"> <textarea id="userText" class="textbox" placeholder="在此輸入待匹配的文字"></textarea> <p> 正則表示式：<input type="text" id="userRegExp" class="textfield" placeholder="在此輸入正則表示式" /> <input type="checkbox" name="userModifier" value="i" />忽略大小寫 <input type="checkbox" name="userModifier" value="g" />全域性匹配 <input type="checkbox" name="userModifier" value="m" />多行匹配 <input type="button" id="matchingBtn" value="測試匹配" /> </p> 匹配結果： <div id="matchingResult" class="textbox readonly"></div> <p> 替換文字：<input type="text" id="userReplaceText" class="textfield" placeholder="在此輸入替換文字" /> <input type="button" id="replaceBtn" value="替換" /> </p> 替換結果： <div id="replaceResult" class="textbox readonly"></div> </div> <dl id="reglist"> <dt>常用正則表示式</dt> <dd><a href="javascript:;" title="[\u4e00-\u9fa5]">匹配中文字元</a></dd> <dd><a href="javascript:;" title="[^\x00-\xff]">匹配雙位元組字元(包括漢字在內)</a></dd> <dd><a href="javascript:;" title="\n\s*\r">匹配空白行</a></dd> <dd><a href="javascript:;" title="[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?">匹配Email地址</a></dd> <dd><a href="javascript:;" title="[a-zA-z]+://[^\s]*">匹配網址URL</a></dd> <dd><a href="javascript:;" title="\d{3}-\d{8}|\d{4}-\{7,8}">匹配國內電話號碼</a></dd> <dd><a href="javascript:;" title="[1-9][0-9]{4,}">匹配騰訊QQ號</a></dd> <dd><a href="javascript:;" title="[1-9]\d{5}(?!\d)">匹配中國郵政編碼</a></dd> <dd><a href="javascript:;" title="^(\d{6})(\d{4})(\d{2})(\d{2})(\d{3})([0-9]|X)$">匹配18位身份證號</a></dd> <dd><a href="javascript:;" title="([0-9]{3}[1-9]|[0-9]{2}[1-9][0-9]{1}|[0-9]{1}[1-9][0-9]{2}|[1-9][0-9]{3})-(((0[13578]|1[02])-(0[1-9]|[12][0-9]|3[01]))|((0[469]|11)-(0[1-9]|[12][0-9]|30))|(02-(0[1-9]|[1][0-9]|2[0-8])))">匹配(年-月-日)格式日期</a></dd> <dd><a href="javascript:;" title="^[1-9]\d*$">匹配正整數</a></dd> <dd><a href="javascript:;" title="^-[1-9]\d*$">匹配負整數</a></dd> <dd><a href="javascript:;" title="^-?[1-9]\d*$">匹配整數</a></dd> <dd><a href="javascript:;" title="^[1-9]\d*|0$">匹配非負整數（正整數 + 0）</a></dd> <dd><a href="javascript:;" title="^-[1-9]\d*|0$">匹配非正整數（負整數 + 0）</a></dd> <dd><a href="javascript:;" title="^[1-9]\d*\.\d*|0\.\d*[1-9]\d*$">匹配正浮點數</a></dd> <dd><a href="javascript:;" title="^-[1-9]\d*\.\d*|-0\.\d*[1-9]\d*$">匹配負浮點數</a></dd> </dl> </div> <p style="text-align: center;">本程式由<strong style="color: blue;">xxx</strong>製作，歡迎大家使用！</p> <script> var userText = document.getElementById('userText'), userRegExp = document.getElementById('userRegExp'), userModifier = document.getElementsByName('userModifier'), matchingBtn = document.getElementById('matchingBtn'), matchingResult = document.getElementById('matchingResult'), userReplaceText = document.getElementById('userReplaceText'), replaceBtn = document.getElementById('replaceBtn'), replaceResult = document.getElementById('replaceResult'), reglists = document.getElementById('reglist').getElementsByTagName('a'); var pattern, modifier = ''; for (var i = 0; i < userModifier.length; i++) { userModifier[i].onclick = function () { modifier = ''; for (var j = 0; j < userModifier.length; j++) { if (userModifier[j].checked) { modifier += userModifier[j].value; } } } } matchingBtn.onclick = function () { if (!userText.value) { alert('請輸入待匹配的文字！'); userText.focus(); return; } if (!userRegExp.value) { alert('請輸入正則表示式！'); userRegExp.focus(); return; } pattern = new RegExp('(' + userRegExp.value + ')', modifier); matchingResult.innerHTML = pattern.exec(userText.value) ? userText.value.replace(pattern, '<span style="background-color: yellow;">$1</span>') : '(沒有匹配)'; } replaceBtn.onclick = function () { if (!userText.value) { alert('請輸入待匹配的文字！'); userText.focus(); return; } if (!userRegExp.value) { alert('請輸入正則表示式！'); userRegExp.focus(); return; } if (!userReplaceText.value) { alert('請輸入要替換成的文字！'); userReplaceText.focus(); return; } pattern = new RegExp('(' + userRegExp.value + ')', modifier); replaceResult.innerHTML = userText.value.replace(pattern, '<span style="color: red;">' + userReplaceText.value + '</span>'); } for (var i = 0; i < reglists.length; i++) { reglists[i].onclick = function () { userRegExp.value = this.title; }; } </script> </body> </html>