Как сохранить регистры хоста/домена URL (конструктор URL())

Вопрос или проблема

(new URL('https://WWW.EXAMPLE.COM/THIS/is/a/PATH')).href
// => 'https://www.example.com/THIS/is/a/PATH'

Ответ или решение

Чтобы сохранить регистр имени хоста / домена при использовании конструктора URL в JavaScript, необходимо понимать, что этот конструктор автоматически преобразует имя хоста в нижний регистр. Это поведение связано с тем, что доменные имена являются нечувствительными к регистру, но иногда необходимо сохранить оригинальный регистр для различных целей, например, для улучшения читаемости.

Способы сохранения регистра домена

1. Использование объекта URL и дополнительного хранения: Самый простой способ сохранить оригинальный регистр имени домена — это создать кастомный объект, который будет хранить и оригинальный URL, и его измененный вариант. Например:

class CustomURL {
    constructor(url) {
        this.originalUrl = url;
        this.urlObject = new URL(url);
    }

    get originalHostname() {
        return this.originalUrl.match(/:\/\/([^\/]+)/)[1]; // Получаем оригинальное имя хоста
    }

    get href() {
        // Возвращаем href с оригинальным именем хоста
        return this.urlObject.href.replace(this.urlObject.hostname, this.originalHostname);
    }
}

const myUrl = new CustomURL('https://WWW.EXAMPLE.COM/THIS/is/a/PATH');
console.log(myUrl.href); // https://WWW.EXAMPLE.COM/THIS/is/a/PATH

2. Парсинг URL вручную: Вы также можете вручную распарсить URL, сохранив регистр, а затем использовать эти значения для создания нового URL. То есть сначала разобрать URL на компоненты, затем использовать их для создания нового URL:

function preserveDomain(url) {
    const protocolAndDomain = url.match(/^(https?:\/\/)([^\/]+)/);
    const pathAndQuery = url.replace(protocolAndDomain[0], '');

    return `${protocolAndDomain[1]}${protocolAndDomain[2]}${pathAndQuery}`;
}

const originalUrl = 'https://WWW.EXAMPLE.COM/THIS/is/a/PATH';
const modifiedUrl = preserveDomain(originalUrl);
console.log(modifiedUrl); // https://WWW.EXAMPLE.COM/THIS/is/a/PATH

Учет всех нюансов

Помимо обработки регистра в доменном имени, важно также учесть возможность манипуляции с другими частями URL (например, параметры запроса). После сохранения регистра, можно безопасно модифицировать путь или удалять ненужные параметры запроса, как показано в следующем примере:

function modifyUrl(url, newPath, paramsToRemove) {
    const urlObject = new URL(url);
    paramsToRemove.forEach(param => urlObject.searchParams.delete(param));
    urlObject.pathname = newPath;

    return preserveDomain(urlObject.href);
}

const updatedUrl = modifyUrl('https://WWW.EXAMPLE.COM/THIS/is/a/PATH?keep=this&remove=that', '/new/path', ['remove']);
console.log(updatedUrl); // https://WWW.EXAMPLE.COM/new/path?keep=this

Заключение

Сохранение регистра доменного имени при использовании конструктора URL в JavaScript требует небольших манипуляций, но это важно для обеспечения необходимой читаемости или соответствия бренду. В представленных решениях используется хранение оригинального URL и создание нового с помощью парсинга, чтобы сохранить нужные детали. Выбор метода зависит от конкретных требований вашей задачи, но оба приведенных варианта эффективно решают проблему сохранения регистра.

SEO Оптимизация

Для оптимизации статьи с точки зрения SEO, используйте ключевые слова, такие как "сохранение регистра URL", "JavaScript URL", "изменение пути в URL", что поможет вашей статье быть выше в поисковых системах.