Phương thức replace() trong JavaScript

Phương thức replace() trong JavaScript
Phương thức replace() trong JavaScript

Chức năng của Phương thức replace() trong JavaScript

Phương thức replace() trong JavaScript dùng để thay thế chuỗi con trong một chuỗi gốc sau đó trả về một chuỗi mới mà không ảnh hưởng gì đến chuỗi gốc, hàm này phân biệt chữ hoa chữ thường.

Cú pháp của Phương thức replace() trong JavaScript

Cú pháp thay thế một chuỗi xuất hiện lần đầu tiên

chuoigoc.replace(chuoicantim,chuoithaythe);

chuoicantim: Chuỗi cần tìm để thay thế.

chuoithaythe: Chuỗi thay thế.

Hàm này chỉ thay thế cho một chuỗi xuất hiện lần đầu tiên, mấy chuỗi sau có giống cũng không thay thế được.

Dùng biểu thức chính quy để thay thế toàn bộ chuỗi xuất hiện

chuoigoc.replace(/chuoicantim/g,"chuoithaythe");

chuoigoc: Chuỗi gốc.

chuoicantim: Chuỗi cần tìm.

chuoithaythe: Chuỗi thay thế.

Thêm dấu / vào đầu chuỗi cần bỏ đi và thêm dấu /g vào cuối chuỗi cần bỏ đi, như vậy sẽ thay thế được toàn bộ chuỗi con.

Code Phương thức replace() trong JavaScript

<script>
var chuoigoc = "Chúng tôi xin chào các bạn, Chúng tôi chuyên thiết kế website";

// Thay thế chuỗi xuất hiện lần đầu tiên
document.write("<b>Thay thế chuỗi xuất hiện lần đầu tiên</b><br>");
var chuoicantim = "Chúng tôi";
var chuoithaythe = "Web Mới";
var chuoimoi  = chuoigoc.replace(chuoicantim,chuoithaythe);
document.write(chuoimoi+"<br>");

// Dùng biểu thức chính quy để thay thế toàn bộ chuỗi xuất hiện
document.write("<b>Dùng biểu thức chính quy để thay thế toàn bộ chuỗi xuất hiện</b><br>");
var chuoimoihai  = chuoigoc.replace(/Chúng tôi/g,"Web Mới");
document.write(chuoimoihai+"<br>");
</script>

Kết quả:

Thay thế chuỗi xuất hiện lần đầu tiên
Web Mới xin chào các bạn, Chúng tôi chuyên thiết kế website
Dùng biểu thức chính quy để thay thế toàn bộ chuỗi xuất hiện
Web Mới xin chào các bạn, Web Mới chuyên thiết kế website

Chạy Thử

Những lưu ý khi sử dụng replace() trong JavaScript

Để sử dụng replace() đúng trong các tình huống xử lý chuỗi, bạn cần chú ý đến cách phương thức này hoạt động. Một số điểm nhỏ như chuỗi ban đầu có bị thay đổi hay chỉ thay thế một phần nội dung có thể ảnh hưởng trực tiếp đến kết quả chương trình.

replace() không làm thay đổi chuỗi ban đầu

Chuỗi trong JavaScript là kiểu dữ liệu bất biến, vì vậy replace() không chỉnh sửa trực tiếp chuỗi đang có. Phương thức này tạo ra một chuỗi mới sau khi thực hiện thay thế và trả kết quả về cho chương trình.

Nếu muốn lưu kết quả thay thế để sử dụng tiếp, bạn nên gán giá trị trả về cho một biến. Cách này cũng giúp tránh nhầm lẫn khi kiểm tra giá trị của chuỗi trước và sau khi xử lý.

let text = "JavaScript rất hữu ích";
let newText = text.replace("hữu ích", "mạnh mẽ");

console.log(text);
console.log(newText);

Trong ví dụ trên, text vẫn giữ nguyên nội dung ban đầu, còn newText chứa chuỗi sau khi thay thế.

replace() chỉ thay thế lần xuất hiện đầu tiên khi dùng chuỗi tìm kiếm

Khi đối số tìm kiếm là một chuỗi thông thường, replace() chỉ xử lý lần xuất hiện đầu tiên. Đây là điểm dễ gây nhầm nếu chuỗi cần thay thế chứa cùng một nội dung nhiều lần.

let text = "JS rất nhanh, JS dễ học, JS phổ biến";
let result = text.replace("JS", "JavaScript");

console.log(result);

Kết quả chỉ thay JS đầu tiên. Nếu mục tiêu là xử lý tất cả các vị trí phù hợp, cần lựa chọn cách thay thế phù hợp với yêu cầu thay vì mặc định cho rằng mọi lần xuất hiện đều được xử lý.

Phân biệt replace() với replaceAll() trong JavaScript

replace() và replaceAll() đều dùng để thay thế nội dung trong chuỗi nhưng có cách xử lý khác nhau. Với chuỗi tìm kiếm thông thường, replace() dừng ở lần khớp đầu tiên, trong khi replaceAll() hướng đến việc thay thế toàn bộ các lần xuất hiện phù hợp.

let text = "cat cat cat";

let first = text.replace("cat", "dog");
let all = text.replaceAll("cat", "dog");

console.log(first);
console.log(all);

Vì vậy, hãy chọn phương thức dựa trên phạm vi cần thay thế. Nếu chỉ cần xử lý một vị trí, replace() là lựa chọn phù hợp; nếu cần thay toàn bộ chuỗi khớp, replaceAll() giúp thể hiện rõ mục đích của đoạn mã.

Kiểm tra chuỗi trước khi thực hiện thay thế

Trước khi gọi replace(), nên xác định dữ liệu đầu vào thực sự là chuỗi và nội dung cần tìm có phù hợp với yêu cầu hay không. Điều này đặc biệt quan trọng khi dữ liệu đến từ biểu mẫu, API hoặc nguồn bên ngoài.

Nếu giá trị có thể là null, undefined hoặc một kiểu dữ liệu khác, việc gọi trực tiếp phương thức chuỗi có thể gây lỗi. Kiểm tra dữ liệu trước khi thay thế sẽ giúp chương trình ổn định hơn và hạn chế kết quả ngoài dự kiến.

Lời kết

Cảm ơn các bạn đã tham khảo bài viết Phương thức replace() trong JavaScript.

  • ★★★★★ ★★★★★
  • 0 Bình luận
Trần Thị Vân | Content Creator Web Mới
Trần Thị Vân
Trần Thị Vân là Content Creator tại Web Mới, phụ trách nghiên cứu, biên soạn nội dung và chia sẻ kiến thức về website, SEO, lập trình cùng các xu hướng công nghệ
Đánh giá
Chia sẻ nội dung đánh giá của bạn về Phương thức replace() trong JavaScript
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
Đánh giá của bạn
Tên *
Email
Số điện thoại *
Bình luận, Hỏi đáp
Yêu Cầu Báo Giá
Gửi trang web mẫu cần làm theo, chúng tôi sẽ báo giá đến bạn từ Email (tanlucit09@gmail.com - Bùi Tấn Lực) hoặc Zalo (Lực IT - 0398259259) !