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