Тестер регулярных выражений

@buxtom · Регистрация: 20.04.2015

Студворк — интернет-сервис помощи студентам

Решил попробовать написать тестер регулярных выражений по типу как на этом сайте, только на порядок проще. Но проблема в том, что никак не могу придумать логику...

Вот пока что сделал:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Название веб-страницы</title>
  <style>
    #regex { width: 400px; }
 
    #flag {
      width: 50px;
      letter-spacing: 2px;
    }
 
    #testString {
      resize: none;
      width: 480px;
    }
 
    .regCaption { text-align: center; }
  </style>
</head>
<body>
 
<table>
  <tr>
    <td class="regCaption">Регулярное выражение</td> <td class="regCaption">Флаги</td>
  </tr>
  <tr>
    <td><label>/ <input id="regex" type="text"> /</label></td> <td><label><input id="flag" type="text" placeholder="gmi"></label></td>
  </tr>
  <tr>
    <td>Строка для тестирования</td>
  </tr>
  <tr>
    <td colspan="2"><label><textarea id="testString" rows="3"></textarea></label></td>
  </tr>
</table>
 
</body>
</html>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script>
  var regex = document.getElementById('regex');       // Регулярное выражение
  var flags = document.getElementById('flag');        // Флаг
  var str = document.getElementById('testString'); // Проверяемая строка
 
  regex.oninput = function () {
 
  };
 
  str.oninput = function () {
 
  };
 
  flags.oninput = function () {
 
  };
</script>

Подскажите, как сделать, чтобы в результате в строке выделялись двумя разными цветами совпадения подстроки с шаблоном?
Не обязательно кодом, можно и своими словами логику написать.

@Emilien · 14.01.2016, 08:24

JavaScript
1
2
3
4
5
6
7
8
9
  function highlight() {
    var count = 0;
    var re = new RegExp(regex.value, flags.value);
    var s = str.value.replace(re, function () {
              var n = (++count % 2) ? '' : '_2';
              return "<span class="m0" + n + "">" + arguments[0] + "</span>";
            });
    document.getElementById('colorString').innerHTML = s;
  }

Кликните здесь для просмотра всего текста

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Название веб-страницы</title>
  <style>
    #regex { width: 400px; }
 
    #flag {
      width: 50px;
      letter-spacing: 2px;
    }
 
    #testString, #colorString {
      resize: none;
      width: 480px;
    }
 
    .regCaption { text-align: center; }
    
    .m0 { background-color: #C4E3FF; }
    .m0_2 { background-color: #74C4FF; }
  </style>
</head>
<body>
 
<table>
  <tr>
    <td class="regCaption">Регулярное выражение</td> <td class="regCaption">Флаги</td>
  </tr>
  <tr>
    <td><label>/ <input id="regex" type="text"> /</label></td> <td><label><input id="flag" type="text" placeholder="gmi" pattern="(?!.*(.).*\1)[gmi]*" ></label></td>
  </tr>
  <tr>
    <td>Строка для тестирования</td>
  </tr>
  <tr>
    <td colspan="2"><label><textarea id="testString" rows="3"></textarea></label></td>
  </tr>
  <tr>
    <td colspan="2"><label><pre id="colorString" rows="3"></pre></label></td>
  </tr>
 
</table>
 
<script>
  var regex = document.getElementById('regex');       // Регулярное выражение
  var flags = document.getElementById('flag');        // Флаг
  var str = document.getElementById('testString'); // Проверяемая строка
 
  regex.oninput = function () {
    highlight();
  };
 
  str.oninput = function () {
    highlight();
  };
 
  flags.oninput = function () {
    highlight();
  };
 
  function highlight() {
    var count = 0;
    var re = new RegExp(regex.value, flags.value);
    var s = str.value.replace(re, function () {
              var n = (++count % 2) ? '' : '_2';
              return "<span class=\"m0" + n + "\">" + arguments[0] + "</span>";
            });
    document.getElementById('colorString').innerHTML = s;
  }
</script>
</body>
</html>

Новые блоги и статьи Все статьи Все блоги /
Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .	Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .	SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .
SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .	Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .	Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .	SDL3 для Web (WebAssembly): Сборка библиотек: SDL3, Box2D, FreeType, SDL3_ttf, SDL3_mixer и SDL3_image из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .