*putting this up as a blog post so it's easily accessible to me whenever I need it. This isn't a perfect solution but it worked for me.
I'm currently building a <a href="https://calm-custard-ddb033.netlify.app/login">freelance management tool</a> that's reasonably tailored to my (on the side) freelancing needs and I ran into a minor issue a few days ago. I had a list of items to iterate over. Each item had several keys, one of which was a "name" key with string values. Some string values had at least one whitespace, while others had whitespaces and at least one special character.
On every iteration, the idea was to create a new key, called "path" with a string value by taking the value of the "name" key, call the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/trim">String.prototype.trim()</a> method on it, then call the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join">Array.prototype.join()</a> method on the returned array to produce a different string value as seen in the example below:
<pre><code class="language-JS">&#x3C;script>
 // initial array
 const items = [
 ...
 { name: 'App Integrations', iconName: 'grid' },
 ....
 ]
 // after iteration and transformation becomes
 const transformedArr = [
 ...
 { name: 'App Integrations', iconName: 'grid', path: 'app-integrations' },
 ....
 ]
&#x3C;/script>

</code></pre>
This is a non-issue if each string value is guaranteed to contain only one whitespace but in the event of dynamic multiple whitespaces or at least one or more special characters, things can get tricky easily. While the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/trim">String.prototype.trim()</a> method is very useful for trimming out white spaces, it doesn't extend to special characters. One hack is to trim the string value first before calling the .split() method, and finally, the .join(*operator) method. There might be some drawbacks to this approach regarding the performance but I'm not very familiar with that.
<pre><code class="language-JS">&#x3C;script>
 // helper function to be run on every iteration
 function transformPath(name) {
 if (!name) return "";

 const regexPattern = /\s\W*/;

 return name?.trim()?.split(regexPattern)?.join("-")?.toLowerCase();
 }

 // result
 const transformedArr = [
 ...
 { name: 'App Integrations', iconName: 'grid', path: 'app-integrations' },
 { name: 'Billings &#x26; Plans', iconName: 'money', path: 'billings-plans' },
 ....
 ]
&#x3C;/script>

</code></pre>
Another hack is calling the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace">String.protoype.replace()</a> method on the string value. This method takes in two parameters, a string or a <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp">RegExp</a>, a value to replace the string with and returns a new string. We'll pass in a regex value as the first parameter and an empty string as the second parameter. Call the split method on this new string, passing in a second regex expression which matches special characters; in regex, /W matches all non-word characters. Call the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join">Array.prototype.join()</a> method on the returned array. You can choose to further transform the returned string to lower case characters.
<pre><code class="language-JS">&#x3C;script>
 // helper function to be run on every iteration
 function transformPath(name) {
 return name.replace(/(\s)*/g, '').split(/\W/g)?.join("-")?.toLowerCase();
 }

 // result
 const transformedArr = [
 ...
 { name: 'App Integrations', iconName: 'grid', path: 'app-integrations' },
 { name: 'Billings &#x26; Plans', iconName: 'money', path: 'billings-plans' },
 ....
 ]
&#x3C;/script>

</code></pre>
As I mentioned earlier, there might be some performance or even readability issues with these solutions but they work (even if temporaily). Maybe, I'll come back someday to update this article if I find a more performant approach or an approach with less overkill.
<h3>Notes</h3>
Leaving some notes below, as usual. Here are some resources for this issue that I've found helpful:
<ul>
<li><a href="https://regex101.com/r/nK3zB3/1">Regex101</a>,</li>
<li><a href="https://regexr.com/">Regexr</a>,</li>
<li><a href="https://bobbyhadz.com/blog/javascript-split-string-special-characters#:~:text=To%20split%20a%20string%20by,an%20array%20containing%20the%20results.">Bobby Hadz</a>,</li>
</ul>

Experimenting with various ways to alter a string