Tạo slug tự động bằng JavaScript và PHP
Bài đăng này đã không được cập nhật trong 5 năm
1. Tạo slug tự động bằng javascript
Ta tạo một file index.html có nội dung như sau
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Freetut.net – Chang title to slug</title>
</head>
<body>
<form>
Title : <input type="text" id="title" value="" size="50" onkeyup="ChangeToSlug();" /><br /><br />
Slug : <input type="text" id="slug" value="" size="50" />
</form>
</body>
</html>
Kết quả
Trong đó ở thẻ input có id là “title” mình có thêm sự kiện là onkeyup, sự kiện này sẽ gọi đến hàm javascript là ChangeToSlug() để lấy text từ thẻ input có id “title” và chuyển text này thành slug sau đó hiển thị nó vào thẻ có id là “slug”.
Tiếp theo ta tạo một hàm javascript có tên là ChangeToSlug() để xử lý
function ChangeToSlug()
{
var title, slug;
//Lấy text từ thẻ input title
title = document.getElementById("title").value;
//Đổi chữ hoa thành chữ thường
slug = title.toLowerCase();
//Đổi ký tự có dấu thành không dấu
slug = slug.replace(/á|à|ả|ạ|ã|ă|ắ|ằ|ẳ|ẵ|ặ|â|ấ|ầ|ẩ|ẫ|ậ/gi, 'a');
slug = slug.replace(/é|è|ẻ|ẽ|ẹ|ê|ế|ề|ể|ễ|ệ/gi, 'e');
slug = slug.replace(/i|í|ì|ỉ|ĩ|ị/gi, 'i');
slug = slug.replace(/ó|ò|ỏ|õ|ọ|ô|ố|ồ|ổ|ỗ|ộ|ơ|ớ|ờ|ở|ỡ|ợ/gi, 'o');
slug = slug.replace(/ú|ù|ủ|ũ|ụ|ư|ứ|ừ|ử|ữ|ự/gi, 'u');
slug = slug.replace(/ý|ỳ|ỷ|ỹ|ỵ/gi, 'y');
slug = slug.replace(/đ/gi, 'd');
//Xóa các ký tự đặt biệt
slug = slug.replace(/\`|\~|\!|\@|\#|\||\$|\%|\^|\&|\*|\(|\)|\+|\=|\,|\.|\/|\?|\>|\<|\'|\"|\:|\;|_/gi, '');
//Đổi khoảng trắng thành ký tự gạch ngang
slug = slug.replace(/ /gi, " - ");
//Đổi nhiều ký tự gạch ngang liên tiếp thành 1 ký tự gạch ngang
//Phòng trường hợp người nhập vào quá nhiều ký tự trắng
slug = slug.replace(/\-\-\-\-\-/gi, '-');
slug = slug.replace(/\-\-\-\-/gi, '-');
slug = slug.replace(/\-\-\-/gi, '-');
slug = slug.replace(/\-\-/gi, '-');
//Xóa các ký tự gạch ngang ở đầu và cuối
slug = '@' + slug + '@';
slug = slug.replace(/\@\-|\-\@|\@/gi, '');
//In slug ra textbox có id “slug”
document.getElementById('slug').value = slug;
}
Thêm hàm này trước thẻ sau đó chạy kiểm tra kết quả ta được như hình sau
Như vậy là ta đã giải quyết được vấn đề tạo slug, việc còn lại là gửi slug này lên server để lưu vào database. Trong hàm mình đã giải thích rõ các bước rồi nên không giải thích gì thêm.
Toàn bộ code trong file index.html như sau:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Freetut.net – Chang title to slug</title>
<script language="javascript">
function ChangeToSlug()
{
var title, slug;
//Lấy text từ thẻ input title
title = document.getElementById("title").value;
//Đổi chữ hoa thành chữ thường
slug = title.toLowerCase();
//Đổi ký tự có dấu thành không dấu
slug = slug.replace(/á|à|ả|ạ|ã|ă|ắ|ằ|ẳ|ẵ|ặ|â|ấ|ầ|ẩ|ẫ|ậ/gi, 'a');
slug = slug.replace(/é|è|ẻ|ẽ|ẹ|ê|ế|ề|ể|ễ|ệ/gi, 'e');
slug = slug.replace(/i|í|ì|ỉ|ĩ|ị/gi, 'i');
slug = slug.replace(/ó|ò|ỏ|õ|ọ|ô|ố|ồ|ổ|ỗ|ộ|ơ|ớ|ờ|ở|ỡ|ợ/gi, 'o');
slug = slug.replace(/ú|ù|ủ|ũ|ụ|ư|ứ|ừ|ử|ữ|ự/gi, 'u');
slug = slug.replace(/ý|ỳ|ỷ|ỹ|ỵ/gi, 'y');
slug = slug.replace(/đ/gi, 'd');
//Xóa các ký tự đặt biệt
slug = slug.replace(/\`|\~|\!|\@|\#|\||\$|\%|\^|\&|\*|\(|\)|\+|\=|\,|\.|\/|\?|\>|\<|\'|\"|\:|\;|_/gi, '');
//Đổi khoảng trắng thành ký tự gạch ngang
slug = slug.replace(/ /gi, "-");
//Đổi nhiều ký tự gạch ngang liên tiếp thành 1 ký tự gạch ngang
//Phòng trường hợp người nhập vào quá nhiều ký tự trắng
slug = slug.replace(/\-\-\-\-\-/gi, '-');
slug = slug.replace(/\-\-\-\-/gi, '-');
slug = slug.replace(/\-\-\-/gi, '-');
slug = slug.replace(/\-\-/gi, '-');
//Xóa các ký tự gạch ngang ở đầu và cuối
slug = '@' + slug + '@';
slug = slug.replace(/\@\-|\-\@|\@/gi, '');
//In slug ra textbox có id “slug”
document.getElementById('slug').value = slug;
}
</script>
</head>
<body>
<form>
Title : <input type="text" id="title" value="" size="50" onkeyup="ChangeToSlug();" /><br /><br />
Slug : <input type="text" id="slug" value="" size="50" />
</form>
</body>
</html>
2. Tạo slug tự động bằng PHP code
Nếu sử dụng code PHP thì thông thường giá trị của slug sẽ được tự động convert từ title của bài tin, như vậy ta sẽ cần một hàm để chuyển đổi đoạn chữ thông thường sang slug, nội dung của hàm này như sau:
function to_slug($str) {
$str = trim(mb_strtolower($str));
$str = preg_replace('/(à|á|ạ|ả|ã|â|ầ|ấ|ậ|ẩ|ẫ|ă|ằ|ắ|ặ|ẳ|ẵ)/', 'a', $str);
$str = preg_replace('/(è|é|ẹ|ẻ|ẽ|ê|ề|ế|ệ|ể|ễ)/', 'e', $str);
$str = preg_replace('/(ì|í|ị|ỉ|ĩ)/', 'i', $str);
$str = preg_replace('/(ò|ó|ọ|ỏ|õ|ô|ồ|ố|ộ|ổ|ỗ|ơ|ờ|ớ|ợ|ở|ỡ)/', 'o', $str);
$str = preg_replace('/(ù|ú|ụ|ủ|ũ|ư|ừ|ứ|ự|ử|ữ)/', 'u', $str);
$str = preg_replace('/(ỳ|ý|ỵ|ỷ|ỹ)/', 'y', $str);
$str = preg_replace('/(đ)/', 'd', $str);
$str = preg_replace('/[^a-z0-9-\s]/', '', $str);
$str = preg_replace('/([\s]+)/', '-', $str);
return $str;
}
Như vậy bạn chỉ cần sử dụng nó khi insert một tin mới hoặc update một tin mới là xong. Trường hợp bạn không lưu slug trong database thì lúc hiển thị danh sách tin ngoài frontend bạn sẽ dùng hàm này để chuyển đổi có dấu sang không dấu và có ký tự gạch ngang ở giữa, vậy là mọi chuyện được giải quyết.
3. Lời kết
bài viết tham khao của freetuts.net link: https://freetuts.net/tao-slug-tu-dong-bang-javascript-va-php-199.html
All rights reserved
