docs(docs-infra): extract captured group from heading custom id regexp (angular#57206)

Backport of angular/dev-infra#2202

PR Close angular#57206

Author: JeanMeche

adev/shared-docs/pipeline/guides/testing/heading/heading.spec.ts

@@ -80,7 +80,7 @@ describe('markdown to html', () => {
     const h2HeaderId = h2?.getAttribute('id');
     const h2AnchorHref = h2Anchor?.getAttribute('href');
 
-    expect(h2HeaderId).toContain('my-custom-id');
+    expect(h2HeaderId).toBe('my-custom-id');
     expect(h2AnchorHref).toBe(`#${h2HeaderId}`);
   });
 });

adev/shared-docs/pipeline/guides/tranformations/heading.ts

@@ -28,8 +28,14 @@ export const headingRender: RendererApi['heading'] = (text, level, raw) => {
   const regex = /<a\s+(?:[^>]*?\s+)?href.*?>(.*?)<\/a>/gi;
   const anchorLessText = text.replace(regex, '$1');
 
-  const link = getHeaderId(anchorLessText);
-  const label = anchorLessText.replace(/`(.*?)`/g, '<code>$1</code>');
+  // extract the extended markdown heading id
+  // ex:  ## MyHeading {# myId}
+  const customIdRegex = /{#\s*([\w-]+)\s*}/g;
+  const customId = customIdRegex.exec(anchorLessText)?.[1];
+  const link = customId ?? getHeaderId(anchorLessText);
+  const label = anchorLessText
+    .replaceAll(/`(.*?)`/g, '<code>$1</code>')
+    .replaceAll(customIdRegex, '');
 
   return `
   <h${level} id="${link}">