The replace() method on JavaScript strings appears straightforward at first glance, but its true capabilities emerge when combined with regular expressions. While simple substring replacement works for basic scenarios, regex integration unlocks sophisticated text transformation patterns essential for modern development.

Syntax and Return Behavior

The method signature follows thiss pattern: string.replace(pattern|substring, replacement|callback). It returns a new string with matches substituted, leaving the original unchanged due to string immutability.

Basic vs. Regex-Enabled Replacement

When passing a plain string as the first argument, only the initial occurrence gets replaced:

'token token token'.replace('token', 'value') // Result: 'value token token'

Adding the global flag to a regex pattern transforms the behavior completely:

'token token token'.replace(/token/g, 'value') // Result: 'value value value'

Capture Group Mechanisms

The real power surfaces when using parentheses to create capture groups. These groups become backreferences in the replacement string through $n placeholders:

'202312'.replace(/(\d{4})(\d{2})/, '$1-$2') // Result: '2023-12'

'USR2023ID'.replace(/([A-Z]{3})(\d{4})([A-Z]{2})/, '$1-$2-$3') // Result: 'USR-2023-ID'

Special Replacement Tokens

Beyond numbered backreferences, several special tokens provide contextual information:

• $$ – Inserts a literal dollar sign
• $& – Inserts the entire matched substring
• `$`` – Inserts text preceding the match
• $' – Inserts text following the match
• $n – Inserts the nth capture group (for n < 100)

Practical demonstrations:

'javascript'.replace(/script/, "$`")        // Result: 'javajava'

'hello world'.replace(/world/, "$'")        // Result: 'hello hello'

'fooBarBaz'.replace(/[A-Z]/g, '$&-')        // Result: 'fooB-arB-az'

'abcdef'.replace(/cd/, "$`$'")             // Result: 'ababeabf'

Dynamic Replacement with Functions

For logic that exceeds static templates, a callback function provides granular control. The function receives: the full match, capture groups, match offset, and the original string.

// Reformatting a product identifier
'PRD-7890-XL'.replace(/([A-Z]{3})-(\d{4})-([A-Z]{2})/, 
  (match, prefix, digits, size, offset, source) => {
    return `${prefix.toLowerCase()}-${digits}-${size.toLowerCase()}`;
  }
) // Result: 'prd-7890-xl'

Functions enable condisional logic based on match position:

// Converting camelCase to kebab-case
'getUserAccountName'.replace(/[A-Z]/g, (char, position) => {
  return position === 0 ? char.toLowerCase() : `-${char.toLowerCase()}`;
}) // Result: 'get-user-account-name'

This approach excels when transformations require runtime decisions, calculations, or external data lookups that static replacement strings cannot acommodate.