Giải thích phương thức replace() của chuỗi JavaScript: Cơ bản, Regex và Ví dụ thực tiễn

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Giới thiệu

JavaScript là một trong những ngôn ngữ lập trình được sử dụng rộng rãi nhất trong phát triển web. Đặc biệt, việc thao tác chuỗi là một tính năng thường xuyên được dùng khi xử lý đầu vào của người dùng và xử lý dữ liệu. Trong số các tính năng này, phương thức replace() được biết đến như một công cụ mạnh mẽ cho phép bạn thực hiện các thao tác thay thế chuỗi một cách dễ dàng.

Trong bài viết này, chúng tôi sẽ giải thích chi tiết phương thức replace() của JavaScript từ cơ bản đến nâng cao. Ngoài các ví dụ nền tảng, chúng tôi cũng sẽ đề cập đến các thay thế nâng cao bằng biểu thức chính quy và các trường hợp sử dụng thực tế. Nội dung này được thiết kế để hữu ích cho người mới bắt đầu cho tới các nhà phát triển trung cấp.

2. Cơ bản về phương thức replace()

Phương thức replace() là gì?

Phương thức replace() là một hàm tích hợp sẵn của JavaScript, được dùng để thay thế các phần cụ thể của một chuỗi bằng một chuỗi khác. Bằng cách sử dụng phương thức này, bạn có thể chỉnh sửa và chuyển đổi dữ liệu chuỗi một cách hiệu quả.

Cú pháp

string.replace(pattern, replacement)

• pattern : Chuỗi hoặc biểu thức chính quy cần tìm.
• replacement : Chuỗi thay thế hoặc một hàm callback.

Cách dùng cơ bản

Ví dụ sau minh họa một phép thay thế chuỗi đơn giản.

let text = "Hello, world!";
let result = text.replace("world", "JavaScript");
console.log(result); // "Hello, JavaScript!"

Trong đoạn mã này, chuỗi “world” được thay thế bằng “JavaScript”.

Lưu ý quan trọng

1. replace() chỉ thay thế lần xuất hiện đầu tiên phù hợp.
2. Để thay thế tất cả các lần xuất hiện phù hợp, bạn phải sử dụng một biểu thức chính quy với cờ g.

3. Thay thế nâng cao bằng Biểu thức chính quy

Biểu thức chính quy là gì?

Biểu thức chính quy là các công cụ mạnh mẽ để mô tả các mẫu chuỗi. Trong JavaScript, biểu thức chính quy cho phép bạn dễ dàng thực hiện các phép khớp mẫu phức tạp và các thao tác thay thế.

Các ví dụ thay thế bằng Biểu thức chính quy

let text = "apple, banana, apple";
let result = text.replace(/apple/g, "orange");
console.log(result); // "orange, banana, orange"

Các loại cờ

• g : Thay thế toàn cục (thay thế tất cả các khớp)
• i : Thay thế không phân biệt chữ hoa/chữ thường
• m : Chế độ đa dòng

Ví dụ nâng cao: Thay thế không phân biệt chữ hoa/chữ thường

let text = "Hello, hello, HELLO";
let result = text.replace(/hello/gi, "hi");
console.log(result); // "hi, hi, hi"

4. Thay thế Nhiều Lần Xuất Hiện

Thay thế tất cả các khớp

Để thay thế tất cả các lần xuất hiện phù hợp trong một chuỗi, sử dụng cờ g trong một biểu thức chính quy.

let text = "cat dog cat bird";
let result = text.replace(/cat/g, "fish");
console.log(result); // "fish dog fish bird"

Kỹ thuật thay thế nhiều chuỗi khác nhau cùng lúc

let text = "red blue green";
let replacements = {red: "pink", blue: "cyan", green: "lime"};

Object.keys(replacements).forEach(key => {
  let regex = new RegExp(key, "g");
  text = text.replace(regex, replacements[key]);
});

console.log(text); // "pink cyan lime"

Cách tiếp cận này cho phép bạn thay thế nhiều mẫu cùng một lúc đồng thời cải thiện khả năng đọc mã.

5. Thay thế Động bằng Hàm Callback

Hàm Callback là gì?

Hàm callback được gọi trong quá trình thay thế và cho phép bạn tùy chỉnh thao tác dựa trên thông tin khớp hiện tại.

Các ví dụ về Thay thế Động

1. Sắp xếp lại các chuỗi

let text = "Tanaka, Taro";
let result = text.replace(/(\w+), (\w+)/, (match, p1, p2) => {
  return `${p2} ${p1}`;
});
console.log(result); // "Taro Tanaka"

2. Chuyển đổi định dạng ngày tháng

let date = "2024-12-25";
let formattedDate = date.replace(/(\d{4})-(\d{2})-(\d{2})/, (match, year, month, day) => {
  return `${month}/${day}/${year}`;
});
console.log(formattedDate); // "12/25/2024"

6. Xử lý ký tự đặc biệt và chuỗi escape

Các ký tự đặc biệt là gì?

Trong các biểu thức chính quy, một số ký tự có ý nghĩa đặc biệt như metacharacter. Để sử dụng những ký tự này một cách nguyên văn trong các thao tác tìm kiếm hoặc thay thế, bạn phải dùng các chuỗi escape.

Thay thế chuỗi chứa ký tự đặc biệt

Ví dụ 1: Thay thế một chuỗi chứa dấu chấm

let text = "www.example.com";
let result = text.replace(/\./g, "-");
console.log(result); // "www-example-com"

Ví dụ 2: Xóa dấu đô la

let price = "$1,000";
let result = price.replace(/\$/g, "");
console.log(result); // "1,000"

Thay thế các ký tự escape HTML

Ví dụ: Escape các thẻ HTML

let html = "<div>Hello!</div>";
let result = html.replace(/</g, "&lt;").replace(/>/g, "&gt;");
console.log(result);
// "&lt;div&gt;Hello!&lt;/div&gt;"

7. Các trường hợp sử dụng thực tế và kỹ thuật nâng cao

Chuyển đổi ngắt dòng thành thẻ

let text = "Hello\nWorld\nJavaScript";
let result = text.replace(/\n/g, "<br>");
console.log(result);
// "Hello<br>World<br>JavaScript"

Thao tác với các tham số URL

let url = "https://example.com/?id=123&lang=en";
let result = url.replace(/lang=en/, "lang=ja");
console.log(result);
// "https://example.com/?id=123&lang=ja"

Làm sạch dữ liệu nhập của người dùng

function sanitizeInput(input) {
  return input.replace(/</g, "&lt;").replace(/>/g, "&gt;");
}

let userInput = "<script>alert('XSS');</script>";
let safeInput = sanitizeInput(userInput);
console.log(safeInput);
// "&lt;script&gt;alert('XSS');&lt;/script&gt;"

8. Lưu ý quan trọng và các thực hành tốt

Lưu ý rằng chỉ lần khớp đầu tiên được thay thế

let text = "apple apple orange";
let result = text.replace("apple", "banana");
console.log(result); // "banana apple orange"

Chú ý đến phân biệt chữ hoa/chữ thường

let text = "JavaScript is powerful. javascript is versatile.";
let result = text.replace(/javascript/gi, "JS");
console.log(result);
// "JS is powerful. JS is versatile."

Đừng quên escape các ký tự đặc biệt

function escapeRegExp(str) {
  return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
}

let text = "Price: $100";
let result = text.replace(new RegExp(escapeRegExp("$"), "g"), "USD ");
console.log(result);
// "Price: USD 100"

9. Kết luận

Tóm tắt bài viết

• Cách dùng cơ bản: Giải thích cú pháp và các ví dụ đơn giản của phương thức replace().
• Ứng dụng biểu thức chính quy: Bao gồm cách sử dụng biểu thức chính quy và các flag cho các thao tác thay thế nâng cao.
• Hàm callback: Trình bày các kỹ thuật thay thế động với các ví dụ thực tế.
• Ví dụ thực tế: Giới thiệu các kỹ thuật hữu ích như thao tác URL và làm sạch dữ liệu nhập.
• Thực hành tốt: Giải thích các lưu ý quan trọng và các cân nhắc liên quan đến hiệu năng.

Kết luận cuối cùng

Phương thức replace() của JavaScript là một công cụ đa năng và mạnh mẽ, có thể được sử dụng hiệu quả từ các tình huống cơ bản đến nâng cao. Chúng tôi sẽ tiếp tục cung cấp các nội dung hữu ích liên quan đến JavaScript, vì vậy hãy theo dõi nhé.