JavaScript Replace – Cách sử dụng phương thức String.prototype.replace() Ví dụ về JS

Các String.prototype.replace() phương thức tìm kiếm lần xuất hiện đầu tiên của một chuỗi và thay thế nó bằng chuỗi đã chỉ định. Nó thực hiện điều này mà không làm thay đổi chuỗi gốc.

Phương pháp này cũng hoạt động với các biểu thức chính quy, vì vậy mục bạn đang tìm kiếm có thể được biểu thị dưới dạng biểu thức chính quy.

Giá trị trả về dưới dạng giá trị được thay thế có thể được biểu thị dưới dạng chuỗi hoặc hàm.

Cú pháp cơ bản của Phương thức String.prototype.replace()

const variable = variable.replace("stringToReplace", "expectedString");

Bạn sử dụng replace() phương pháp bằng cách:

• gán chuỗi hoặc chuỗi ban đầu cho một biến
• khai báo một biến khác
• đối với giá trị của biến mới, thêm trước tên biến mới bằng phương thức thay thế ()
• Dấu phẩy phân tách chuỗi bạn muốn thay thế và chuỗi dự kiến ​​trong ngoặc

Ví dụ về Phương thức String.prototype.replace()

Một ví dụ cơ bản sẽ như thế này:

const coding = "I learned how to code from TV";
const replacedString = coding.replace("TV", "freeCodeCamp");

console.log(replacedString); // Result: I learned how to code from freeCodeCamp

Trong ví dụ trên:

• Tôi đã khai báo một biến có tên là mã hóa và gán cho nó chuỗi “I learned how to code from TV”
• Tôi đã khai báo một biến khác có tên replacedString
• Đối với giá trị của replacedString biến, tôi đã đưa vào replace() và chỉ định rằng tôi muốn thay thế “TV” từ biến ban đầu bằng “freeCodeCamp”.

Dưới đây là một ví dụ chứng minh rằng chuỗi ban đầu không bao giờ bị thay đổi (thay đổi) bởi replace() phương pháp:

const coding = "I learned how to code from TV";
const replacedString = coding.replace("TV", "freeCodeCamp");

console.log(replacedString); // Result: I learned how to code from freeCodeCamp
console.log(coding); // Result: I learned how to code from TV

Trong ví dụ bên dưới, tôi đã sử dụng cụm từ thông dụng để tìm kiếm văn bản khớp với “TV” và thay thế nó bằng “freeCodeCamp”:

const coding = "I learned how to code from TV";
const replacedString = coding.replace(/TV/, "freeCodeCamp");

console.log(replacedString); // Result: I learned how to code from freeCodeCamp

Kể từ khi replace() phương pháp này chỉ hoạt động đối với lần xuất hiện đầu tiên của một số văn bản trong một chuỗi, bạn sẽ làm gì nếu muốn thay thế tất cả các lần xuất hiện của một từ bằng một từ khác trong một chuỗi? Bạn có thể dùng replaceAll() phương pháp.

Làm thế nào để sử dụng replaceAll() Phương pháp

Một phương thức chuỗi hơi giống với phương thức replace() phương pháp là replaceAll() phương pháp.

Phương pháp này thay thế tất cả các lần xuất hiện của một từ nhất định trong một chuỗi.

Ví dụ về replaceAll() Phương pháp

const coding = "I learned how to code from TV. TV remains in my heart for life.";
const replacedString = coding.replaceAll("TV", "freeCodeCamp");

console.log(replacedString); // Result: I learned how to code from freeCodeCamp. freeCodeCamp remains in my heart for life.

Mọi lần xuất hiện của “TV” đã được thay thế bằng “freeCodeCamp” nhờ sự hỗ trợ của replaceAll() phương pháp.

với bản gốc replace() phương pháp, bạn có thể đạt được những gì replaceAll() thực hiện bằng cách sử dụng các biểu thức chính quy để tìm kiếm mọi lần xuất hiện của một từ nhất định trong một chuỗi và thay thế nó bằng một từ khác.

const coding = "I learned how to code from TV. TV remains in my heart for life.";
const replacedString = coding.replace(/TV/g, "freeCodeCamp");

console.log(replacedString); // Result: I learned how to code from freeCodeCamp. freeCodeCamp remains in my heart for life.

Tôi đã có thể tìm kiếm mọi từ khớp với “TV” với g cờ của một biểu thức chính quy và thay thế nó bằng “freeCodeCamp”.

Làm thế nào để truyền một chức năng cho replace() Phương pháp

Như tôi đã nói trước đây, bạn có thể biểu thị giá trị bạn muốn trả về dưới dạng giá trị được thay thế dưới dạng một hàm.

Trong ví dụ bên dưới, tôi đã chuyển đổi tiêu đề của bài viết này thành một URL slug bằng phương thức thay thế:

const articleTitle = "JavaScript Replace – How to Use the String.prototype.replace() Method";
const slugifyArticleTitle = articleTitle.toLowerCase().replace(/ /g, function (article) {
    return article.split(" ").join("-");
  });

console.log(slugifyArticleTitle); //Result: javascript-replace-–-how-to-use-the-string.prototype.replace()-method

Trong kịch bản trên:

• Tôi đã khai báo một biến có tên articleTitle và đặt tiêu đề cho bài báo này
• Tôi đã khai báo một biến khác có tên slugifyArticleTitle và chuyển đổi tiêu đề của bài viết thành chữ thường với toLowerCase() phương pháp
• tôi mang vào replace() phương pháp và tìm kiếm mọi khoảng trắng với / /g
• Sau đó tôi đã chuyển một chức năng cho replace() phương thức và gán cho nó một tham số là article. Tham số này dùng để chỉ chuỗi (tiêu đề bài viết) được chuyển thành chữ thường
• Bên trong hàm, tôi trả lời rằng tôi đang tách tiêu đề bài viết ở bất kỳ đâu có khoảng trắng. Điều này đã được thực hiện với split() phương pháp.
• Sau khi tách tiêu đề bài viết ở mọi nơi có khoảng trắng, tôi đã sử dụng join() phương pháp nối các chữ cái riêng lẻ trong chuỗi bằng dấu gạch nối.

Phần kết luận

Các String.prototype.replace() method là một phương thức chuỗi mạnh mẽ mà bạn có thể hoàn thành rất nhiều việc khi làm việc với các chuỗi trong JavaScript.

ngoài String.prototype.replace() phương pháp, tôi cũng đã chỉ cho bạn cách sử dụng String.prototype.replaceAll() phương pháp – một sự kết hợp của String.prototype.replace() phương pháp.

Bạn nên cẩn thận với String.prototype.replaceAll() bởi vì nó chưa được một số trình duyệt hỗ trợ. Thay vì sử dụng replaceAll()tôi cũng đã chỉ cho bạn cách bạn có thể đạt được điều tương tự bằng cách sử dụng biểu thức chính quy để tìm kiếm tất cả các giá trị trong một chuỗi cụ thể.

Nếu bạn thấy bài viết này hữu ích, đừng ngần ngại chia sẻ nó với bạn bè và gia đình của bạn.

Cảm ơn bạn đã đọc.