JavaScript Slug Generator: Vanilla JS, Node.js ve Kütüphane Çözümleri

JavaScript'te slug oluşturmanın tüm yöntemlerini öğrenin. Vanilla JS fonksiyonları, slugify ve limax kütüphaneleri, React ve Vue.js entegrasyonu.

JavaScript'te Slug Oluşturma

Modern web uygulamalarında slug oluşturmak hem frontend hem de backend tarafında sıkça ihtiyaç duyulan bir işlemdir. Bu rehberde tüm yöntemleri inceleyeceğiz.

Vanilla JavaScript Slug Fonksiyonu

Hiçbir kütüphane kullanmadan temel slug fonksiyonu:

function slugify(text) {
  return text
    .toString()
    .normalize('NFD')                   // Unicode normalizasyonu
    .replace(/[\u0300-\u036f]/g, '')    // Aksanları kaldır
    .toLowerCase()                       // Küçük harfe çevir
    .trim()                              // Boşlukları kırp
    .replace(/\s+/g, '-')               // Boşlukları tire ile değiştir
    .replace(/[^\w\-]+/g, '')           // Alfanümerik olmayan karakterleri kaldır
    .replace(/\-\-+/g, '-')             // Çoklu tireleri tek tireye indir
    .replace(/^-+/, '')                  // Baştaki tireleri kaldır
    .replace(/-+$/, '');                 // Sondaki tireleri kaldır
}

// Kullanım
console.log(slugify('Merhaba Dünya!'));
// Çıktı: merhaba-dunya

Türkçe Karakter Desteği

Türkçe karakterleri doğru şekilde dönüştüren gelişmiş fonksiyon:

function turkishSlugify(text) {
  const charMap = {
    'ş': 's', 'Ş': 's',
    'ğ': 'g', 'Ğ': 'g',
    'ü': 'u', 'Ü': 'u',
    'ö': 'o', 'Ö': 'o',
    'ı': 'i', 'İ': 'i',
    'ç': 'c', 'Ç': 'c'
  };
  
  let slug = text.toString();
  
  // Türkçe karakterleri dönüştür
  for (const [key, value] of Object.entries(charMap)) {
    slug = slug.replace(new RegExp(key, 'g'), value);
  }
  
  return slug
    .toLowerCase()
    .trim()
    .replace(/[^a-z0-9\s-]/g, '')
    .replace(/\s+/g, '-')
    .replace(/-+/g, '-');
}

// Test
console.log(turkishSlugify('Türkiye\'nin Güzel Şehirleri'));
// Çıktı: turkiyenin-guzel-sehirleri

NPM Kütüphaneleri

1. slugify Kütüphanesi

En popüler slug kütüphanesi:

// Kurulum
npm install slugify

// Kullanım
import slugify from 'slugify';

const slug = slugify('Merhaba Dünya', {
  lower: true,      // Küçük harf
  strict: true,     // Özel karakterleri kaldır
  locale: 'tr'      // Türkçe locale
});

console.log(slug); // merhaba-dunya

// Özel karakter değiştirme
slugify.extend({'₺': 'TL'});
const price = slugify('100₺ Fiyat');
console.log(price); // 100tl-fiyat

2. limax Kütüphanesi

Çoklu dil desteği için:

// Kurulum
npm install limax

// Kullanım
import slug from 'limax';

// Temel kullanım
console.log(slug('Merhaba Dünya')); // merhaba-dunya

// Çince/Japonca için
console.log(slug('你好世界')); // ni-hao-shi-jie

// Özel ayırıcı
console.log(slug('Hello World', { separator: '_' })); // hello_world

React'te Slug Kullanımı

import { useState, useMemo } from 'react';
import slugify from 'slugify';

function PostForm() {
  const [title, setTitle] = useState('');
  
  const slug = useMemo(() => {
    return slugify(title, { lower: true, strict: true });
  }, [title]);
  
  return (
    
       setTitle(e.target.value)}
        placeholder="Başlık"
      />
      
    
  );
}

Vue.js'te Slug Kullanımı

<template>
  <div>
    <input v-model="title" placeholder="Başlık" />
    <input :value="slug" readonly placeholder="Slug" />
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import slugify from 'slugify';

const title = ref('');

const slug = computed(() => {
  return slugify(title.value, { lower: true, strict: true });
});
</script>

Node.js Backend'de Slug

// Express.js örneği
import express from 'express';
import slugify from 'slugify';

const app = express();

app.post('/api/posts', async (req, res) => {
  const { title, content } = req.body;
  
  // Benzersiz slug oluştur
  let slug = slugify(title, { lower: true, strict: true });
  
  // Veritabanında kontrol et
  let counter = 1;
  let uniqueSlug = slug;
  
  while (await Post.findOne({ slug: uniqueSlug })) {
    uniqueSlug = `${slug}-${counter}`;
    counter++;
  }
  
  const post = await Post.create({
    title,
    slug: uniqueSlug,
    content
  });
  
  res.json(post);
});

TypeScript Tip Tanımları

interface SlugOptions {
  separator?: string;
  lowercase?: boolean;
  strict?: boolean;
  locale?: string;
}

function createSlug(text: string, options: SlugOptions = {}): string {
  const {
    separator = '-',
    lowercase = true,
    strict = true,
    locale = 'en'
  } = options;
  
  let slug = text.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
  
  if (lowercase) {
    slug = slug.toLowerCase();
  }
  
  if (strict) {
    slug = slug.replace(/[^a-zA-Z0-9\s]/g, '');
  }
  
  return slug.trim().replace(/\s+/g, separator);
}

Sonuç

JavaScript'te slug oluşturmak için vanilla fonksiyonlardan npm kütüphanelerine kadar birçok seçenek vardır. Projenizin ihtiyaçlarına göre en uygun yöntemi seçin.