Chuyển từ Tiếng Việt có dấu về chữ cái Latin trong JavaScript

Table of contents

Bài viết này hướng dẫn cách chuyển từ Tiếng Việt có dấu về chữ cái Latin trong JavaScript 🇻🇳🇻🇳🇻🇳.

🇻🇳 Convert Vietnamese words to Latin alphabet 🇻🇳

🇻🇳 Language: Vietnamese 🇻🇳

Giới thiệu

Trong thời gian làm việc với JavaScript để phục vụ cho frontend, mình nhận ra bản thân cần xoá đi dấu Tiếng Việt trong nhiều trường hợp. Mỗi lần như thế mình lại google cách xoá dấu, copy lại đoạn mã nguồn đó đưa vào project. Việc này khá bất tiện và không thể mở rộng được nếu sau này cần chỉnh sửa. Do đó mình quyết định viết thành một thư viện và đóng gói đưa lên NPM, để có thể tái sử dụng và cập nhật dễ dàng. Trong đó mình cũng đã mở rộng thêm một số option cho thư viện.

NPM Package

Như đã nói ở phần Giới thiệu, mình đã tạo một repository trên Github tại đây và publish thành package jsrmvi.

Trong bài viết này, mình sẽ giới thiệu cách setup và sử dụng thư viện này.

Installation

Ở bước cài đặt, 2 môi trường được sử dụng chủ yếu là dùng như NodeJS (như CommonJS, Webpack, Babel, React, Angular,…) hoặc sử dụng trực tiếp trong Browser (như các thư viện Bootstrap, jQuery, …). Đối với mỗi môi trường sẽ có cách setup riêng, cũng khá đơn giản và quen thuộc.

Node.JS

Trong NodeJS, chỉ cần install thêm dependency bằng lệnh npm hoặc yarn.

npm install --save jsrmvi
# or
yarn add jsrmvi
Browser

Nếu bạn thêm trực tiếp thư viện vào HTML (sử dụng thẻ <script />), các bạn có thể download trực tiếp file jsrmvi.min.js ở đây.

Ngoài ra ta cũng có thể sử dụng các CDN có sẵn cho NPM như unpkg hoặc jsDelivr.

<!-- Use CDN -->
<!-- use jsDelivr -->
<script src="https://cdn.jsdelivr.net/jsrmvi/dist/jsrmvi.min.js"></script>
<!-- or use unpkg -->
<script src="https://unpkg.com/jsrmvi/dist/jsrmvi.min.js"></script>

<!-- or download file directly -->
<script src="[path/to/dist]/jsrmvi.min.js"></script>

Usage

Node.JS

Trong NodeJS, nếu môi trường setup của bạn có support ES6 syntax, chúng ta có thể dùng import, nếu không thì sử dụng require như thông thường.

Syntax require
const jsrmvi = require('jsrmvi');
const { removeVI, DefaultOption } = jsrmvi;
// or
const { removeVI, DefaultOption } = require('jsrmvi');

// Default option used in function removeVI()
console.log(DefaultOption);
/*
{
  ignoreCase: true,
  replaceSpecialCharacters: true,
  concatBy: '-'
}
*/
Syntax import
import jsrmvi from 'jsrmvi';
const { removeVI, DefaultOption } = jsrmvi;
// or
import { removeVI, DefaultOption } from 'jsrmvi';

Browser

Sau khi file jsrmvi.min.js được load, biến jsrmvi sẽ được export global vào window. Chúng ta có thể gọi jsrmvi bằng window.jsrmvi hoặc gọi trực tiếp jsrmvi tuỳ ngữ cảnh.

<script src="https://unpkg.com/jsrmvi/dist/jsrmvi.min.js"></script>

<script>
  const { removeVI, DefaultOption } = jsrmvi;

  console.log(jsrmvi);
  console.log(DefaultOption);

  (() => {
    const { jsrmvi } = window;
    console.log(jsrmvi);
  })()
</script>

Example

Dưới đây là một số ví dụ sử dụng:

  • Đối với một câu:
const text01 = 'Không người thân, một mình chiến đấu với Covid-19, nam phi công người Anh chấp nhận hôn mê, đặt trọn niềm tin vào bác sĩ Việt Nam.';
console.log('Sentence');
console.log(text01);
console.log(removeVI(text01));
console.log(removeVI(text01, { ignoreCase: false }));
console.log(removeVI(text01, { ignoreCase: false, replaceSpecialCharacters: false }));
console.log(removeVI(text01, { concatBy: '+' }));
console.log(removeVI(text01, { replaceSpecialCharacters: false }));
/*
Sentence
Không người thân, một mình chiến đấu với Covid-19, nam phi công người Anh chấp nhận hôn mê, đặt trọn niềm tin vào bác sĩ Việt Nam.
khong-nguoi-than-mot-minh-chien-dau-voi-covid-19-nam-phi-cong-nguoi-anh-chap-nhan-hon-me-dat-tron-niem-tin-vao-bac-si-viet-nam
Khong-nguoi-than-mot-minh-chien-dau-voi-Covid-19-nam-phi-cong-nguoi-Anh-chap-nhan-hon-me-dat-tron-niem-tin-vao-bac-si-Viet-Nam
Khong nguoi than, mot minh chien dau voi Covid-19, nam phi cong nguoi Anh chap nhan hon me, dat tron niem tin vao bac si Viet Nam.
khong+nguoi+than+mot+minh+chien+dau+voi+covid+19+nam+phi+cong+nguoi+anh+chap+nhan+hon+me+dat+tron+niem+tin+vao+bac+si+viet+nam
khong nguoi than, mot minh chien dau voi covid-19, nam phi cong nguoi anh chap nhan hon me, dat tron niem tin vao bac si viet nam.
*/
  • Đối với các giá trị đặc biệt:
console.log('Null or empty text:');
console.log('1: ' + removeVI());
console.log('2: ' + removeVI(null));
console.log('3: ' + removeVI(undefined));
console.log('4: ' + removeVI(''));
console.log();
/*
Null or empty text:
1:
2:
3:
4:
*/
  • Đối với một đoạn văn:
const text02 = fs.readFileSync(path.join(__dirname, '../samples/text.txt'), { encoding: 'utf8' });
console.log('Paragraph');
console.log(text02);
console.log(removeVI(text02, { ignoreCase: false, replaceSpecialCharacters: false }));
console.log();
/*
Paragraph
Trong cơn mưa chiều 22/5, các bác sĩ Bệnh viện Bệnh Nhiệt đới TP.HCM và Bệnh viện Chợ Rẫy khẩn trương vận chuyển bệnh nhân 91 (nam phi công người Anh, 43 tuổi) lên xe cứu thương. Bệnh nhân di chuyển cùng hệ thống máy ECMO, máy lọc máu và dây nhợ chằng chịt.
Trước đó, Bệnh viện Chợ Rẫy đã phong toả toàn bộ lối đi chính, hơn chục bảo vệ và lực lượng công an bố trí dọn đường. Bệnh nhân đi đến đâu, con đường phía sau được xịt khuẩn đến đó.

Trong con mua chieu 22/5, cac bac si Benh vien Benh Nhiet doi TP.HCM va Benh vien Cho Ray khan truong van chuyen benh nhan 91 (nam phi cong nguoi Anh, 43 tuoi) len xe cuu thuong. Benh nhan di chuyen cung he thong may ECMO, may loc mau va day nho chang chit.
Truoc do, Benh vien Cho Ray da phong toa toan bo loi di chinh, hon chuc bao ve va luc luong cong an bo tri don duong. Benh nhan di den dau, con duong phia sau duoc xit khuan den do.

*/

Các bạn cũng có thể vào repository để xem nhiều hơn các ví dụ khác.

Options

Đây là các option mà jsrmvi (interface định nghĩ trong TypeScript):

interface Options {
	ignoreCase: boolean;
	replaceSpecialCharacters: boolean;
	concatBy: string;
}

Trong đó:

  • ignoreCase: chuyển các từ viết hoa sang viết thường. Default là true.
  • replaceSpecialCharacters: thay các ký tự đặc biệt trong câu và nối lại bằng ký tự concatBy. Default là true.
  • concatBy: ký tự dùng để nối các từ lại sau khi chuyển đổi và xoá ký tự đặc biệt. Default là -.

Conclusion

Trong bài viết này, mình đã hướng dẫn một cách Chuyển từ Tiếng Việt có dấu về chữ cái Latin trong JavaScript bằng cách sử dụng thư viện NPM. Nếu các bạn thấy hay, hãy để lại 1 star và chia sẻ repository của mình. Nếu các bạn còn những cách nào hay, hãy để lại comment chia sẻ.

Cảm ơn các bạn đã đọc hết bài viết. Thanks for your reading!