自製正則表達式測試工具

来源:https://www.cnblogs.com/chenyingying0/archive/2020/01/04/12148940.html
-Advertisement-
Play Games

按照國際慣例先放效果圖 直接上代碼: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <title>正則表達式測試工具</title> <style> dl, dd { padding: 0; margin: 0 ...


按照國際慣例先放效果圖

直接上代碼:

<!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>

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 一、數組 1、function(value, index, array) {} 【格式:】 function (value, index, array) => { // value 指 數組當前遍歷的值, index 指 數組當前遍歷的下標, array 指 當前數組 // ... 自定義函數行為 ...
  • 所謂響應式佈局,就是頁面會根據當前運行的設備的大小自行進行調整,實現方案主要有以下三種: 1)隱藏 例如在 PC 端的一些友情鏈接或者不重要的內容在移動端可以選擇隱藏起來。 2)換行 在 PC 端顯示一行的內容,由於移動端設備寬度比較小,所以可以選擇顯示為幾行。 3)自適應空間 例如,左邊元素給定一 ...
  • 需要在伺服器上進行哈 jquery的ajax方法: // jquery請求 $.ajax({ url: "./server/slider.json", type: "post", dataType: "json", async: true, success: function(datas) { re ...
  • jquery文檔準備的三種寫法: $(document).ready(function() { }); $().ready(function() { }); $(function() { }); jquery選擇器 基本選擇器 $('*') / $('.div') / $('div') / $('# ...
  • 標簽對象-自定義屬性-傳值 1、給標簽對象添加自定義屬性 flag="tip" <Input flag="tip" onChange={event => this.handleChange(event)} /> 2、getAttribute 獲取自定義屬性 console.log(event.tar ...
  • react 報紅錯誤彙總 一、Uncaught TypeError: Cannot read property 'value' of undefined 未知類型錯:無法讀取未定義的屬性“value” 我的源碼: console.log(item.controlAttributeObj.placeh ...
  • 先曬圖 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Index</title> <link rel="stylesheet" href="css/style.css"> </head ...
  • Web前端和Java誰的薪資待遇高?關於這個問題,是很多網友都感興趣的,在各大論壇貼吧上也看到了不少類似的問題。 現在的互聯網行業飛速發展,因此有很多小伙伴想要進入IT行業分一杯羹,但是關於學習什麼技術還有不少的小伙伴在猶豫中。今天就和大家一塊看一下Web前端和Java開發誰的薪資待遇高?Web前端 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...