https://github.com/soc221b/regexp-to-path
Turn a regular expression (named capturing group) into a path string
https://github.com/soc221b/regexp-to-path
angular path-to-regexp react router vue
Last synced: 2 months ago
JSON representation
Turn a regular expression (named capturing group) into a path string
- Host: GitHub
- URL: https://github.com/soc221b/regexp-to-path
- Owner: soc221b
- License: mit
- Created: 2024-09-14T04:09:37.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2024-12-29T03:54:21.000Z (5 months ago)
- Last Synced: 2025-02-07T04:39:41.651Z (4 months ago)
- Topics: angular, path-to-regexp, react, router, vue
- Language: TypeScript
- Homepage: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Regular_expressions/Named_capturing_group
- Size: 48.8 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# RegExp-to-Path
> Turn a regular expression (e.g., `/\/user\/(?[^/]+)/`) into a path string (e.g., `"/user/:id"`).
## Comparison
### Parameters
RegExp: `/\/user\/(?[^/]+)/`
Matches: `/user/1`, `/user/2`, `/user/3`, etc.
| | Path | Document |
| -------------- | ----------- | ------------------------------------------------------------------------ |
| Angular | `/user/:id` | https://angular.dev/guide/routing/router-reference#configuration |
| Path-To-RegExp | `/user/:id` | https://github.com/pillarjs/path-to-regexp?tab=readme-ov-file#parameters |
| React | `/user/:id` | https://reactrouter.com/start/framework/routing#dynamic-segments |
| Vue | `/user/:id` | https://router.vuejs.org/guide/essentials/dynamic-matching.html |
### Optional
RegExp: `/(?:\/(?[^/]+))?\/categories/`
Matches: `/categories`, `/en/categories`, `/fr/categories`, etc.
| | Path | Document |
| -------------- | --------------------- | ---------------------------------------------------------------------------------------- |
| Angular | - | https://angular.dev/guide/routing/routing-with-urlmatcher |
| Path-To-RegExp | `{/:lang}/categories` | https://github.com/pillarjs/path-to-regexp?tab=readme-ov-file#optional |
| React | `/:lang?/categories` | https://reactrouter.com/start/framework/routing#optional-segments |
| Vue | `/:lang?/categories` | https://router.vuejs.org/guide/essentials/route-matching-syntax.html#Optional-parameters |
### Repeatable
RegExp: `/\/files(?\/[^\/]+?)*/`. (needs to extract each segment manually)
Matches: `/files/1`, `/files/1/2`, `/files/1/2/3`, etc.
| | Path | Document |
| -------------- | --------------- | -------------------------------------------------------------------------------------- |
| Angular | - | https://angular.dev/guide/routing/routing-with-urlmatcher |
| Path-To-RegExp | `/files/*path` | https://github.com/pillarjs/path-to-regexp?tab=readme-ov-file#wildcard |
| React | `/files/*` | https://reactrouter.com/start/framework/routing#splats |
| Vue | `/files/:path*` | https://router.vuejs.org/guide/essentials/route-matching-syntax.html#Repeatable-params |
### Wildcard
RegExp: `/.*/`
Matches: anything
| | Path | Document |
| -------------- | ------------------ | --------------------------------------------------------------------------------------------- |
| Angular | `**` | https://angular.dev/guide/routing/router-reference#configuration |
| Path-To-RegExp | `/*path` | https://github.com/pillarjs/path-to-regexp?tab=readme-ov-file#wildcard |
| React | `*` | https://reactrouter.com/start/framework/routing#splats |
| Vue | `/:pathMatch(.*)*` | https://router.vuejs.org/guide/essentials/dynamic-matching.html#Catch-all-404-Not-found-Route |
## Demo
```ts
// For Path-to-regexp, e.g., `/\/user\/(?[^/]+)/` `"/user/:id"`
import { regExpToPath } from "regexp-to-path";
// For Angular, e.g., `/.*/` `"**"`
// import { regExpToPathAngular } from "regexp-to-path";
// For React, e.g., `/\/project(?:\/task)?\/(?[^/]+)/` `"/project/task?/:taskId"`
// import { regExpToPathReact } from "regexp-to-path";
// For Vue, e.g., `/\/(?\d*)/` `"/:chapters(\\d+)*"`
// import { regExpToPathVue } from "regexp-to-path";
```
```ts
regExpToPath(/\/user\/(?[^/]+)/);
//=> "/user/:id"
```