You don't need to worry about regular expressions or word boundaries in this particular use case for two reasons:
- You know the exact class names you are targeting.
- Neither class name is embedded verbatim within the other (for example 'ui-active' and 'ui-active-false' would require a regex that reads word boundaries).
In your case though, 'ui-active' and 'ui-inactive' will never throw a false positive match for one another in string or regex form.
This means you can simply search and swap the exact class names themselves.
activePage.className = activePage.className.replace('ui-active','ui-inactive');
newPage.className = newPage.className.replace('ui-inactive','ui-active');
//OR if you do prefer to stick with regular expressions, simply use...
activePage.className = activePage.className.replace(/ui-active/,'ui-inactive');
newPage.className = newPage.className.replace(/ui-inactive/,'ui-active');
You also do not need to worry about adding an additional space in front of the class name you are adding in this case (I noticed you putting an extra space, such as ' ui-inactive' for the the replacement class, for example). Since the spaces between class names in the className value are already space delimited, the fact that this alternative approach only targets the class name itself, without touching or altering the white-space, you do not need to worry about extra spaces in your substitution values.
Again, this is not a solution that will work in every situation for replacing class names for elements, but given your specific use case, and given the class names you are specifically targeting, it provides a simpler alternative that will still easily fulfill your desired functionality.