Flavor {["javascript", "python", "pcre", "golang"].map(f => ( ))}

Presets {presets.map(p => ( ))}

{/* Flavor note */}

{flavorNotes[flavor]}

{/* Pattern input */}

Pattern {results.error && ( {results.error} )} {!results.error && results.matches.length > 0 && ( {results.matches.length} match{results.matches.length !== 1 ? "es" : ""} )}

/ setPattern(e.target.value)} placeholder="Enter regex pattern..." className="flex-1 bg-transparent font-mono text-base text-gray-900 dark:text-gray-100 outline-none placeholder-gray-400 dark:placeholder-gray-600" spellCheck={false} /> / {flags}

{/* Flags */}

{availableFlags.map(f => ( ))}

{/* Test string with highlighting */}

Test String

setTestString(e.target.value)}
            rows={5}
            className="w-full bg-transparent font-mono text-sm caret-gray-900 dark:caret-gray-100 outline-none resize-y px-4 py-3 relative z-10"
            spellCheck={false}
          />
          <div
            className="absolute inset-0 px-4 py-3 font-mono text-sm text-gray-900 dark:text-gray-100 pointer-events-none whitespace-pre-wrap break-words overflow-hidden"
            style={{ wordBreak: "break-word" }}
          >
            {highlightedText.map((seg, i) => (
              seg.isMatch ? (
                <mark
                  key={i}
                  className={`${matchColors[seg.matchIndex % matchColors.length].bg} rounded-sm px-px border-b-2 ${matchColors[seg.matchIndex % matchColors.length].border}`}
                  onMouseEnter={() => setHoveredMatch(seg.matchIndex)}
                  onMouseLeave={() => setHoveredMatch(null)}
                >
                  {seg.text}
                </mark>
              ) : (
                <span key={i}>{seg.text}</span>
              )
            ))}
          </div>
        </div>
      </div>

{/* Tab bar */}
      <div className="flex items-center gap-1 bg-gray-50 dark:bg-gray-800 rounded-xl p-1 border border-gray-200 dark:border-gray-700">
        {[
          { key: "match", label: "Match Info" },
          { key: "substitution", label: "Substitution" },
          { key: "explain", label: "Explanation" },
          { key: "reference", label: "Quick Ref" },
        ].map(tab => (
          <button
            key={tab.key}
            onClick={() => setActiveTab(tab.key)}
            className={`flex-1 px-3 py-2 rounded-lg text-xs font-bold uppercase tracking-wide transition-all ${
              activeTab === tab.key
                ? "bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 shadow-sm"
                : "text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300"
            }`}
          >
            {tab.label}
          </button>
        ))}
      </div>

{/* Tab content */}
      <div className="rounded-xl border-2 border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 overflow-hidden shadow-sm">
        {activeTab === "match" && (
          <div className="divide-y divide-gray-100 dark:divide-gray-800">
            {results.matches.length === 0 && !results.error && (
              <div className="px-6 py-8 text-center text-gray-400 dark:text-gray-600 text-sm">
                No matches found. Adjust your pattern or test string.
              </div>
            )}
            {results.matches.map((m, i) => {
              const color = matchColors[i % matchColors.length];
              return (
                <div
                  key={i}
                  className={`px-4 py-3 transition-colors ${hoveredMatch === i ? "bg-gray-50 dark:bg-gray-800" : ""}`}
                  onMouseEnter={() => setHoveredMatch(i)}
                  onMouseLeave={() => setHoveredMatch(null)}
                >
                  <div className="flex items-start gap-3">
                    <div className={`flex-shrink-0 w-8 h-8 rounded-lg ${color.bg} flex items-center justify-center`}>
                      <span className={`text-xs font-bold ${color.text}`}>{i + 1}</span>
                    </div>
                    <div className="flex-1 min-w-0">
                      <div className="flex items-baseline gap-2 flex-wrap">
                        <code className={`font-mono text-sm font-semibold ${color.text} ${color.bg} px-1.5 py-0.5 rounded`}>
                          {m.value || "(empty)"}
                        </code>
                        <span className="text-xs text-gray-400 dark:text-gray-500">
                          index {m.index}–{m.end} ({m.value.length} char{m.value.length !== 1 ? "s" : ""})
                        </span>
                      </div>
                      {m.groups.length > 0 && (
                        <div className="mt-2 flex flex-wrap gap-1.5">
                          {m.groups.map((g, gi) => (
                            <span key={gi} className="inline-flex items-center gap-1 bg-gray-100 dark:bg-gray-800 rounded px-2 py-0.5">
                              <span className="text-[10px] font-bold text-gray-400 dark:text-gray-500">G{gi + 1}</span>
                              <code className="text-xs font-mono text-gray-700 dark:text-gray-300">{g ?? "undefined"}</code>
                            </span>
                          ))}
                        </div>
                      )}
                      {Object.keys(m.namedGroups).length > 0 && (
                        <div className="mt-1.5 flex flex-wrap gap-1.5">
                          {Object.entries(m.namedGroups).map(([name, val]) => (
                            <span key={name} className="inline-flex items-center gap-1 bg-violet-50 dark:bg-violet-900 rounded px-2 py-0.5">
                              <span className="text-[10px] font-bold text-violet-500 dark:text-violet-400">{name}</span>
                              <code className="text-xs font-mono text-violet-700 dark:text-violet-300">{val ?? "undefined"}</code>
                            </span>
                          ))}
                        </div>
                      )}
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        )}

{activeTab === "substitution" && (
          <div className="p-4 space-y-3">
            <div className="flex items-center gap-2">
              <span className="text-xs font-bold text-gray-500 dark:text-gray-200 uppercase tracking-wider">Replace with</span>
              <span className="text-[10px] text-gray-400 dark:text-gray-500 bg-gray-100 dark:bg-gray-800 rounded px-1.5 py-0.5">Use $1, $2 for groups</span>
            </div>
            <input
              type="text"
              value={substitution}
              onChange={e => setSubstitution(e.target.value)}
              placeholder="$2, $1"
              className="w-full font-mono text-sm bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg px-3 py-2 text-gray-900 dark:text-gray-100 outline-none focus:border-emerald-500 dark:focus:border-emerald-500 transition-colors"
              spellCheck={false}
            />
            {substitutionResult !== null && (
              <div>
                <div className="text-xs font-bold text-gray-500 dark:text-gray-200 uppercase tracking-wider mb-1.5">Result</div>
                <pre className="font-mono text-sm bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg px-3 py-2 text-gray-900 dark:text-gray-100 whitespace-pre-wrap">{substitutionResult}</pre>
              </div>
            )}
          </div>
        )}

{activeTab === "explain" && (
          <div className="p-4">
            {!explanation || explanation.length === 0 ? (
              <div className="text-center text-gray-400 dark:text-gray-600 text-sm py-6">Enter a pattern to see its breakdown.</div>
            ) : (
              <div className="space-y-0.5">
                {explanation.map((t, i) => (
                  <div key={i} className="flex items-center gap-3 py-1.5 px-2 rounded-md hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
                    <code className="font-mono text-sm font-bold text-emerald-600 dark:text-emerald-400 bg-emerald-50 dark:bg-emerald-900 px-2 py-0.5 rounded min-w-[4ch] text-center">
                      {t.token}
                    </code>
                    <span className="text-sm text-gray-600 dark:text-gray-400">{t.desc}</span>
                  </div>
                ))}
              </div>
            )}
          </div>
        )}

{activeTab === "reference" && (
          <div className="p-4">
            <div className="grid grid-cols-2 gap-x-6 gap-y-0.5">
              {[
                [".","Any character (except newline)"],
                ["\\d","Digit [0-9]"],
                ["\\D","Non-digit"],
                ["\\w","Word char [a-zA-Z0-9_]"],
                ["\\W","Non-word char"],
                ["\\s","Whitespace"],
                ["\\S","Non-whitespace"],
                ["\\b","Word boundary"],
                ["^","Start of string/line"],
                ["$","End of string/line"],
                ["[abc]","Character class"],
                ["[^abc]","Negated class"],
                ["a|b","Alternation"],
                ["(...)","Capturing group"],
                ["(?:...)","Non-capturing group"],
                ["(?=...)","Positive lookahead"],
                ["(?!...)","Negative lookahead"],
                ["(?<=...)","Positive lookbehind"],
                ["(?<!...)","Negative lookbehind"],
                ["*","0 or more"],
                ["+","1 or more"],
                ["?","0 or 1"],
                ["{n}","Exactly n"],
                ["{n,}","n or more"],
                ["{n,m}","Between n and m"],
                ["*?","Lazy 0 or more"],
                ["+?","Lazy 1 or more"],
                ["$1","Group backreference"],
              ].map(([token, desc]) => (
                <div key={token} className="flex items-center gap-2 py-1 border-b border-gray-50 dark:border-gray-800">
                  <code className="font-mono text-xs font-bold text-emerald-600 dark:text-emerald-400 min-w-[5ch]">{token}</code>
                  <span className="text-xs text-gray-500 dark:text-gray-400">{desc}</span>
                </div>
              ))}
            </div>
          </div>
        )}
      </div>
    </div>
  );
}
return RegexTester;</article></body></html>

Regex Tester

Regex Tester

Appendix