angular: replace segment in url

I did write own generator. Here is the code:

import { ActivatedRoute } from "@angular/router";

const defaultExtras: { 
  params: any, 
  preserveMatrix: boolean, 
  recursive: boolean, 
  preserveChildMatrix: boolean, 
  replaceChildParams: boolean 
} = {
  params: {},
  preserveMatrix: true,
  recursive: true,
  preserveChildMatrix: false,
  replaceChildParams: true
};

export function routerPathGenerator(
  route: ActivatedRoute, 
  extras?: { params?: any, preserveMatrix?: boolean, recursive?: boolean, preserveChildMatrix?: boolean, replaceChildParams?: boolean }
): any[] {
  const mergedExtras = { ...defaultExtras, ...extras };
  const path: any[] = [...replaceRouteParams(route.routeConfig.path.split('/'), { ...route.snapshot.params, ...mergedExtras.params })];

  if (mergedExtras.preserveMatrix) {
    path.push(replaceMatrixParams(route, mergedExtras.params));
  }

  if (mergedExtras.recursive && route.children.length > 0) {
    path.push(...routerPathGenerator(route.children[0], {
      params: mergedExtras.replaceChildParams ? mergedExtras.params : {},
      preserveMatrix: mergedExtras.preserveChildMatrix,
      recursive: mergedExtras.recursive,
      preserveChildMatrix: mergedExtras.preserveChildMatrix,
      replaceChildParams: mergedExtras.replaceChildParams
    }));
  }

  return path;
}


function replaceRouteParams(parts: string[], params: Object): any[] {
  return (parts || [])
    .map(part => (part.startsWith(':') && params.hasOwnProperty(part.substring(1)) ? params[part.substring(1)] : part));
}

function replaceMatrixParams(route: ActivatedRoute, params: Object): any {
  const matrix: any = {};
  Object.keys(route.snapshot.params)
    .forEach(key => 
      (route.routeConfig.path.split('/').some(p => p === ':' + key) ?
      '' : 
      matrix[key] = params.hasOwnProperty(key) ? params[key] : route.snapshot.params[key])
    )
  return matrix;
}

Suppose we have URL like this:

http://some.domain/warehouses/5;c=7;d=8/moves/42/items;a=1;b=2?e=77&f=88

where '/warehouses' points to lazy loaded module with routes:

const routes: Routes = [
  { path: '', component: WarehousesComponent },
  { path: ':id', redirectTo: ':id/stocks', pathMatch: 'full' },
  { path: ':id', component: WarehousesComponent, children: [
    { path: 'stocks', component: StocksComponent },
    { path: 'moves', component: MovesComponent, children: [
      { path: '', redirectTo: 'items', pathMatch: 'full' },
      { path: ':moveId/items', component: ItemsComponent },
      { path: 'initial', component: InitialComponent }
    ] }
  ] }
];

If I run the next code inside WarehousesComponent

    const commands = routerPathGenerator(this.route, {
      params: {
        id: 8,
        moveId: 24,
        c: 17,
        a: 666
      },
      preserveChildMatrix: true
    });

    this.router.navigate(commands, { queryParamsHandling: 'preserve', relativeTo: this.route.parent });

I'll navigate to

http://some.domain/warehouses/8;c=17;d=8/moves/24/items;a=666;b=2?e=77&f=88

I think it's your case just check extras params of routerPathGenerator

To read a text pattern in a string, I would suggest a regular expression.

By example if your customer ID is like '123456' the regex can be /\d{6}/ (the slashes are here to describe the regex pattern, not the url ones) :

let url = '/something/for/the/123456' // 123456 denotes :customer here
let pattern = /\d{6}/;

let customerId = url.match(pattern);

Take care of defining a pattern that only matches the customer id in the URL.

You can find further informations on JavaScript regex here : https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/RegExp

And I almost forgot, you can replace a pattern in a string using the String.replace() function : https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/replace