JavaScript replace(): Hướng dẫn chi tiết từ cơ bản đến nâng cao

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

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

1. Giới thiệu

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

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

Cú pháp

string.replace(pattern, replacement)

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

Cách sử dụng cơ bản

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

Lưu ý

1. replace() chỉ thay thế lần khớp đầu tiên.
2. Nếu muốn thay thế tất cả các lần khớp, cần sử dụng biểu thức chính quy với cờ g.

3. Thay thế nâng cao với Biểu thức chính quy

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

Ví dụ thay thế bằng Regex

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

Các loại cờ (flags)

• g: Thay thế toàn bộ (tất cả các lần khớp)
• i: Không phân biệt chữ hoa/thường
• m: Chế độ nhiều dòng

Ví dụ: Thay thế không phân biệt chữ hoa/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 vị trí

Thay thế tất cả các lần khớp

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"

5. Thay thế động với hàm Callback

Hàm Callback là gì?

Ví dụ thay thế động

1. Đảo ngược thứ tự 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

Ký tự đặc biệt là gì?

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

Ví dụ 1: Thay thế chuỗi có dấu chấm

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

Ví dụ 2: Loại bỏ ký hiệu đô la

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

Thay thế ký tự escape trong HTML

Ví dụ: Escape 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. Ví dụ thực tế và kỹ thuật nâng cao

Chuyển ký tự xuống dòng thành thẻ <br>

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

Xử lý tham số trong 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"

Sanitize dữ liệu nhập từ 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 ý và Best Practices

Chỉ thay thế lần khớp đầu tiên

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

Phân biệt chữ hoa/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."

Cẩn thận khi escape 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 nội dung

• Cách sử dụng cơ bản: Giải thích cú pháp và ví dụ thay thế đơn giản với replace().
• Ứng dụng Regex: Học cách dùng biểu thức chính quy và flags cho thay thế nâng cao.
• Hàm callback: Trình bày phương pháp thay thế động và ví dụ ứng dụng.
• Ví dụ thực tế: Giới thiệu kỹ thuật hữu ích như xử lý URL, sanitize dữ liệu.
• Best Practices: Giải thích chi tiết về lưu ý và tối ưu hiệu suất.

Lời kết