← Назад к Apps

Regex tester

Проверка регулярных выражений с подсветкой совпадений в тексте, статистикой и готовыми примерами

▶ Запустить

👁 12

(function(root){

  root.style.fontFamily = "monospace";
  root.style.color = "#00ff9c";

  root.innerHTML = `
    <div style="max-width:800px; margin:0 auto;">
      
      <h2 style="margin-bottom:15px;">Regex Tester Pro</h2>

      <input id="regexInput" placeholder="Regex (пример: \\d+)" 
        style="width:100%; padding:10px; margin-bottom:8px; background:#0a0a0a; color:#fff; border:1px solid #00ff9c;">

      <input id="flagsInput" placeholder="Флаги (g, i, m)" 
        style="width:100%; padding:10px; margin-bottom:15px; background:#0a0a0a; color:#fff; border:1px solid #00ff9c;">

      <div style="margin-bottom:10px;">
        <button id="exampleBtn" style="padding:6px 10px; margin-right:5px;">Email</button>
        <button id="phoneBtn" style="padding:6px 10px; margin-right:5px;">Phone</button>
        <button id="clearBtn" style="padding:6px 10px;">Clear</button>
      </div>

      <textarea id="textInput" placeholder="Вставь текст..." 
        style="width:100%; height:140px; padding:10px; background:#0a0a0a; color:#fff; border:1px solid #00ff9c;"></textarea>

      <div id="stats" style="margin-top:15px;"></div>

      <div id="highlight" style="margin-top:10px; padding:10px; background:#000; border:1px solid #00ff9c; white-space:pre-wrap;"></div>

      <button id="copyBtn" style="margin-top:15px; padding:10px; background:#00ff9c; color:#000; border:none; cursor:pointer;">
        ? Скопировать совпадения
      </button>

    </div>
  `;

  const regexInput = root.querySelector("#regexInput");
  const flagsInput = root.querySelector("#flagsInput");
  const textInput = root.querySelector("#textInput");
  const highlight = root.querySelector("#highlight");
  const stats = root.querySelector("#stats");
  const copyBtn = root.querySelector("#copyBtn");

  const exampleBtn = root.querySelector("#exampleBtn");
  const phoneBtn = root.querySelector("#phoneBtn");
  const clearBtn = root.querySelector("#clearBtn");

  let lastMatches = [];

  function escapeHTML(str){
    return str.replace(/[&<>"]/g, c => ({
      "&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;"
    }[c]));
  }

  function update(){
    try{
      const pattern = regexInput.value;
      const flags = flagsInput.value;
      const text = textInput.value;

      if(!pattern){
        highlight.innerHTML = "Введите regex...";
        stats.innerHTML = "";
        return;
      }

      const regex = new RegExp(pattern, flags.includes("g") ? flags : flags + "g");

      lastMatches = [...text.matchAll(regex)];

      stats.innerHTML = `Найдено совпадений: ${lastMatches.length}`;

      let resultHTML = "";
      let lastIndex = 0;

      lastMatches.forEach(m => {
        const start = m.index;
        const end = start + m[0].length;

        resultHTML += escapeHTML(text.slice(lastIndex, start));
        resultHTML += `<span style="background:#ffcc00; color:#000;">${escapeHTML(m[0])}</span>`;

        lastIndex = end;
      });

      resultHTML += escapeHTML(text.slice(lastIndex));

      highlight.innerHTML = resultHTML || "Совпадений нет";

    } catch(e){
      highlight.innerHTML = "Ошибка: " + e.message;
      stats.innerHTML = "";
    }
  }

  regexInput.oninput = update;
  flagsInput.oninput = update;
  textInput.oninput = update;

  exampleBtn.onclick = () => {
    regexInput.value = "[\\w.-]+@[\\w.-]+\\.[a-zA-Z]{2,}";
    flagsInput.value = "g";
    textInput.value = "test@mail.com example@gmail.com";
    update();
  };

  phoneBtn.onclick = () => {
    regexInput.value = "\\+?\\d{10,}";
    flagsInput.value = "g";
    textInput.value = "+1234567890 9876543210";
    update();
  };

  clearBtn.onclick = () => {
    regexInput.value = "";
    flagsInput.value = "";
    textInput.value = "";
    highlight.innerHTML = "";
    stats.innerHTML = "";
  };

  copyBtn.onclick = () => {
    const text = lastMatches.map(m => m[0]).join("\n");
    navigator.clipboard.writeText(text).then(()=>{
      copyBtn.textContent = "✅ Скопировано!";
      setTimeout(()=> copyBtn.textContent = "? Скопировать совпадения", 2000);
    });
  };

})(typeof container !== 'undefined' ? container : document.body);