ตัวสร้าง URL Slug

URL Slug คืออะไร?

URL slug คือส่วนหนึ่งของที่อยู่เว็บที่ระบุหน้าเฉพาะในรูปแบบที่มนุษย์อ่านได้ ใน URL https://example.com/blog/my-first-post นั้น slug คือ my-first-post ตัวสร้าง slug จะแปลงชื่อหน้าหรือคำอธิบายให้กลายเป็นสตริงที่มีเฉพาะตัวอักษรพิมพ์เล็ก ตัวเลข และยัติภังค์ (หรือตัวคั่นที่เลือก) กระบวนการนี้จะลบช่องว่าง ถอด accent และ diacritics ตัดอักขระพิเศษออก และทำให้ช่องว่างหลายช่องกลายเป็นตัวคั่นเดี่ยว

การสร้าง slug เป็นขั้นตอนมาตรฐานในระบบจัดการเนื้อหา (CMS) เครื่องมือสร้างเว็บไซต์แบบสแตติก แพลตฟอร์มบล็อก และแอปพลิเคชันใดๆ ที่ดึง URL จากข้อมูลที่ผู้ใช้ป้อน WordPress, Ghost, Hugo, Next.js และ Django ล้วนมีลอจิกการสร้าง slug เนื่องจาก URL ที่อ่านได้ช่วยเพิ่มทั้งความสะดวกในการใช้งานและการปรับแต่งสำหรับเครื่องมือค้นหา slug ที่มีรูปแบบดีจะบอกผู้ใช้ว่าหน้านั้นมีเนื้อหาอะไรก่อนที่จะคลิกลิงก์

คำว่า "slug" มาจากการพิมพ์หนังสือพิมพ์ ซึ่งหมายถึงป้ายสั้นๆ ที่ใช้ระบุเรื่องราวระหว่างการผลิต ในการพัฒนาเว็บ slug ทำหน้าที่เดียวกัน: เป็นตัวระบุที่กะทัดรัด ไม่ซ้ำกัน และปลอดภัยสำหรับ URL ที่ได้จากชื่อหรือชื่อยาวกว่า เนื่องจาก slug ถูกสร้างขึ้นโดยโปรแกรม ตัวสร้าง slug ที่เชื่อถือได้จึงรับประกันความสม่ำเสมอในทุกหน้าและทุก locale

ทำไมต้องใช้ตัวสร้าง Slug นี้?

การสร้าง URL slug ด้วยมือนั้นเสี่ยงต่อข้อผิดพลาด การลืมถอด accent ทิ้ง ปล่อยให้มียัติภังค์ซ้อน หรือพลาดกรณีพิเศษของ Unicode อาจทำให้ URL เสียหายหรือดูไม่สวยงาม เครื่องมือนี้จัดการปัญหาเหล่านั้นโดยอัตโนมัติ

กรณีการใช้งานตัวสร้าง Slug

กฎการสร้าง Slug และการจัดการอักขระ

การสร้าง slug ทำตามลำดับการแปลงที่คาดเดาได้ การเข้าใจแต่ละขั้นตอนช่วยให้คุณดีบักผลลัพธ์ที่ไม่คาดคิดหรือสร้างฟังก์ชัน slugify ของคุณเอง

1. 1. การทำให้เป็นมาตรฐาน Unicode (NFD)

   แยกอักขระรวมออกเป็นอักขระหลัก + combining mark ตัวอย่างเช่น é (U+00E9) กลายเป็น e + combining acute accent (U+0301) ทำให้ diacritics สามารถลบออกได้ในขั้นตอนถัดไป
2. 2. ถอด Diacritics

   ลบอักขระทั้งหมดในบล็อก Unicode Combining Diacritical Marks (U+0300–U+036F) หลังจากขั้นตอนนี้ café กลายเป็น cafe และ Ñ กลายเป็น N
3. 3. ลบอักขระพิเศษ

   แทนที่อักขระใดๆ ที่ไม่ใช่ตัวอักษร ตัวเลข ช่องว่าง หรือยัติภังค์ด้วยช่องว่าง ซึ่งจะตัดเครื่องหมายวรรคตอน สัญลักษณ์ และอักขระที่ไม่มีเทียบเท่าใน ASCII
4. 4. ตัดและยุบช่องว่าง

   ลบช่องว่างด้านหน้าและด้านหลัง จากนั้นยุบช่องว่าง ขีดล่าง หรือยัติภังค์ที่ซ้อนกันให้เหลือตัวคั่นเดี่ยวที่เลือก
5. 5. ใช้ตัวพิมพ์และตัวคั่น

   แปลงเป็นตัวพิมพ์เล็ก (ตัวเลือก) และเชื่อมคำด้วยอักขระตัวคั่นที่เลือก: ยัติภังค์ (-), ขีดล่าง (_) หรือจุด (.)

ตารางอ้างอิงการแปลงอักขระ

ตารางด้านล่างแสดงวิธีการจัดการอักขระทั่วไประหว่างการสร้าง slug:

ตัวอย่างโค้ด

การสร้าง slug ในภาษาและเฟรมเวิร์กยอดนิยม แต่ละตัวอย่างจัดการการทำให้เป็นมาตรฐาน Unicode การลบ diacritics และการใส่ตัวคั่น

function slugify(text, separator = '-') {
  return text
    .normalize('NFD')                   // decompose accented chars
    .replace(/[\u0300-\u036f]/g, '')    // strip diacritics
    .toLowerCase()
    .replace(/[^\w\s-]/g, ' ')          // drop special chars
    .trim()
    .replace(/[\s_-]+/g, separator)     // collapse whitespace → separator

  // slugify('Café au Lait')      → "cafe-au-lait"
  // slugify('Hello World', '_')  → "hello_world"
}

// Node.js alternative using the `slugify` npm package:
// npm install slugify
// const slugify = require('slugify')
// slugify('Hello World', { lower: true, strict: true }) → "hello-world"

import re
import unicodedata

def slugify(text: str, separator: str = '-') -> str:
    """Convert text to a URL-safe slug."""
    text = unicodedata.normalize('NFD', text)
    text = text.encode('ascii', 'ignore').decode('ascii')  # strip non-ASCII
    text = text.lower()
    text = re.sub(r'[^\w\s-]', ' ', text)
    text = text.strip()
    text = re.sub(r'[\s_-]+', separator, text)
    return text

# slugify('Café au Lait')      → "cafe-au-lait"
# slugify('Hello World', '_')  → "hello_world"

# Alternative: python-slugify (pip install python-slugify)
# from slugify import slugify
# slugify('Café au Lait')  → "cafe-au-lait"

package main

import (
	"regexp"
	"strings"
	"unicode"

	"golang.org/x/text/unicode/norm"
	"golang.org/x/text/transform"
	"golang.org/x/text/runes"
)

func slugify(text string) string {
	// NFD normalize and strip diacritics
	t := transform.Chain(norm.NFD, runes.Remove(runes.In(unicode.Mn)), norm.NFC)
	result, _, _ := transform.String(t, text)

	result = strings.ToLower(result)
	re := regexp.MustCompile(`[^\w\s-]+`)
	result = re.ReplaceAllString(result, " ")
	result = strings.TrimSpace(result)
	re = regexp.MustCompile(`[\s_-]+`)
	result = re.ReplaceAllString(result, "-")
	return result
}

// slugify("Café au Lait") → "cafe-au-lait"
// slugify("Hello World")  → "hello-world"

function slugify(string $text, string $separator = '-'): string {
    // Transliterate non-ASCII characters
    $text = transliterator_transliterate(
        'Any-Latin; Latin-ASCII; Lower()', $text
    );
    // Remove anything that is not a word char, space, or hyphen
    $text = preg_replace('/[^\w\s-]/', ' ', $text);
    $text = trim($text);
    $text = preg_replace('/[\s_-]+/', $separator, $text);
    return $text;
}

// slugify('Café au Lait')      → "cafe-au-lait"
// slugify('Hello World', '_')  → "hello_world"

คำถามที่พบบ่อย