Как добавить автоматически генерируемый slug с помощью JavaScript.

Slug (слаг) - это строка, которая используется в URL-адресе для идентификации конкретной страницы или публикации на веб-сайте. Слаг состоит из набора символов, которые легко читаются и как правило описывают  содержимое ресурса.

Строка слаг должна соответствовать этим требованиям:

1. Состоит из строчных буквенно-цифровых символов латинского алфавита (a-z, 0-9) и дефисов (-).
2. Не содержит пробелов или других специальных символов.
3. Уникальна в контексте веб-сайта или приложения.

Например, рассмотрим следующий URL https://codeincube.ru/kak-dobavit-avtomaticheski-generiruemyj-slug-s-pomoschyu-javascript  - это слаг, который идентифицирует конкретный пост в блоге.

Слаг с помощью простого JavaScript

В JavaScript вы можете преобразовать строку в удобный для URL-адресов формат, заменив все специальные символы и пробелы дефисами или подчёркиваниями. Вот пример функции, которая может это сделать:

// Получаем первый элемент с именем 'title'
var titleElement = document.getElementsByName('title')[0];

// Проверяем, что элемент title существует, прежде чем добавлять обработчик событий
if (titleElement) {
    titleElement.addEventListener('keyup', function() {
        // Получаем первый элемент с именем 'slug'
        var slugElement = document.getElementsByName('slug')[0];
        
        // Проверяем, что поле title не пустое перед тем, как генерировать slug
        var titleValue = this.value.trim();
        if (titleValue) {
            slugElement.value = generate_url(titleValue);
        } else {
            slugElement.value = '';  // Очищаем slug, если title пустое
        }
    });
}

// Функция для генерации slug из строки
function generate_url(str) {
    var url = str.replace(/[\s]+/gi, '-');  // Заменяем пробелы на дефисы
    url = translit(url);                    // Переводим в транслит
    url = url.replace(/[^0-9a-z_\-]+/gi, '').toLowerCase();  // Оставляем только разрешённые символы
    return url;
}

// Функция транслитерации русских символов в латиницу
function translit(str) {
    var ru = ("А-а-Б-б-В-в-Ґ-ґ-Г-г-Д-д-Е-е-Ё-ё-Є-є-Ж-ж-З-з-И-и-І-і-Ї-ї-Й-й-К-к-Л-л-М-м-Н-н-О-о-П-п-Р-р-С-с-Т-т-У-у-Ф-ф-Х-х-Ц-ц-Ч-ч-Ш-ш-Щ-щ-Ъ-ъ-Ы-ы-Ь-ь-Э-э-Ю-ю-Я-я").split("-");
    var en = ("A-a-B-b-V-v-G-g-G-g-D-d-E-e-E-e-E-e-ZH-zh-Z-z-I-i-I-i-I-i-J-j-K-k-L-l-M-m-N-n-O-o-P-p-R-r-S-s-T-t-U-u-F-f-H-h-TS-ts-CH-ch-SH-sh-SCH-sch-'-'-Y-y-'-'-E-e-YU-yu-YA-ya").split("-");
    
    var res = '';
    for (var i = 0, l = str.length; i < l; i++) {
        var s = str.charAt(i), n = ru.indexOf(s);
        if (n >= 0) {
            res += en[n];
        } else {
            res += s;
        }
    }
    return res;
}

Слаг с помощью библиотеки JavaScript

1. sindresorhus/slugify - библиотека подойдет для создания URL-адресов, имен файлов и идентификаторов. Поддерживает большинство основных языков, включая немецкий (с умлаутами), вьетнамский, арабский, русский и другие.

const slugify = require('@sindresorhus/slugify');

slugify('I ♥ JavaScript'); // i-love-javascript
slugify('  Déjà Vu!  '); // deja-vu
slugify('fooBar 123 $#%'); // foo-bar-123
slugify('я люблю JavaScript'); // ya-lyublyu-javascript

slugify('JAVA and script', {separator: '_'}); // java_and_script
slugify('JAVA and script', {separator: ''}); // javaandscript

2. simov/slugify - эта библиотека включает в себя простую функцию преобразования в нижний регистр на чистом JavaScript ES2015, не имеет зависимостей, преобразует символы в их английские эквиваленты, работает в браузере (window.slugify) и в загрузчиках модулей AMD/CommonJS.

const slugify = require('slugify');

slugify('Простая строка'); // prostaya-stroka

// вы можете указать любой разделитель вместо '-' 
slugify('Простая строка', '_');  // prostaya_stroka

Слаг для Laravel с помощью библиотеки JavaScript

StuDocu/Laravel-Slug - Если вы используете Laravel с помощью этой маленькой библиотеки вы легко можете добавить слагификацию.