Генерация URL slug из заголовка в jQuery: решение ошибок

Быстрый ответ

Для формирования части URL из заголовка (slug) с применением jQuery, используйте метод .toLowerCase(), регулярные выражения и функцию replace():

var title = "Пример Заголовка для Slug!";
var slug = title.toLowerCase()
                 .replace(/\s+/g, '-')     // Заменяем пробелы на дефисы
                 .replace(/[^\w-]+/g, ''); // Исключаем все символы, не являющиеся буквенно-цифровыми

Конечный результат будет следующим: primer-zagolovka-dlya-slug.

Разбиваем код на составные части: детальный разбор

Перейдём к анализу каждого этапа преобразования заголовка:

1. Удаление пробелов по краям: Очищаем заголовок от пробелов в начале и конце строки.

   JS

   Скопировать код

    var title = " Пример #Заголовка! Для Slug? ";
    var slug = title.trim();

   Запустить код

2. Приведение к нижнему регистру: Переводим все символы в нижний регистр.

   JS

   Скопировать код

    slug = slug.toLowerCase();

   Запустить код

3. Замена пробелов на дефисы: Пробелы заменяем на дефисы для объединения слов.

   JS

   Скопировать код

    slug = slug.replace(/\s+/g, '-');    // Получаем слова, разделённые дефисами

   Запустить код

4. Очистка URL: Исключаем все символы, запрещённые в URL.

   JS

   Скопировать код

    slug = slug.replace(/[^\w-]+/g, ''); // Оставляем только буквенно-цифровые символы и дефисы

   Запустить код

5. Нормализация дефисов: Заменяем подряд следующие дефисы на одиночный.

   JS

   Скопировать код

    slug = slug.replace(/-+/g, '-');        // Избавляемся от множественных дефисов

   Запустить код

Не забываем об особенностях: улучшаем код

Обращаем внимание на спецсимволы

Для поддержки многоязычности и акцентированных символов, замените такие знаки на их буквенно-цифровые аналоги. Например, é следует заменить на e.

function convertToSlug(text) {
  var charMap = { 'é': 'e', 'ö': 'o', 'ü': 'u' }; // Дополняйте словарь символов по необходимости
  var slug = text.replace(/[^\w ]/g, function(char) {
    return charMap[char] || char;
  })
  .toLowerCase()
  .replace(/\s+/g, '-')               // Заменяем пробелы на дефисы
  .replace(/[^\w-]+/g, '')            // Удаляем все лишнее
  .replace(/-+/g, '-');               // Оптимизируем дефисы

  return slug;
}

Подробнее об этом расскажет наш спикер на видео

Обновление slug в реальном времени: внесём динамику в процесс

Для обновления slug в реальном времени, воспользуйтесь обработчиком события keyup в jQuery.

$('#titleInput').on('keyup', function() {
  var title = $(this).val();
  var slug =title.toLowerCase()
                  .replace(/\s+/g, '-')
                  .replace(/[^\w-]+/g, '')
                  .replace(/-+/g, '-');
  $('#slugOutput').text(slug);
});

Учтите следующие аспекты

• Всегда тестируйте вашу функцию по генерации slug с применением разнообразных входных данных, чтобы удостовериться в его корректном функционировании.
• Несмотря на удобство использования jQuery для работы с DOM, это может сказаться на скорости обработки. Помните об оптимизации и активном использовании современных технологий.
• Если требуются более сложные настройки, включающие в себя работу со специальными языковыми символами или другими символами, рассмотрите возможность использования специализированных библиотек, например, "SpeakingURL".

Визуализация

Представим ваш заголовок как поезд 🚂, который проходит через различные стадии преобразования:

🚂 "Учимся программировать в 2023!" 
            |||||||||||||||||||||||||
            ↓
🛠️ Путь преобразования с помощью jQuery 🛠️
            |||||||||||||||||||||||||
            ↓
🛤️ uchimsya-programmirovat-v-2023 🛤️

В рамках данного путешествия:

• Все заглавные символы превращаются в строчные.
• Пробелы заменяются на дефисы.
• Специальные символы не допускаются на борт.

Полезные материалы

1. String.prototype.replace() – JavaScript | MDN — Официальная документация от MDN.
2. Как преобразовать заголовок в URL slug в jQuery? – Stack Overflow — Исчерпывающий источник практического опыта и знаний.
3. Объект RegExp в JavaScript — Станьте мастером регулярных выражений!
4. GitHub – pid/speakingurl: Generate a slug — Рекомендованная библиотека для работы со слагами.
5. Основы регулярных выражений | Codecademy — Курс для начинающих, желающих изучить регулярные выражения.