Pattern matching

Use regex patterns and word lists to automatically highlight text in DyeLight

Pattern matching allows you to automatically highlight text based on regular expressions or word lists. This is ideal for syntax highlighting, keyword detection, or finding specific patterns in user input.

Pattern-based highlighting

The HighlightBuilder.pattern() method searches text using a regular expression and returns character range highlights for all matches:

import { DyeLight, HighlightBuilder } from 'dyelight';

function CodeEditor() {
  const [code, setCode] = useState(`function hello() {
  const message = "Hello World";
  console.log(message);
}`);

  // Highlight JavaScript keywords
  const keywordHighlights = HighlightBuilder.pattern(
    code,
    /\b(function|const|let|var|if|else|for|while)\b/g,
    'text-blue-600 font-semibold'
  );

  return (
    <DyeLight
      value={code}
      onChange={setCode}
      highlights={keywordHighlights}
    />
  );
}

The pattern is automatically converted to a global regex (/g flag) if not already present. This ensures all matches in the text are found, not just the first one (see builder.ts:86).

Pattern method signature

HighlightBuilder.pattern(
  text: string,              // The text to search within
  pattern: RegExp | string,  // Regex pattern or string to convert to regex
  className?: string,        // Optional CSS class for matches
  style?: React.CSSProperties // Optional inline styles
)

Common regex patterns

Here are some useful patterns for different use cases:

Email addresses

const emailHighlights = HighlightBuilder.pattern(
  text,
  /\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Z|a-z]{2,}\b/g,
  'email-highlight'
);

URLs

const urlHighlights = HighlightBuilder.pattern(
  text,
  /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)/g,
  'text-blue-500 underline'
);

Phone numbers

const phoneHighlights = HighlightBuilder.pattern(
  text,
  /\b\d{3}[-.]?\d{3}[-.]?\d{4}\b/g,
  'bg-green-100'
);

String literals (quoted text)

const stringHighlights = HighlightBuilder.pattern(
  code,
  /"[^"]*"/g,
  'text-green-600'
);

Word-based highlighting

The HighlightBuilder.words() method is a specialized version of pattern matching that highlights complete words from a list:

function KeywordHighlighter() {
  const [code, setCode] = useState('function test() { return null; }');

  // Highlight specific programming keywords
  const highlights = HighlightBuilder.words(
    code,
    ['function', 'const', 'let', 'var', 'return'],
    'keyword'
  );

  return (
    <DyeLight
      value={code}
      onChange={setCode}
      highlights={highlights}
      className="font-mono"
    />
  );
}

How it works

Under the hood, words() creates a word-boundary regex pattern from your word list (see builder.ts:161-163):

// This:
HighlightBuilder.words(text, ['TODO', 'FIXME', 'NOTE'], 'highlight');

// Becomes:
HighlightBuilder.pattern(text, /\b(TODO|FIXME|NOTE)\b/g, 'highlight');

The word boundaries (\b) ensure that only complete words are matched. For example, searching for “log” won’t match “blog” or “logger”.

Combining multiple patterns

You can combine highlights from multiple pattern searches:

function SyntaxHighlighter() {
  const [code, setCode] = useState(`
function hello() {
  const message = "Hello World";
  console.log(message);
}
  `);

  // Highlight different syntax elements
  const keywords = HighlightBuilder.pattern(
    code,
    /\b(function|const|let|var|if|else|for|while)\b/g,
    'text-blue-600 font-semibold'
  );

  const strings = HighlightBuilder.pattern(
    code,
    /"[^"]*"/g,
    'text-green-600'
  );

  const functions = HighlightBuilder.words(
    code,
    ['console', 'log'],
    'text-purple-600'
  );

  return (
    <DyeLight
      value={code}
      onChange={setCode}
      highlights={[...keywords, ...strings, ...functions]}
      className="font-mono text-sm"
      enableAutoResize
    />
  );
}

Styling pattern matches

You can use either CSS classes or inline styles with patterns:

CSS classes

const highlights = HighlightBuilder.pattern(
  text,
  /\bTODO\b/g,
  'todo-highlight'
);

.todo-highlight {
  background-color: orange;
  color: white;
  font-weight: bold;
  padding: 0 4px;
  border-radius: 2px;
}

Inline styles

const highlights = HighlightBuilder.pattern(
  text,
  /\bERROR\b/g,
  undefined,
  {
    backgroundColor: 'red',
    color: 'white',
    fontWeight: 'bold',
    textDecoration: 'underline wavy red',
  }
);

Case-insensitive matching

To perform case-insensitive pattern matching, add the i flag to your regex:

const highlights = HighlightBuilder.pattern(
  text,
  /\btodo\b/gi,  // The 'i' flag makes it case-insensitive
  'todo-highlight'
);

When passing a string pattern, you can create a RegExp with flags:

const pattern = new RegExp('todo', 'gi');
const highlights = HighlightBuilder.pattern(text, pattern, 'highlight');

Performance with patterns

Pattern matching uses JavaScript’s native String.matchAll() method (see builder.ts:87), which is highly optimized. However, for very large documents or complex patterns:

• Memoize pattern results when the text hasn’t changed:

const highlights = useMemo(
  () => HighlightBuilder.pattern(code, /\bfunction\b/g, 'keyword'),
  [code]
);

• Debounce pattern matching during rapid text input:

const [text, setText] = useState('');
const debouncedText = useDebounce(text, 300);

const highlights = useMemo(
  () => HighlightBuilder.pattern(debouncedText, pattern, className),
  [debouncedText]
);

For syntax highlighting multiple patterns simultaneously, compute all highlights in a single useMemo to avoid redundant processing.