Оффлайн
- Регистрация
- 1 Мар 2015
- Сообщения
- 1,481
- Баллы
- 155
In modern web or mobile development, working with dynamic URLs is common — especially when environments (development, staging, production) have different base URLs but share similar API paths. One useful helper function is replacing just the base URL of an existing URL string while preserving its path and query parameters.
Here’s a handy utility function to do just that:
export const replaceBaseUrl = (oldUrl, newUrl) => {
try {
const parser = new URL(oldUrl); // Parse the original URL
const newUrlObject = new URL(parser?.pathname, newUrl); // Replace the base URL while keeping the path
return newUrlObject?.toString(); // Return the updated URL as a string
} catch (error) {
// You can log or handle errors here
console.error("Invalid URL:", error);
return null;
}
};
? How It Works
Example Usage
const oldUrl = '
const newBase = 'https://new-api.example.com';
const updatedUrl = replaceBaseUrl(oldUrl, newBase);
console.log(updatedUrl);
// Output: ''
Error Handling
If an invalid URL is passed, the function catches the error and logs it, returning null.
You can customize the error handling section to suit your needs, such as throwing the error, logging it to a monitoring service, or returning a fallback URL.
? When to Use This
The replaceBaseUrl function is a small but powerful utility that can simplify how you manage endpoint configurations across multiple environments. Clean, readable, and practical — exactly how utility functions should be.
Let me know if you’d like to expand this into a code snippet component or integrate it with a URL manager service!
Here’s a handy utility function to do just that:
export const replaceBaseUrl = (oldUrl, newUrl) => {
try {
const parser = new URL(oldUrl); // Parse the original URL
const newUrlObject = new URL(parser?.pathname, newUrl); // Replace the base URL while keeping the path
return newUrlObject?.toString(); // Return the updated URL as a string
} catch (error) {
// You can log or handle errors here
console.error("Invalid URL:", error);
return null;
}
};
? How It Works
- new URL(oldUrl) is used to safely parse the existing URL.
- parser.pathname extracts just the path portion (e.g., /api/user/123).
- new URL(pathname, newUrl) creates a new URL with the same path but a new base.
- The result is returned as a string using toString().
Example Usageconst oldUrl = '
const newBase = 'https://new-api.example.com';
const updatedUrl = replaceBaseUrl(oldUrl, newBase);
console.log(updatedUrl);
// Output: ''
Error HandlingIf an invalid URL is passed, the function catches the error and logs it, returning null.
You can customize the error handling section to suit your needs, such as throwing the error, logging it to a monitoring service, or returning a fallback URL.
? When to Use This
- Switching environments dynamically (Dev, QA, Prod)
- Migrating to a new domain without changing path structures
- Proxying requests in mobile apps
- Rewriting URLs for API redirection
The replaceBaseUrl function is a small but powerful utility that can simplify how you manage endpoint configurations across multiple environments. Clean, readable, and practical — exactly how utility functions should be.
Let me know if you’d like to expand this into a code snippet component or integrate it with a URL manager service!