shadcn.io is an independent project built on shadcn/ui
Text
ProRegex Text for Solid
Each regex match is marked, and a highlight walks from one match to the next. For Solid with Ark UI, when a pattern should show what it finds.
Regex Text runs a regular expression over a text and marks every match, then walks a stronger highlight from one match to the next, like a search cursor stepping through the results. It holds on each match for a moment before it moves on, round and round, and stops while the pointer is over it.
Use it in a regex tool, a tutorial on patterns, the docs of a validator, or a log where the errors should stand out. To mark what someone types into a search box, use Search Highlight Text; for code with every token coloured, Syntax Text. The walk is CSS alone: one registered number runs from the first match to the last through a keyframe animation the install adds to your stylesheet, and each mark works out from it how near the highlight is, with no animation library. With reduced motion every match is marked alike.
Installation
Usage
import { RegexText } from "@/components/ui/regex-text";<RegexText pattern="[45]\d\d" text="GET /users 200 · POST /orders 422" />Demos
Flags
flags are the regular expression's flags, such as i to ignore case; g is always added, since every match is marked. The same pattern without and with i:
Live
pattern can change as someone types it. A pattern that doesn't compile yet, half way through a group, shows the text plain until it does; it never throws.
Accessibility
The text stays real text, read once by screen readers, with each match in a <mark> that some of them announce as highlighted. The moving highlight is only a stronger tint, so nothing changes for a screen reader as it walks. It stops while the pointer is over the text, and with reduced motion it doesn't walk at all: every match keeps the same light tint. In forced-colors mode the marks take the system's highlight colours.
FAQ
How do I pass the pattern?
As a string, the way new RegExp takes it, with the flags apart in flags. In a JavaScript string a backslash is doubled, so \b\w+\b is written "\\b\\w+\\b"; a constant declared once keeps it readable.
What if the pattern is invalid?
The text shows plain, with no marks, and nothing throws: a pattern that fails to compile, or bad flags, is caught. Matches of nothing at all, such as a* between letters, are skipped.
Can a pattern freeze the page?
A pattern prone to catastrophic backtracking, such as (a+)+$ on a long text, is as slow here as anywhere else in JavaScript, since the browser's own engine runs it. Regex Text doesn't guard against it: keep patterns from untrusted people short, or check them before you pass them.
How do I make the highlight stop?
loop={false} walks the matches once and rests on the last one. duration is how long it stays on each match, 1000 ms by default; a single match, or none, never walks.
What colour are the marks?
Your theme's --info, light on every match and strong on the one the highlight is on, light and dark. Pass highlightColor for any other CSS colour; the install adds --info to your theme if it doesn't have one.
API Reference
RegexText
<span> data-slot="regex-text"
patternstring
The regular expression, as a string ("\\b\\w{5}\\b"). One that
doesn't compile shows the text plain.
textstring
The text to search.
duration?number
How long the highlight stays on each match, in milliseconds. @default 1000.
flags?string
The regular expression's flags, such as i to ignore case; g is always added. @default "g".
- Default
"g"
highlightColor?string
The marks' colour, any CSS colour; the match in turn takes it strong, the others faint.
- Default
"var(--info)"
loop?boolean
Whether the highlight walks the matches forever, or once, resting on the last.
- Default
true
class?string
Merged with the part's classes.
--regex-text-colorstring
The marks' colour.
--regex-text-durationstring
How long the highlight stays on each match (1000ms).
