Tạo slug tự động bằng JavaScript và PHP

Việc viết lại đường dẫn nhìn thân thiện cũng là một bước khá là quan trọng trong SEO đấy, nếu đường dẫn nhìn đẹp, thân thiện thì các công cụ tìm kiếm sẽ index tốt hơn, còn nếu bạn chỉ để các dạng URL như (demo.php?id=12) thì nó không thật sự tốt lắm. Nhưng thông thường ta xây dựng chức năng các slug đó tự động tạo ra sẽ giúp người dùng chỉnh sửa lại nhanh hơn. Ví dụ bạn chỉ cần nhập tiêu đề là "học lập trình online tại freetuts" thì hệ thống tự động chuyển thành "hoc-lap-trinh-online-tai-freetuts". Nhưng để được như vậy ta phải làm gì? Có hai cách là dùng Javascript và dùng code PHP, trong bài này tôi sẽ hướng dẫn cả hai cách cho bạn.Tuy nhiên lưu ý với bạn rằng để làm được các ví dụ trong bài này thì bạn phải thật sự rành Regular Expression đã nhé.

test php

Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

1. Tạo slug tự động bằng javascript

Để các bạn rõ hơn tôi sẽ lấy một ví dụ thế này, giả sử tôi có một bài viết có tiêu đề là "Các hàm kiểm tra dữ liệu trong PHP" và id của nó là 24. Như vậy cách thông thường tôi sẽ tạo một trang detail.php và truyền id vào như sau: detail.php?id=24. Như vậy không tốt lắm, ta phải dùng htaccess để rewrite lại đường dẫn. Nhưng trong bài này tôi không đề cập đến vấn đề cách viết lại đường dẫn mà tôi chỉ đề cập đến cách chuyển tự một chuỗi có dấu sáng không dấu 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>

Chạy file này ta có được kết quả như sau

Bài viết này được đăng tại [free tuts .net]

tạo slug tự động bằng javascript

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

auto slug js 2 png

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ày này mình viết với kiến thức của mình nên thật sự vẫn chưa tối ưu và đây cũng là bài viết đầu tiên nên vẫn còn nhiều thiếu sót nên mong các bạn bỏ qua nhé. Mình viết dưới tinh thần ủng hộ bài viết cho freetuts.net thôi.

4. Bổ sung từ TheHalfHeart

Với mỗi tác giả khi đăng bài trên freetuts thì mình sẽ bổ sung những ý tưởng giải quyết tối ưu hơn. Trong bài này mình thấy hàm javascript vẫn chưa tối ưu lắm, bạn có thể xem qua hàm chuyển tiêu đề sang slug bằng javascript dưới đây:

function to_slug(str)
{
    // Chuyển hết sang chữ thường
    str = str.toLowerCase();     

    // xóa dấu
    str = str.replace(/(à|á|ạ|ả|ã|â|ầ|ấ|ậ|ẩ|ẫ|ă|ằ|ắ|ặ|ẳ|ẵ)/g, 'a');
    str = str.replace(/(è|é|ẹ|ẻ|ẽ|ê|ề|ế|ệ|ể|ễ)/g, 'e');
    str = str.replace(/(ì|í|ị|ỉ|ĩ)/g, 'i');
    str = str.replace(/(ò|ó|ọ|ỏ|õ|ô|ồ|ố|ộ|ổ|ỗ|ơ|ờ|ớ|ợ|ở|ỡ)/g, 'o');
    str = str.replace(/(ù|ú|ụ|ủ|ũ|ư|ừ|ứ|ự|ử|ữ)/g, 'u');
    str = str.replace(/(ỳ|ý|ỵ|ỷ|ỹ)/g, 'y');
    str = str.replace(/(đ)/g, 'd');

    // Xóa ký tự đặc biệt
    str = str.replace(/([^0-9a-z-\s])/g, '');

    // Xóa khoảng trắng thay bằng ký tự -
    str = str.replace(/(\s+)/g, '-');

    // xóa phần dự - ở đầu
    str = str.replace(/^-+/g, '');

    // xóa phần dư - ở cuối
    str = str.replace(/-+$/g, '');

    // return
    return str;
}

Cách dùng rất đơn giản, bạn chỉ cần làm như sau:

alert(to_slug('Tiêu đề tại đây'));

Và kết quả là tieu-de-tai-day.

Nếu có gì không đúng mong tác giả bài viết bỏ qua nhé.

Bài trước Bài tiếp

Cùng chuyên mục:

Hàm key_exists() trong PHP

Cách sử dụng key_exists() trong PHP

Hàm mysqli_fetch_row() trong PHP

Cách sử dụng mysqli_fetch_row() trong PHP

Hàm end() trong PHP

Cách sử dụng end() trong PHP

Hàm mysqli_field_count() trong PHP

Cách sử dụng mysqli_field_count() trong PHP

Hàm count() trong PHP

Cách sử dụng count() trong PHP

Hàm mysqli_field_seek() trong PHP

Cách sử dụng mysqli_field_seek() trong PHP

Hàm compact() trong PHP

Cách sử dụng compact() trong PHP

Hàm mysqli_field_tell() trong PHP

Cách sử dụng mysqli_field_tell() trong PHP

Hàm array_values() trong PHP

Cách sử dụng array_values() trong PHP

Hàm mysqli_free_result() trong PHP

Cách sử dụng mysqli_free_result() trong PHP

Hàm array_unshift() trong PHP

Cách sử dụng array_unshift() trong PHP

Hàm mysqli_get_charset() trong PHP

Cách sử dụng mysqli_get_charset() trong PHP

Hàm array_shift() trong PHP

Cách sử dụng array_shift() trong PHP

Hàm mysqli_get_client_stats() trong PHP

Cách sử dụng mysqli_get_client_stats() trong PHP

Hàm array_unique() trong PHP

Cách sử dụng array_unique() trong PHP

Hàm mysqli_get_client_version() trong PHP

Cách sử dụng mysqli_get_client_version() trong PHP

Hàm array_uintesect() trong PHP

Cách sử dụng array_uintesect() trong PHP

Hàm mysqli_get_connection_stats() trong PHP

Cách sử dụng mysqli_get_connection_stats() trong PHP

Hàm array_sum() trong PHP

Cách sử dụng array_sum() trong PHP

Hàm mysqli_get_host_info() trong PHP

Cách sử dụng mysqli_get_host_info() trong PHP