Hàm lọc dấu tiếng việt bằng js

Khi xây dựng cms việc tạo đường dẫn url trên website là việc hoàn toàn cần thiết, có nhiều cách tạo như tạo bằng code php, nhập sẵn. Phần này mình giới thiệu các bạn xây dựng hàm lọc dấu tiếng việt và tạo link url từ text bằng js
  • 10:01 21/11/2016
  • Kỳ Nhân
  • 0 Bình luận
  • 920

- Hàm lọc dấu tiếng Việt thường sử dụng nhiều trong các trường hợp xây dựng link trên website. Để xây dựng hàm lọc dấu tiếng việt và tạo đường dẫn url từ text nhập vào các bạn theo dõi phần dưới:

- Hàm lọc dấu tiếng việt bằng js

function stripUnicode(slug,target) {
    slug = slug.toLowerCase(); 
    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');
    slug = slug.replace(/\`|\~|\!|\@|\#|\||\$|\%|\^|\&|\*|\(|\)|\+|\=|\,|\.|\/|\?|\>|\<|\'|\"|\:|\;|_/gi, '');
    slug = slug.replace(/ /gi, "-");
    slug = slug.replace(/\-\-\-\-\-/gi, '-');
    slug = slug.replace(/\-\-\-\-/gi, '-');
    slug = slug.replace(/\-\-\-/gi, '-');
    slug = slug.replace(/\-\-/gi, '-');
    slug = '@' + slug + '@';
    slug = slug.replace(/\@\-|\-\@|\@/gi, '');
    $(target).val(slug);
}

- Hàm js trên truyền vào 2 biến là slug target. slug là text nhập vào để tạo link. còn target là input hiển thị khi đã tạo ra link. Để hiểu rõ hơn các bạn xem phần html bên dưới. Ví dụ có 2 input để nhập text và 1 input hiển thị ra url được tạo từ text, có 2 trường khi submit sẽ lưu vào dữ liệu ( phần này thường ứng dụng tạo link sản phẩm, bài viết, danh mục... )

<input type="text" name="text" class="text" value="">
<input type="text" name="text_url" class="text_url" value="">

- Bài toán đưa ra là khi nhập text bất kỳ vào input class text thì tạo ra url tương ứng tại input class text_url. Để làm được điều này các bạn viết hàm js

$('.text').on('focusout',function() {
        var target = '.text_url';
        var slug = $(this).val();
        stripUnicode(slug,target);            
});

- Hàm trên mình sài focusout để khi nhập xong rồi click chuột vào chỗ khác sẽ hiện ra url tại input class text_url, làm vậy hạn chế post lên server nhiều. Các bạn nếu muốn nhập phát hiện liền thì sài blur hay keypress... gì cũng được.

- Như vậy file js hoàn thiện có nội dung

function stripUnicode(slug,target) {
    slug = slug.toLowerCase(); 
    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');
    slug = slug.replace(/\`|\~|\!|\@|\#|\||\$|\%|\^|\&|\*|\(|\)|\+|\=|\,|\.|\/|\?|\>|\<|\'|\"|\:|\;|_/gi, '');
    slug = slug.replace(/ /gi, "-");
    slug = slug.replace(/\-\-\-\-\-/gi, '-');
    slug = slug.replace(/\-\-\-\-/gi, '-');
    slug = slug.replace(/\-\-\-/gi, '-');
    slug = slug.replace(/\-\-/gi, '-');
    slug = '@' + slug + '@';
    slug = slug.replace(/\@\-|\-\@|\@/gi, '');
    $(target).val(slug);
}
$(document).ready(function() {
    $('.text').on('focusout',function() {
        var target = '.text_url';
        var slug = $(this).val();
        stripUnicode(slug,target); 
    });
});

- Các bạn tạo rồi test thử nha. Hàm tạo đường dẫn từ text bằng js này ứng dụng cũng khá nhiều.