Hacktoberfest 2026：维护者为十月标记出来的 issue，仍然开放、适合新手。 浏览 Hacktoberfest issue

Add a Regex Tester tool

未关闭
  • 哪里不对？
#85 5 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看

维护者通常 1 天内回复

@piyusshhjangid 已经在做这个了。

开始于 2026年10月19日。

评估

难度
4/5
预计耗时
3-5 天
新手友好度
74/100
Issue 类型
功能
描述清晰度
描述清楚
活跃度
活跃
技术栈
javascript, nextjs, tailwindcss, typescript
领域
devtools, frontend

调研方向

Start with lib/tools.ts and the complete tool structure in app/(tools)/base64/; also read the README’s “Add a tool” section. Implement and test pure logic in lib/regex-utils.ts and lib/__tests__/regex-utils.test.ts, then add the route, client UI, registry entry, and checklist items. Done means the listed tests and UI criteria pass and npm run lint && npm run test && npm run build succeeds.

由索引模型根据 Issue 内容生成。

描述

enhancement hacktoberfest help wanted new tool

Test a JavaScript regular expression against sample text, with highlighted matches, capture groups and a replace preview, all in the browser.

Route: /regex-tester

Suggested registry values: title Regex Tester, tagline Patterns, heroHeading Regex Tester with heroDim "", features ["Live matches", "Flags", "Capture groups", "Named groups", "Replace"].

Core logic in lib/regex-utils.ts

  • compileRegex(pattern, flags) returning { ok: true, regex } | { ok: false, error } with a friendly message
  • findMatches(regex, text, { limit = 1000 }) returning { matches: [{ text, index, end, groups, named }], truncated }. Always iterate a global copy of the regex and advance lastIndex on zero-length matches, so patterns like a* or ^ can't loop forever.
  • replacePreview(regex, text, replacement) supporting $1 and $<name>

v1 scope

  • Pattern input with flag toggles (g, i, m, s, u, y)
  • Test text with highlighted matches
  • A match table with capture groups
  • Replace preview
  • Debounced input and a size cap on the test text (for example 100 KB)

Known limitation: catastrophic backtracking (for example (a+)+$ on a long string) can still freeze the tab in v1. Running matches in a Web Worker with a timeout is a good follow-up.

Out of scope for v1: a regex explainer, saved patterns, other regex flavours.

Where to look

  • lib/tools.ts (the registry and the Tool interface)
  • app/(tools)/base64/ (a complete tool to copy the structure from)
  • The "Add a tool" section of the README

Acceptance criteria

  • Tests: zero-length patterns terminate, named groups are returned, invalid patterns and flags give ok: false, hitting the limit sets truncated, and replacement with $1 and $<name> works
  • UI as scoped above
  • The standard new-tool checklist below is complete

Standard new-tool checklist

Everything (home grid, metadata, JSON-LD, OG image, sitemap, manifest, command palette) is driven by the registry in lib/tools.ts, so a new tool is mostly one registry entry plus a route.

  • Add an entry to TOOLS in lib/tools.ts filling every field of the Tool interface (lib/tools.ts:19-52). Use applicationCategory: "DeveloperApplication", reuse the CTA_PROJECTS / CTA_CONTACT constants for the CTA links, and set sitemapPriority: 0.9 like the other tools.
  • Pick accentVar from the accent variables in app/globals.css (the list is under "Adding a tool" in CONTRIBUTING.md). Take one that no tool uses yet, or the one the fewest tools have if they're all taken. Don't use --rose, it's the color of error messages. Set accentHex to that variable's dark-theme value. heroDim must be "" or a substring of heroHeading.
  • Write 3 or 4 FAQs (3 renders as a 3-column grid, see components/shared/ToolPageLayout.tsx:25). Keep metaTitle under 60 characters and metaDescription around 150 to 160.
  • Keep features and ogDescription to plain Latin text and punctuation. The social card font is a subset with no arrow or symbol glyphs (lib/og.tsx:33-36).
  • Create app/(tools)/<slug>/page.tsx, <Name>Client.tsx (with "use client"), and opengraph-image.tsx. Copy page.tsx and opengraph-image.tsx from app/(tools)/base64/ and change the slug.
  • Put all pure logic in lib/<name>.ts (no React, no DOM) with tests in lib/__tests__/<name>.test.ts. Tests can import with @/ like the app does (vitest.config.ts has the alias).
  • Nothing leaves the browser: no network calls with user input, no analytics, no third-party scripts (the CSP in middleware.ts blocks external scripts anyway).
  • Reuse shared pieces: CopyButton, useToast, and optionally useRegisterCommands for command palette actions (example in app/(tools)/base64/Base64Client.tsx:43-53).
  • Every input has a visible label or an aria-label, the tool works with the keyboard alone, and it looks right in both light and dark themes.
  • Add the tool to the "Which tool?" dropdown in .github/ISSUE_TEMPLATE/bug_report.yml.
  • npm run lint && npm run test && npm run build passes.

One new tool per contributor, so more people get a chance. Add your registry entry at the end of TOOLS and rebase on develop before asking for review, since other new tools will touch the same file.

Want to work on this? Comment below and I'll assign it to you. Please take one issue at a time, branch off develop, and open your PR against develop with Closes #85 in the description.

主要语言
TypeScript
星标
1
派生
9
平均合并
9 小时 50 分钟
30 天内合并 PR
105

环境准备

从这里开始

  1. 先读完整个 Issue，再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库，在一个分支上完成修改。
  4. 提交 Pull Request，并在描述里引用这个 Issue 编号。

codercops/toolbelt 的其他 Issue

查看 codercops/toolbelt 的全部 Issue

相似的 Issue

更多 TypeScript Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。