Cách tạo slug chỉ bằng một đoạn mã TypeScript

Khi phát triển ứng dụng web, việc tạo slug là một bước quan trọng trong việc tối ưu hóa URL, giúp các đường dẫn trở nên thân thiện với người dùng và dễ đọc hơn. Slug là một chuỗi ký tự không dấu, viết thường, được tách bằng dấu gạch ngang, đại diện cho một chuỗi văn bản cụ thể (thường là tiêu đề bài viết hoặc tên sản phẩm). Bài viết này sẽ hướng dẫn bạn cách tạo slug bằng TypeScript.

Giới thiệu về slug và các vấn đề cần xử lý

Slug thường được sử dụng để tạo các URL thân thiện và dễ nhớ cho người dùng. Khi tạo slug, có một số vấn đề chính cần giải quyết:

Chuyển đổi các ký tự có dấu sang không dấu.
Chuyển đổi chuỗi thành chữ thường.
Loại bỏ các ký tự đặc biệt.
Thay thế khoảng trắng bằng dấu gạch ngang.
Loại bỏ các dấu gạch ngang thừa.

Dưới đây là cách giải quyết từng vấn đề trên thông qua đoạn mã TypeScript.

Mã TypeScript để tạo slug

Định nghĩa hàm slugify

Hàm slugify được định nghĩa để nhận vào một chuỗi (str) và trả về một slug. Dưới đây là đoạn mã:

export function slugify(str: string): string {
  let formattedSlug = str.toLowerCase();

  const accentMapping: { [key: string]: string } = {
    á: "a",
    à: "a",
    ă: "a",
    ắ: "a",
    ằ: "a",
    ẵ: "a",
    ẳ: "a",
    â: "a",
    ấ: "a",
    ầ: "a",
    ẫ: "a",
    ẩ: "a",
    ã: "a",
    ả: "a",
    ạ: "a",
    ặ: "a",
    ậ: "a",
    đ: "d",
    é: "e",
    è: "e",
    ê: "e",
    ế: "e",
    ề: "e",
    ễ: "e",
    ể: "e",
    ẽ: "e",
    ẻ: "e",
    ẹ: "e",
    ệ: "e",
    í: "i",
    ì: "i",
    ĩ: "i",
    ỉ: "i",
    ị: "i",
    ó: "o",
    ò: "o",
    ô: "o",
    ố: "o",
    ồ: "o",
    ỗ: "o",
    ổ: "o",
    õ: "o",
    ỏ: "o",
    ơ: "o",
    ớ: "o",
    ờ: "o",
    ỡ: "o",
    ở: "o",
    ợ: "o",
    ọ: "o",
    ộ: "o",
    ú: "u",
    ù: "u",
    ũ: "u",
    ủ: "u",
    ư: "u",
    ứ: "u",
    ừ: "u",
    ữ: "u",
    ử: "u",
    ự: "u",
    ụ: "u",
    ý: "y",
    ỳ: "y",
    ỹ: "y",
    ỷ: "y",
    ỵ: "y",
  };

  for (const [accentedChar, replacement] of Object.entries(accentMapping)) {
    const regex = new RegExp(accentedChar, "g");
    formattedSlug = formattedSlug.replace(regex, replacement);
  }

  formattedSlug = formattedSlug
    .replaceAll(/[^0-9a-z\\s-]/g, "") // Loại bỏ các ký tự không phải là chữ cái, số, khoảng trắng hoặc dấu gạch ngang.
    .replaceAll(/\\s+/g, "-") // Thay thế khoảng trắng bằng dấu gạch ngang.
    .replaceAll(/-+/g, "-") // Loại bỏ các dấu gạch ngang lặp lại.
    .replaceAll(/^-+|-+$/g, ""); // Loại bỏ dấu gạch ngang ở đầu và cuối chuỗi.

  return formattedSlug;
}

Giải thích mã

Chuyển đổi thành chữ thường:
```
let formattedSlug = str.toLowerCase();
```
Đầu tiên, chuỗi đầu vào được chuyển thành chữ thường để đảm bảo tính nhất quán.
Chuyển ký tự có dấu sang không dấu:
```
const accentMapping: { [key: string]: string } = {
  /* Cho phép các ký tự */
};
```
Một đối tượng (accentMapping) được tạo để chuyển các ký tự có dấu sang ký tự không dấu của chúng. Điều này đặc biệt quan trọng khi xử lý các ký tự trong Tiếng Việt.

Thay thế ký tự có dấu:

for (const [accentedChar, replacement] of Object.entries(accentMapping)) {
  const regex = new RegExp(accentedChar, "g");
  formattedSlug = formattedSlug.replace(regex, replacement);
}

Vòng lặp này duyệt qua tất cả các ký tự có dấu và thay thế chúng bằng ký tự không dấu tương ứng trong chuỗi.

Loại bỏ ký tự đặc biệt:
```
formattedSlug = formattedSlug.replaceAll(/[^0-9a-z\\s-]/g, "");
```
Sử dụng biểu thức chính quy để loại bỏ tất cả các ký tự không phải là chữ cái, số, khoảng trắng hoặc dấu gạch ngang.
Thay thế khoảng trắng bằng dấu gạch ngang:
```
formattedSlug = formattedSlug.replaceAll(/\\s+/g, "-");
```
Biểu thức chính quy này thay thế tất cả các khoảng trắng bằng dấu gạch ngang.
Loại bỏ các dấu gạch ngang thừa:
```
formattedSlug = formattedSlug.replaceAll(/-+/g, "-").replaceAll(/^-+|-+$/g, "");
```
Hai bước này loại bỏ các dấu gạch ngang thừa: dấu gạch ngang lặp lại và dấu gạch ngang ở đầu hoặc cuối chuỗi.
Kết quả cuối cùng: Sau khi hoàn tất các bước trên, chuỗi đã được chuyển đổi thành một slug chuẩn và được trả về.

Ví dụ sử dụng

Dưới đây là một vài ví dụ về cách hàm slugify hoạt động:

console.log(slugify("Tiêu đề bài viết đẹp!")); // Kết quả: "tieu-de-bai-viet-dep"
console.log(slugify("Tạo Slug từ ký tự đặc biệt #!@")); // Kết quả: "tao-slug-tu-ky-tu-dac-biet"
console.log(slugify("Cảm ơn bạn đã theo dõi.")); // Kết quả: "cam-on-ban-da-theo-doi"

Kết luận

Việc tạo slug trong ứng dụng web là một bước quan trọng giúp tối ưu hóa trải nghiệm người dùng và thân thiện với công cụ tìm kiếm (SEO). Đoạn mã TypeScript trên cung cấp một cách tiếp cận đơn giản nhưng hiệu quả để tạo slug từ chuỗi văn bản, xử lý cả các ký tự có dấu đặc biệt trong tiếng Việt.

Hy vọng bài viết này đã giúp bạn hiểu rõ hơn về cách hoạt động của hàm slugify và cách bạn có thể sử dụng nó trong dự án của mình.