/
PavelMask
/
TestRepo
Обзор
Документация
Войти
/
PavelMask
/
TestRepo
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
CI/CD
Аналитика
Безопасность
master
index.html
138 строк
6 KB
PavelMask
Test commit
07 июн 2026, 20:24
07 июн 2026, 20:24
25b5e61
Код
Авторство
О чём код?
<!DOCTYPE html> <head> <meta charset="utf-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="js/viz.js"></script> <script src="js/front.js"></script> <script src="js/animation.js"></script> <script src="js/back.js"></script> <link rel="stylesheet" type="text/css" href="main.css"> <link href='https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap' rel='stylesheet'> <title>RegEx Визуализатор</title> <meta name="description" content="Regex Visualizer"> </head> <body> <div id="info-rectangle"> <p><strong>Регулярное выражение</strong> – это последовательность символов, определяющая шаблон поиска.</p> <p>Регулярные выражения, поддерживаемые этим инструментом, могут содержать:</p> <ul> <li>Буквы <strong>латиницы</strong> и <strong>кириллицы</strong></li> <li>Звезду Клини (<strong>*</strong>) – ноль и более предыдущих токенов, знак плюс (<strong>+</strong>) – 1 и более предыдущих токенов</li> <li>Альтернативу (ИЛИ) <strong>|</strong> – выбор одного из двух выражений слева или справа от <strong>|</strong> </li> <li>Скобки <strong>()</strong> для группировки элементов</li> <li>Цифру <strong>0</strong> для обозначения пустой строки</li> <li>Конкатенация – запись двух выражений рядом без пробелов</li> </ul> </div> <div id="header"> <div id="help"> <button class="helpbutton">Инструкция</button> </div> <div id="previous_step"> <div id="stepl" class="step stepbutton"> <svg width="55px" height="80px" viewBox="0 0 55 80"> <path fill="none" stroke="#000000" stroke-width="4px" d="M 25 20 L 7 42 L 25 64" /> <path class="buttonPath" fill="none" stroke="#0f6966" stroke-width="4px" d="M 25 20 L 7 42 L 25 64" /> </svg> <div class="steptext"></div> </div> </div> <div id="inp"> <svg width="202px" height="42px" viewbox="0 0 202 42" id="validBorder"> <path class="greenPath" fill="none" stroke="#31eb37" stroke-width="2px" d="M 101 41 L 1 41 L 1 1 L 101 1" /> <path class="greenPath" fill="none" stroke="#31eb37" stroke-width="2px" d="M 101 41 L 201 41 L 201 1 L 101 1" /> </svg> <svg width="202px" height="42px" viewbox="0 0 202 42" id="invalidBorder"> <path class="redPath" fill="none" stroke="#e61515" stroke-width="2px" d="M 101 1 L 1 1 L 1 41 L 101 41" /> <path class="redPath" fill="none" stroke="#e61515" stroke-width="2px" d="M 101 1 L 201 1 L 201 41 L 101 41" /> </svg> <input id="regex" maxlength="256"></input> <div class="beginbuttons"> <div class="examplebutton">Сгенерировать автоматически</div> </div> <button disabled id="convert">Преобразовать</button> </div> <div id="next_step"> <div id="stepr" class="step stepbutton"> <div class="steptext"></div> <svg width="40px" height="80px" viewBox="0 0 40 80"> <path fill="none" stroke="#222233" stroke-width="4px" d="M 15 20 L 33 42 L 15 64" /> <path class="buttonPath" fill="none" stroke="#0f6966" stroke-width="4px" d="M 15 20 L 33 42 L 15 64" /> </svg> </div> <div id="stepmatch" class="step"> <div> Проверить строку на соответствие регулярному выражению: </div> <div> <input id="matchinput"></input> <button class="stepbutton" id="matchbutton">Проверить</button> </div> </div> </div> <div id="options"> <div id="options1"> <input checked id="options_check" type="checkbox"> Автоматические анимации </div> <div id="options2"> <button disabled id="options_button">Шаг анимации</button> </div> <div id="options3"> <button id="skip_button">Пропустить анимацию</button> </div> </div> </div> <p id="error_message"></p> <p id="step_message"></p> <div id="line"></div> <div id="FA"></div> <div class="helpmenu bigbox"> <div class="helpheader"> <div class="helpexit"> <svg viewBox="0 0 50 50" width="15px" height="15px"> <line x1="5" y1="5" x2="45" y2="45" stroke="#000000" stroke-width="3px" stroke-linecap="round"> </line> <line x1="5" y1="45" x2="45" y2="5" stroke="#000000" stroke-width="3px" stroke-linecap="round"> </line> </svg> </div> <div class="helptitle"> Информационная справка </div> </div> <div class="helpbody"> <div class="helpcontent"> <p><strong>Регулярное выражение</strong> – это последовательность символов, определяющая шаблон поиска. </p> <p>Регулярные выражения, поддерживаемые этим инструментом, могут содержать:</p> <ul> <li>Буквы (<strong>a-z</strong>, <strong>A-Z</strong>)</li> <li>Звезду Клини (<strong>*</strong>) – ноль и более предыдущих токенов, знак плюс (<strong>+</strong>) – 1 и более предыдущих токенов</li> <li>Альтернативу (ИЛИ) <strong>|</strong> – выбор одного из двух выражений слева или справа от <strong>|</strong> </li> <li>Скобки <strong>()</strong> для группировки элементов</li> <li>Цифру <strong>0</strong> для обозначения пустой строки</li> <li>Конкатенация – запись двух выражений рядом без пробелов</li> </ul> </div> </div> </div> </body> <script> </script>