URL slug oluşturma, slug düzenleme
Slug düzenleme - Nasıl yaparım?
Merhaba, konu başlığından slug oluşturuyorum ama bazen konu başlığı uzun olunca slugda uzun oluyor.
Ve slugda istemediğim bağlaç ifadeleride yer alıyor.
Bilgileri veri tabanına submit etmeden önce başlığa göre oluşan slug'ı nasıl görüntüler ve müdahale edip kısaltabilirim.
Otomatik kısaltma istemiyorum. Kendim düzenlemek istiyorum.
Örnek:
Başlık: URL slug oluşturma ve slug düzenleme de yapılan hatalar ve çözüm yolları
Slug: url-slug-olusturma-ve-slug-duzenleme-de-yapilan-hatalar-ve-cozum-yollari
Formu veritabanına göndermeden önce (submit öncesi) düzenlemek istediğim şekil ise:
Slug: slug-olusturma-duzenleme-hatalar-cozumu
Sıfırdan slug ı elle yazmak istemiyorum hazırda bunun için seflink fonksiyonum var. Sadece bu örnekteki gibi düzenleme gerekirse Gönder butonuna basmadan müdahale etmek istiyorum.
Soru hatalı mı? 👎
Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!
Cevaplar (4)
permalink için kullandığın php fonksiyonunun benzerini javascript için yazman lazım ilk olarak. Uğraşmaman için sana işe yarar bir fonksiyon verelim.
function slugify(text) {
return text
.toUpperCase()
.toLowerCase()
.normalize('NFD')
.trim()
.replace(/\s+/g, '-')
.replace(/[^\w\-]+/g, '');
}
Şimdi artık yapacağın başlığı yazdığın input'u dinleyerek değeri bu fonksiyondan geçirip url için oluşturduğun input'a değer olarak basmak.
<form action="" method="post">
<input type="text" id="title-input" placeholder="Başlık" name="baslik"> <br>
<input type="text" id="url-input" name="url" placeholder="Slug">
</form>
<script>
function slugify(text) {
return text
.toUpperCase()
.toLowerCase()
.normalize('NFD')
.trim()
.replace(/\s+/g, '-')
.replace(/[^\w\-]+/g, '');
}
const title = document.getElementById('title-input'),
url = document.getElementById('url-input');
title.addEventListener('keyup', (e) => {
url.value = slugify(e.target.value);
});
</script>
Artık php tarafında şunu kontrol edeceksin. Eğer url gönderilmemişse php tarafında url'i başlıktan oluşturacaksın, eğer url gönderilmişse onu kullanacaksın ancak güvenlik kontrolü için onuda yine kendi slug fonksiyonundan geçirirsen daha garanti olacaktır, malum clint-side işlem olduğu için değiştirilebilir değerler daha garanti olur işin.
