Javascript tạo slug auto từ tiêu đề

Javascript tạo slug auto từ tiêu đề

Hôm nay mình sẽ hướng dẫn các bạn tạo slug tự động với javascript 

 <div class="form-group">
                                                                <label for="title" >{{__('backend.title')}}</label>

                                                                    <input type="text"
                                                                           class="form-control form-control-lg"
                                                                           name="name" id="title" required
                                                                           onblur="createslug()"
                                                                           value="{{ old('name')}}"
                                                                           maxlength="300"
                                                                           minlength="3"
                                                                    >

                                                            </div>
                                                            <div class="form-group">
                                                                <label for="slug">{{__('backend.slug')}}</label>

                                                                <input type="text"
                                                                       class="form-control form-control-lg"
                                                                       name="slug" id="slugpost" required
                                                                       value="{{old('name')}}"
                                                                       maxlength="300"
                                                                       minlength="3"
                                                                >
                                                            </div>

Ở file javascript 

"use strict";
function createslug() {
    const name = document.getElementById('title').value;
    const slugOutput = document.getElementById("slugpost");
    const title = name.trim();
    const slug = title
        .toLowerCase() // Convert to lowercase
        .normalize("NFD") // Normalize for diacritics
        .replace(/[\u0300-\u036f]/g, "") // Remove diacritics
        .replace('đ', 'd')
        .replace(/[^a-z0-9-]+/g, "-") // Replace non-alphanumeric characters with hyphens
        .replace(/-+/g, "-") // Remove duplicate hyphens
        .replace(/^-+|-+$/g, ""); // Remove leading/trailing hyphens
    slugOutput.value = slug;
}

Như vậy chúng ta đã xong việc tạo slug tự động