Merge pull request #2806 from Jwaegebaert/fixMaxChars

Solve multiple spaces and max chars

samples/react-page-navigator/README.md

@@ -28,6 +28,7 @@ Version|Date|Comments
 1.2|May, 2022|SPFx Upgraded to 1.14.0
 1.3|June 9, 2022|Updated React package from `^16.14.0` to `16.13.1`
 1.4|June 29, 2022|Adds the capability to find collapsible section headers and insert them into the navigation
+1.5|July 2, 2022|Fixes heading links containing a lot of spaces between words and caps heading length at 128 charsgu
 
 ## Minimal Path to Awesome
 

samples/react-page-navigator/assets/sample.json

@@ -9,7 +9,7 @@
       "This web part fetches all the automatically added Header anchor tags in a SharePoint page and displays them in a Navigation component."
     ],
     "creationDateTime": "2019-09-05",
-    "updateDateTime": "2022-06-29",
+    "updateDateTime": "2022-07-02",
     "products": [
       "SharePoint"
     ],

samples/react-page-navigator/src/Service/SPService.ts

@@ -14,12 +14,11 @@ export class SPService {
   private static GetAnchorUrl(headingValue: string): string {
     let anchorUrl = `#${headingValue
       .toLowerCase()
-      .trim()
-      .replace(/[{}|\[\]\<\>#@"'^%`?;:/=~\\]/g, " ")
-      .replace(/^\-*|\-*$/g, "")
-      .trim()
+      .replace(/[{}|\[\]\<\>#@"'^%`?;:\/=~\\\s\s+]/g, " ")
+      .replace(/^(-|\s)*|(-|\s)*$/g, "")
       .replace(/\'|\?|\\|\/| |\&/g, "-")
-      .replace(/--+/g, "-")}`;
+      .replace(/-+/g, "-")
+      .substring(0, 128)}`;
 
     let counter = 1;
     this.allUrls.forEach(url => {