Apq
/
FeHelper
-ын хуулбар https://github.com/zxlie/FeHelper.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142
							<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>正则表达式工具 - FeHelper</title>
        <link rel="stylesheet" href="index.css">
        <script type="text/javascript" src="../static/vendor/jquery/jquery-3.3.1.min.js"></script>
        <script type="text/javascript" src="../static/vendor/evalCore.min.js"></script>
    </head>
    <body>
        <div class="panel panel-default" style="margin-bottom: 0px;">
            <div class="panel-heading">
                <h3 class="panel-title">
                    <a href="https://fehelper.com" target="_blank" class="x-a-high">
                        <img src="../static/img/fe-16.png" alt="fehelper"/> FeHelper</a>：正则表达式工具
                        <a class="x-other-tools" id="btnOtherTools"><i class="icon-plus-circle"></i> 探索更多实用工具 <span class="tool-market-badge">工具市场</span></a>
                        <span class="x-donate-link" id="donateLink"><a href="#" id="donateLink"><i class="nav-icon">❤</i>&nbsp;打赏鼓励</a></span>
                </h3>
            </div>
        </div>

        <main class="container">
            <!-- Tab 切换区域 -->
            <div class="tab-container">
                <div class="tab-header">
                    <button class="tab-btn active" data-tab="new-version">新版 - 正则速查</button>
                    <button class="tab-btn" data-tab="old-version">旧版 - 正则测试</button>
                </div>
                
                <!-- 新版内容 -->
                <div class="tab-content active" id="new-version">
                    <!-- 正则可视化调试区域 -->
                    <section class="regex-visual-debugger">
                        <h2>正则表达式可视化调试</h2>
                        <div class="visual-debugger-form">
                            <select id="visualRegexPreset">
                                <option value="">自定义/选择常用正则</option>
                                <!-- 动态插入所有内置正则 -->
                            </select>
                            <input type="text" id="visualRegex" placeholder="请输入正则表达式，如：^\\d{3}-\\d{8}$" />
                            <div class="visual-flags-group">
                                <label class="flag-btn" title="g：全局匹配（查找所有匹配项）">
                                    <input type="checkbox" value="g" /> g
                                </label>
                                <label class="flag-btn" title="i：忽略大小写">
                                    <input type="checkbox" value="i" /> i
                                </label>
                                <label class="flag-btn" title="m：多行模式（^$作用于每行）">
                                    <input type="checkbox" value="m" /> m
                                </label>
                                <span class="flag-desc">常用标志：g=全局 i=忽略大小写 m=多行</span>
                            </div>
                            <input type="text" id="visualFlags" placeholder="标志（可选，如：gim）" maxlength="5" style="display:none;" />
                        </div>
                        <textarea id="visualTestText" rows="4" placeholder="请输入要测试的文本"></textarea>
                        <div class="visual-debugger-actions">
                            <button id="visualTestBtn">测试匹配</button>
                            <span id="visualErrorMsg" class="visual-error-msg"></span>
                        </div>
                        <div id="visualResult" class="visual-result"></div>
                    </section>
                    
                    <div class="search-container">
                        <div class="search-box">
                            <input type="text" id="regexSearch" placeholder="输入关键词，搜索正则表达式..." />
                            <span class="search-icon">🔍</span>
                        </div>
                    </div>
                    
                    <div id="regexCategoryContainer"></div>
                </div>

                <!-- 旧版内容 -->
                <div class="tab-content" id="old-version">
                    <div class="wrapper" id="pageContainer">
                        <div class="panel-body mod-regexp">
                            <div class="ui-po-r ui-mb-20">
                                <h3 class="panel-subtitle">正则表达式</h3>
                                <span class="pannel-select reg-list">
                                    <select class="form-control reglist_select" id="regList">
                                        <option value="">-- 常用正则表达式 --</option>
                                    </select>
                                </span>
                            </div>
                            <textarea class="reg_reg_input form-control" id="regText" placeholder="输入正则表达式，如：/[0-9A-Z].*?/igm" rows="1" tabindex="10"></textarea>
                            <a class="reg_link" href="https://chrome.fehelper.com/blog/detail.html?id=eb10deb92f2c05ca32cf" target="_blank" tabindex="30">Javascript正则表达式语法</a>

                            <div id="src" class="ui-mt-20">
                                <h3 class="panel-subtitle">文本内容</h3>
                                <div id="srcWrapper">
                                    <pre class="reg_pre" id="srcBackground"></pre>
                                    <textarea class="reg_textarea" id="srcCode" placeholder="输入待匹配的文本" contenteditable="true"></textarea>
                                </div>
                            </div>
                            <div id="rst" class="">
                                <h3 class="panel-subtitle">匹配结果&nbsp;&nbsp;<span id="rstCount"></span></h3>
                                <div id="rstCode"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>

        <!-- 模态框 -->
        <div class="modal" id="regexModal">
            <div class="modal-content">
                <span class="close">&times;</span>
                <h2 id="modalTitle"></h2>
                <div class="regex-versions">
                    <div class="version">
                        <h3>JavaScript</h3>
                        <pre><code id="jsRegex"></code></pre>
                        <button class="copy-btn" data-target="jsRegex">复制</button>
                    </div>
                    <div class="version">
                        <h3>Python</h3>
                        <pre><code id="pythonRegex"></code></pre>
                        <button class="copy-btn" data-target="pythonRegex">复制</button>
                    </div>
                    <div class="version">
                        <h3>PHP</h3>
                        <pre><code id="phpRegex"></code></pre>
                        <button class="copy-btn" data-target="phpRegex">复制</button>
                    </div>
                    <div class="version">
                        <h3>Java</h3>
                        <pre><code id="javaRegex"></code></pre>
                        <button class="copy-btn" data-target="javaRegex">复制</button>
                    </div>
                </div>
                <div class="regex-description">
                    <h3>说明</h3>
                    <p id="regexDescription"></p>
                </div>
            </div>
        </div>

        <script src="index.js"></script>
    </body>
</html>