Slugify ข้อความ (URL)

แปลงข้อความให้เป็น slug ที่เหมาะกับ URL โดยรองรับการแปลงเป็นตัวพิมพ์เล็ก, ตัวแบ่ง, และการลบคำที่ไม่จำเป็นแบบกำหนดเอง

พารามิเตอร์และอินพุต

แนะนำให้ใช้ - หรือ _ ความยาว 1~3 ตัวอักษร

ผลลัพธ์

ทำไมต้องใช้ Slugify?

🔍 ปรับปรุง SEO

คำสำคัญใน URL ช่วยให้เครื่องมือค้นหาเข้าใจเนื้อหาหน้าเว็บได้ดีขึ้นและเพิ่มอันดับ เช่น example.com/blog/how-to-learn-javascript ดีกว่า example.com/blog/123

👁️ อ่านง่ายและแชร์ได้ดี

ผู้ใช้สามารถรู้เนื้อหาจาก URL โดยไม่ต้องคลิก ทำให้เหมาะสำหรับการแชร์บนโซเชียลมีเดีย จดจำและพิมพ์ด้วยมือได้ง่าย

💻 เข้ากันได้กับระบบ

หลีกเลี่ยงข้อผิดพลาดจากอักขระพิเศษในชื่อไฟล์/URL ใช้งานข้ามแพลตฟอร์ม (Windows/Linux/Mac) และหลีกเลี่ยงปัญหาการเข้ารหัส

🗄️ เหมาะกับฐานข้อมูล

ใช้เป็นตัวระบุเอกลักษณ์ (เช่น ชื่อผู้ใช้หรือแท็ก) หลีกเลี่ยงความเสี่ยง SQL Injection และเหมาะสำหรับการดัชนีและค้นหา

Slugify คืออะไร?

Slug คือวลีที่ผ่านการมาตรฐานเพื่อใช้เป็น URL/ชื่อไฟล์/ตัวระบุ โดยการประมวลผลทั่วไปรวมถึงการปรับขนาดตัวอักษรให้สม่ำเสมอ ลบเครื่องหมายวรรคตอน และเชื่อมคำด้วยตัวแบ่ง

  • เน้น ASCII: ลบสัญลักษณ์และเครื่องหมายยืนให้มากที่สุด โดยเหลือเฉพาะตัวอักษร ตัวเลข และช่องว่าง
  • รองรับ Unicode: ปรับมาตรฐานอักขระส่วนใหญ่ของภาษาต่างๆ ด้วย NFKD ก่อนประมวลผล
  • เหมาะกับ URL: ผลลัพธ์จะประกอบด้วยตัวอักษร/ตัวเลขและตัวแบ่งเท่านั้น สามารถใช้ได้ทันทีในเส้นทาง

สถานการณ์การใช้งาน

URL บทความบล็อก

วิธีเรียนรู้ JavaScript?

how-to-learn-javascript

การตั้งชื่อไฟล์

เอกสารความต้องการผลิตภัณฑ์ v2.0.docx

product-requirements-v2-0.docx

ตัวระบุฐานข้อมูล

ผู้ใช้-张三

user-zhang-san

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

Q: อักขระจีนจะถูกจัดการอย่างไร?

A: โดยค่าเริ่มต้นจะลบสัญลักษณ์สระออกและคงไว้เฉพาะตัวอักษรพินอิน ตัวอักษรจีนล้วนอาจกลายเป็นค่าว่าง แนะนำให้แปลงเป็นพินอินด้วยตนเองก่อนใช้ slugify หรือใช้เครื่องมือแปลงพินอินจีน

Q: ทำไมผลลัพธ์ของฉันถึงว่างเปล่า?

A: อาจเกิดจากข้อความที่ป้อนเป็นสัญลักษณ์/เครื่องหมายวรรคตอน/ช่องว่างทั้งหมด หรือเมื่อเปิดการกรองคำหยุดแล้วไม่มีคำที่เหลืออยู่ ลองปิดตัวเลือกคำหยุดหรือปรับเนื้อหาที่ป้อน

Q: ควรใช้ - หรือ _ เป็นตัวแบ่ง?

A: เพื่อ SEO แนะนำให้ใช้ - (ไฮฟัน) เพราะ Google จะมองว่าเป็นช่องว่าง; _ (ขีดล่าง) จะถูกมองว่าเป็นตัวเชื่อม ซึ่งไม่เหมาะสำหรับการแยกคำ สำหรับชื่อไฟล์สามารถเลือกได้ตามต้องการ

Q: Slug มีข้อจำกัดเรื่องความยาวหรือไม่?

A: ไม่มีข้อจำกัดทางเทคนิค แต่แนะนำให้คงไว้ไม่เกิน 50 ตัวอักษร เพื่อความสะดวกในการแสดง URL และ SEO Slug ที่ยาวเกินไปอาจถูกเครื่องมือค้นหาตัดทอน

แนวทางที่ดีที่สุด

แนวทางที่แนะนำ

  • รักษาความสั้น (แนะนำ < 50 ตัวอักษร)
  • หลีกเลี่ยงอักขระพิเศษ ใช้ตัวอักษร/ตัวเลข/ตัวแบ่งเท่านั้น
  • แปลงเป็นตัวพิมพ์เล็กเพื่อหลีกเลี่ยงปัญหาความไวต่อตัวพิมพ์
  • ตัดคำหยุดออกเพื่อเพิ่มความหนาแน่นของความหมาย

สิ่งที่ควรหลีกเลี่ยง

  • อย่ารวมข้อมูลที่ละเอียดอ่อน (เช่น ID, อีเมล, รหัสผ่าน)
  • อย่าใช้อักขระพิเศษ (เช่น @#$%^&*)
  • อย่าเก็บช่องว่างหรือตัวแบ่งที่ติดกัน
  • อย่าใช้คำซ้ำกันหลายครั้ง

คำอธิบายทางเทคนิค

การมาตรฐาน Unicode:

ใช้การแยกแบบ NFKD + ตัดสัญลักษณ์ประกอบ (\p{M}) เพื่อแปลง Café เป็น Cafe รองรับอักขระภาษาละตินส่วนใหญ่

รายการคำหยุด:

อิงจากคำภาษาอังกฤษที่พบบ่อย (a/an/the/and/or/of/to/in/on/for/at/by/with) สามารถขยายเพิ่มเติมได้ ต้องจัดการคำหยุดภาษาจีนแยกต่างหาก

ความเข้ากันได้กับเบราว์เซอร์:

ต้องรองรับ ES6+ และการแสดงผลรีกซ์ Unicode (\p{...}) เบราว์เซอร์สมัยใหม่ทั้งหมด (Chrome 64+, Firefox 78+, Safari 11.1+) รองรับอยู่แล้ว

วิธีการสร้าง Slug ผ่านภาษาการเขียนโปรแกรม

JavaScript

function slugify(text) {
  return text
    .toLowerCase()
    .normalize("NFKD")
    .replace(/[\u0300-\u036f]/g, "")
    .replace(/[^\w\s-]/g, "")
    .trim()
    .replace(/[\s_-]+/g, "-")
    .replace(/^-+|-+$/g, "");
}

PHP

function slugify($text) {
  $text = mb_strtolower($text);
  $text = iconv("UTF-8", "ASCII//TRANSLIT", $text);
  $text = preg_replace("/[^\w\s-]/", "", $text);
  $text = preg_replace("/[\s_-]+/", "-", $text);
  return trim($text, "-");
}

Python

import re
import unicodedata

def slugify(text):
    text = text.lower()
    text = unicodedata.normalize("NFKD", text)
    text = text.encode("ascii", "ignore").decode("ascii")
    text = re.sub(r"[^\w\s-]", "", text)
    text = re.sub(r"[\s_-]+", "-", text)
    return text.strip("-")

Go

import (
    "regexp"
    "strings"
    "golang.org/x/text/unicode/norm"
)

func Slugify(text string) string {
    text = strings.ToLower(text)
    text = norm.NFKD.String(text)
    re := regexp.MustCompile(`[^\w\s-]`)
    text = re.ReplaceAllString(text, "")
    re = regexp.MustCompile(`[\s_-]+`)
    text = re.ReplaceAllString(text, "-")
    return strings.Trim(text, "-")
}

Ruby

require "unicode"

def slugify(text)
  text = text.downcase
  text = Unicode.nfkd(text).gsub(/[^\x00-\x7F]/, "")
  text = text.gsub(/[^\w\s-]/, "")
  text = text.gsub(/[\s_-]+/, "-")
  text.strip.gsub(/^-+|-+$/, "")
end

Java

import java.text.Normalizer;

public static String slugify(String text) {
    text = text.toLowerCase();
    text = Normalizer.normalize(text, Normalizer.Form.NFKD);
    text = text.replaceAll("[^\\w\\s-]", "");
    text = text.replaceAll("[\\s_-]+", "-");
    return text.replaceAll("^-+|-+$", "");
}