Slugify ข้อความ (URL)
แปลงข้อความให้เป็น slug ที่เหมาะกับ URL โดยรองรับการแปลงเป็นตัวพิมพ์เล็ก, ตัวแบ่ง, และการลบคำที่ไม่จำเป็นแบบกำหนดเอง
ทำไมต้องใช้ 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: ผลลัพธ์จะประกอบด้วยตัวอักษร/ตัวเลขและตัวแบ่งเท่านั้น สามารถใช้ได้ทันทีในเส้นทาง
คำถามที่พบบ่อย
Q: อักขระจีนจะถูกจัดการอย่างไร?
A: โดยค่าเริ่มต้นจะลบสัญลักษณ์สระออกและคงไว้เฉพาะตัวอักษรพินอิน ตัวอักษรจีนล้วนอาจกลายเป็นค่าว่าง แนะนำให้แปลงเป็นพินอินด้วยตนเองก่อนใช้ slugify หรือใช้เครื่องมือแปลงพินอินจีน
Q: ทำไมผลลัพธ์ของฉันถึงว่างเปล่า?
A: อาจเกิดจากข้อความที่ป้อนเป็นสัญลักษณ์/เครื่องหมายวรรคตอน/ช่องว่างทั้งหมด หรือเมื่อเปิดการกรองคำหยุดแล้วไม่มีคำที่เหลืออยู่ ลองปิดตัวเลือกคำหยุดหรือปรับเนื้อหาที่ป้อน
Q: ควรใช้ - หรือ _ เป็นตัวแบ่ง?
A: เพื่อ SEO แนะนำให้ใช้ - (ไฮฟัน) เพราะ Google จะมองว่าเป็นช่องว่าง; _ (ขีดล่าง) จะถูกมองว่าเป็นตัวเชื่อม ซึ่งไม่เหมาะสำหรับการแยกคำ สำหรับชื่อไฟล์สามารถเลือกได้ตามต้องการ
Q: Slug มีข้อจำกัดเรื่องความยาวหรือไม่?
A: ไม่มีข้อจำกัดทางเทคนิค แต่แนะนำให้คงไว้ไม่เกิน 50 ตัวอักษร เพื่อความสะดวกในการแสดง URL และ SEO Slug ที่ยาวเกินไปอาจถูกเครื่องมือค้นหาตัดทอน
แนวทางที่ดีที่สุด
แนวทางที่แนะนำ
- ✓ รักษาความสั้น (แนะนำ < 50 ตัวอักษร)
- ✓ หลีกเลี่ยงอักขระพิเศษ ใช้ตัวอักษร/ตัวเลข/ตัวแบ่งเท่านั้น
- ✓ แปลงเป็นตัวพิมพ์เล็กเพื่อหลีกเลี่ยงปัญหาความไวต่อตัวพิมพ์
- ✓ ตัดคำหยุดออกเพื่อเพิ่มความหนาแน่นของความหมาย
สิ่งที่ควรหลีกเลี่ยง
- ✗ อย่ารวมข้อมูลที่ละเอียดอ่อน (เช่น ID, อีเมล, รหัสผ่าน)
- ✗ อย่าใช้อักขระพิเศษ (เช่น @#$%^&*)
- ✗ อย่าเก็บช่องว่างหรือตัวแบ่งที่ติดกัน
- ✗ อย่าใช้คำซ้ำกันหลายครั้ง
คำอธิบายทางเทคนิค
ใช้การแยกแบบ 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("^-+|-+$", "");
}