Thay thế JavaScript

Question

Trong bài đăng này, bạn sẽ tìm hiểu cách thay thế tất cả các lần xuất hiện của chuỗi trong JavaScript bằng cách tách và nối một chuỗi, string.replace() kết hợp với một biểu thức chính quy toàn cục và

javascript
 Nội dung chính Show
 Mục lục
1. Tách và nối mảng
2. thay thế () bằng một biểu thức chính quy toàn cầu
2. 1 Biểu thức chính quy từ một chuỗi
2. 2 thay thế () bằng một chuỗi
3. Phương thức replaceAll()
3. 1 Sự khác biệt giữa replaceAll() và replace()
4. chìa khóa rút ra
Bài đăng chất lượng vào hộp thư đến của bạn
 
const resultingString = pieces.join(replace);

0

Mục lục

1. Tách và nối mảng

Nếu bạn google cách "thay thế tất cả các lần xuất hiện chuỗi trong JavaScript", thì cách tiếp cận đầu tiên bạn có thể tìm thấy là sử dụng một mảng trung gian

Đây là cách nó hoạt động

Tách

javascript
const resultingString = pieces.join(replace);

1 thành

javascript
const resultingString = pieces.join(replace);

2 bằng chuỗi

javascript
const resultingString = pieces.join(replace);

3

javascript
const pieces = string.split(search);

Sau đó nối các mảnh đặt chuỗi

javascript
const resultingString = pieces.join(replace);

4 ở giữa

javascript
const resultingString = pieces.join(replace);

Ví dụ: hãy thay thế tất cả khoảng trắng

javascript
const resultingString = pieces.join(replace);

5 bằng dấu gạch nối

javascript
const resultingString = pieces.join(replace);

6 trong chuỗi

javascript
const resultingString = pieces.join(replace);

7

javascript
const search = ' ';
const replaceWith = '-';
const result = 'duck duck go'.split(search).join(replaceWith);
console.log(result); // => 'duck-duck-go'

Hãy thử bản trình diễn

javascript
const resultingString = pieces.join(replace);

8 chia chuỗi thành nhiều mảnh.

javascript
const resultingString = pieces.join(replace);

9

Sau đó, các mảnh

javascript
const search = ' ';
const replaceWith = '-';
const result = 'duck duck go'.split(search).join(replaceWith);
console.log(result); // => 'duck-duck-go'

0 được nối bằng cách chèn

javascript
const resultingString = pieces.join(replace);

6 vào giữa chúng, kết quả là chuỗi

javascript
const search = ' ';
const replaceWith = '-';
const result = 'duck duck go'.split(search).join(replaceWith);
console.log(result); // => 'duck-duck-go'

2

Đây là một chức năng trợ giúp tổng quát sử dụng phương pháp tách và nối

javascript
function replaceAll(string, search, replace) {
  return string.split(search).join(replace);
}
console.log(replaceAll('abba', 'a', 'i'));          // => 'ibbi'
console.log(replaceAll('go go go!', 'go', 'move')); // => 'move move move!'
console.log(replaceAll('oops', 'z', 'y'));          // => 'oops'

Hãy thử bản trình diễn

Cách tiếp cận này yêu cầu chuyển đổi chuỗi thành một mảng, sau đó quay lại thành chuỗi. Hãy tiếp tục tìm kiếm các lựa chọn thay thế tốt hơn

2. thay thế () bằng một biểu thức chính quy toàn cầu

Phương thức chuỗi

javascript
const search = ' ';
const replaceWith = '-';
const result = 'duck duck go'.split(search).join(replaceWith);
console.log(result); // => 'duck-duck-go'

3 tìm kiếm và thay thế các lần xuất hiện của biểu thức chính quy

javascript
const search = ' ';
const replaceWith = '-';
const result = 'duck duck go'.split(search).join(replaceWith);
console.log(result); // => 'duck-duck-go'

4 bằng chuỗi

javascript
const search = ' ';
const replaceWith = '-';
const result = 'duck duck go'.split(search).join(replaceWith);
console.log(result); // => 'duck-duck-go'

5

Để làm cho phương thức

javascript
const search = ' ';
const replaceWith = '-';
const result = 'duck duck go'.split(search).join(replaceWith);
console.log(result); // => 'duck-duck-go'

6 thay thế tất cả các lần xuất hiện của mẫu - bạn phải bật cờ toàn cầu trên biểu thức chính quy

Nối

javascript
const search = ' ';
const replaceWith = '-';
const result = 'duck duck go'.split(search).join(replaceWith);
console.log(result); // => 'duck-duck-go'

7 vào cuối biểu thức chính quy bằng chữ.

javascript
const search = ' ';
const replaceWith = '-';
const result = 'duck duck go'.split(search).join(replaceWith);
console.log(result); // => 'duck-duck-go'

8

Hoặc khi sử dụng hàm tạo biểu thức chính quy, hãy thêm

javascript
const search = ' ';
const replaceWith = '-';
const result = 'duck duck go'.split(search).join(replaceWith);



console.log(result); // => 'duck-duck-go'

9 vào đối số thứ hai.

javascript
function replaceAll(string, search, replace) {
  return string.split(search).join(replace);
}
console.log(replaceAll('abba', 'a', 'i'));          // => 'ibbi'
console.log(replaceAll('go go go!', 'go', 'move')); // => 'move move move!'
console.log(replaceAll('oops', 'z', 'y'));          // => 'oops'

0

Hãy thay thế tất cả các lần xuất hiện của

javascript
const resultingString = pieces.join(replace);

5 bằng

javascript
const resultingString = pieces.join(replace);

6

javascript
const searchRegExp = /\s/g;
const replaceWith = '-';
const result = 'duck duck go'.replace(searchRegExp, replaceWith);
console.log(result); // => 'duck-duck-go'

Hãy thử bản trình diễn

Biểu thức chính quy bằng chữ

javascript
function replaceAll(string, search, replace) {
  return string.split(search).join(replace);
}
console.log(replaceAll('abba', 'a', 'i'));          // => 'ibbi'
console.log(replaceAll('go go go!', 'go', 'move')); // => 'move move move!'
console.log(replaceAll('oops', 'z', 'y'));          // => 'oops'

3 (lưu ý cờ toàn cầu

javascript
const search = ' ';
const replaceWith = '-';
const result = 'duck duck go'.split(search).join(replaceWith);
console.log(result); // => 'duck-duck-go'

7) khớp với khoảng trắng

javascript
const resultingString = pieces.join(replace);

5

javascript
function replaceAll(string, search, replace) {
  return string.split(search).join(replace);
}
console.log(replaceAll('abba', 'a', 'i'));          // => 'ibbi'
console.log(replaceAll('go go go!', 'go', 'move')); // => 'move move move!'
console.log(replaceAll('oops', 'z', 'y'));          // => 'oops'

6 thay thế tất cả các kết quả trùng khớp của

javascript
function replaceAll(string, search, replace) {
  return string.split(search).join(replace);
}
console.log(replaceAll('abba', 'a', 'i'));          // => 'ibbi'
console.log(replaceAll('go go go!', 'go', 'move')); // => 'move move move!'
console.log(replaceAll('oops', 'z', 'y'));          // => 'oops'

3 bằng

javascript
const resultingString = pieces.join(replace);

6, kết quả là

javascript
const search = ' ';
const replaceWith = '-';
const result = 'duck duck go'.split(search).join(replaceWith);
console.log(result); // => 'duck-duck-go'

2

Bạn có thể dễ dàng thực hiện thay thế không phân biệt chữ hoa chữ thường bằng cách thêm cờ

javascript
const searchRegExp = /\s/g;
const replaceWith = '-';
const result = 'duck duck go'.replace(searchRegExp, replaceWith);
console.log(result); // => 'duck-duck-go'

0 vào biểu thức chính quy

javascript
const searchRegExp = /duck/gi;
const replaceWith = 'goose';
const result = 'DUCK Duck go'.replace(searchRegExp, replaceWith);
result; // => 'goose goose go'

Biểu thức chính quy

javascript
const searchRegExp = /\s/g;
const replaceWith = '-';
const result = 'duck duck go'.replace(searchRegExp, replaceWith);
console.log(result); // => 'duck-duck-go'

1 thực hiện tìm kiếm không phân biệt chữ hoa chữ thường trên toàn cầu (lưu ý các cờ

javascript
const searchRegExp = /\s/g;
const replaceWith = '-';
const result = 'duck duck go'.replace(searchRegExp, replaceWith);
console.log(result); // => 'duck-duck-go'

0 và

javascript
const search = ' ';
const replaceWith = '-';
const result = 'duck duck go'.split(search).join(replaceWith);
console.log(result); // => 'duck-duck-go'

7).

javascript
const searchRegExp = /\s/g;
const replaceWith = '-';
const result = 'duck duck go'.replace(searchRegExp, replaceWith);
console.log(result); // => 'duck-duck-go'

1 trận đấu với

javascript
const searchRegExp = /\s/g;
const replaceWith = '-';
const result = 'duck duck go'.replace(searchRegExp, replaceWith);
console.log(result); // => 'duck-duck-go'

5, cũng như

javascript
const searchRegExp = /\s/g;
const replaceWith = '-';
const result = 'duck duck go'.replace(searchRegExp, replaceWith);
console.log(result); // => 'duck-duck-go'

6

Gọi

javascript
const searchRegExp = /\s/g;
const replaceWith = '-';
const result = 'duck duck go'.replace(searchRegExp, replaceWith);
console.log(result); // => 'duck-duck-go'

7 thay thế tất cả các kết quả phù hợp của chuỗi con

javascript
const searchRegExp = /\s/g;
const replaceWith = '-';
const result = 'duck duck go'.replace(searchRegExp, replaceWith);
console.log(result); // => 'duck-duck-go'

1 bằng

javascript
const searchRegExp = /\s/g;
const replaceWith = '-';
const result = 'duck duck go'.replace(searchRegExp, replaceWith);
console.log(result); // => 'duck-duck-go'

9

2. 1 Biểu thức chính quy từ một chuỗi

Khi biểu thức chính quy được tạo từ một chuỗi, bạn phải thoát các ký tự

javascript
const searchRegExp = /duck/gi;
const replaceWith = 'goose';
const result = 'DUCK Duck go'.replace(searchRegExp, replaceWith);
result; // => 'goose goose go'

0 vì chúng có ý nghĩa đặc biệt trong biểu thức chính quy

Do đó, các ký tự đặc biệt là một vấn đề khi bạn muốn thực hiện thao tác thay thế tất cả. Đây là một ví dụ

javascript
const search = '+';
const searchRegExp = new RegExp(search, 'g'); // Throws SyntaxError
const replaceWith = '-';
const result = '5+2+1'.replace(searchRegExp, replaceWith);

Hãy thử bản trình diễn

Đoạn mã trên cố gắng chuyển đổi chuỗi tìm kiếm

javascript
const searchRegExp = /duck/gi;
const replaceWith = 'goose';
const result = 'DUCK Duck go'.replace(searchRegExp, replaceWith);
result; // => 'goose goose go'

1 thành một biểu thức chính quy. Nhưng

javascript
const searchRegExp = /duck/gi;
const replaceWith = 'goose';
const result = 'DUCK Duck go'.replace(searchRegExp, replaceWith);
result; // => 'goose goose go'

1 là một biểu thức chính quy không hợp lệ, do đó,

javascript
const searchRegExp = /duck/gi;
const replaceWith = 'goose';
const result = 'DUCK Duck go'.replace(searchRegExp, replaceWith);
result; // => 'goose goose go'

3 bị ném

Thoát khỏi ký tự

javascript
const searchRegExp = /duck/gi;
const replaceWith = 'goose';
const result = 'DUCK Duck go'.replace(searchRegExp, replaceWith);
result; // => 'goose goose go'

4 giải quyết vấn đề. Hãy thử bản demo cố định

2. 2 thay thế () bằng một chuỗi

Nếu đối số đầu tiên

javascript
const resultingString = pieces.join(replace);

3 của

javascript
const searchRegExp = /duck/gi;
const replaceWith = 'goose';
const result = 'DUCK Duck go'.replace(searchRegExp, replaceWith);
result; // => 'goose goose go'

6 là một chuỗi, thì phương thức này chỉ thay thế lần xuất hiện đầu tiên của

javascript
const resultingString = pieces.join(replace);

3

javascript
const search = ' ';
const replace = '-';
const result = 'duck duck go'.replace(search, replace);
console.log(result); // => 'duck-duck go'

Hãy thử bản trình diễn

javascript
const searchRegExp = /duck/gi;
const replaceWith = 'goose';
const result = 'DUCK Duck go'.replace(searchRegExp, replaceWith);
result; // => 'goose goose go'

8 chỉ thay thế lần xuất hiện đầu tiên của khoảng trắng

3. Phương thức replaceAll()

Cuối cùng, phương thức

javascript
const searchRegExp = /duck/gi;
const replaceWith = 'goose';
const result = 'DUCK Duck go'.replace(searchRegExp, replaceWith);
result; // => 'goose goose go'

9 thay thế tất cả các lần xuất hiện của chuỗi

javascript
const resultingString = pieces.join(replace);

3 bằng

javascript
const search = ' ';
const replaceWith = '-';
const result = 'duck duck go'.split(search).join(replaceWith);
console.log(result); // => 'duck-duck-go'

5

Hãy thay thế tất cả các lần xuất hiện của

javascript
const resultingString = pieces.join(replace);

5 bằng

javascript
const resultingString = pieces.join(replace);

6

javascript
const search = ' ';
const replaceWith = '-';
const result = 'duck duck go'.replaceAll(search, replaceWith);
console.log(result); // => 'duck-duck-go'

Hãy thử bản trình diễn

javascript



const search = '+';
const searchRegExp = new RegExp(search, 'g'); // Throws SyntaxError
const replaceWith = '-';
const result = '5+2+1'.replace(searchRegExp, replaceWith);

4 thay thế tất cả các lần xuất hiện của chuỗi

javascript
const resultingString = pieces.join(replace);

5 bằng

javascript
const resultingString = pieces.join(replace);

6

javascript
const searchRegExp = /duck/gi;
const replaceWith = 'goose';
const result = 'DUCK Duck go'.replace(searchRegExp, replaceWith);
result; // => 'goose goose go'

9 là cách tốt nhất để thay thế tất cả các lần xuất hiện của chuỗi trong một chuỗi

Lưu ý rằng trình duyệt cho phương pháp này hiện bị hạn chế và bạn có thể yêu cầu một polyfill

3. 1 Sự khác biệt giữa replaceAll() và replace()

Các phương thức chuỗi

javascript
const search = '+';
const searchRegExp = new RegExp(search, 'g'); // Throws SyntaxError
const replaceWith = '-';
const result = '5+2+1'.replace(searchRegExp, replaceWith);

8 và

javascript
const search = '+';
const searchRegExp = new RegExp(search, 'g'); // Throws SyntaxError
const replaceWith = '-';
const result = '5+2+1'.replace(searchRegExp, replaceWith);

9 hoạt động theo cùng một cách, ngoại trừ 2 điều

Nếu đối số

javascript
const resultingString = pieces.join(replace);

3 là một chuỗi, thì

javascript
const search = ' ';
const replace = '-';
const result = 'duck duck go'.replace(search, replace);
console.log(result); // => 'duck-duck go'

1 thay thế tất cả các lần xuất hiện của

javascript
const resultingString = pieces.join(replace);

3 bằng

javascript
const search = ' ';
const replaceWith = '-';
const result = 'duck duck go'.split(search).join(replaceWith);
console.log(result); // => 'duck-duck-go'

5, trong khi

javascript
const search = ' ';
const replaceWith = '-';
const result = 'duck duck go'.split(search).join(replaceWith);
console.log(result); // => 'duck-duck-go'

6 chỉ thay thế lần xuất hiện đầu tiên

Nếu đối số

javascript
const resultingString = pieces.join(replace);

3 là một biểu thức chính quy không toàn cục, thì

javascript
const search = ' ';
const replace = '-';
const result = 'duck duck go'.replace(search, replace);
console.log(result); // => 'duck-duck go'

1 sẽ đưa ra một ngoại lệ

javascript
const search = ' ';
const replace = '-';
const result = 'duck duck go'.replace(search, replace);
console.log(result); // => 'duck-duck go'

7

4. chìa khóa rút ra

Cách tiếp cận đầu tiên để thay thế tất cả các lần xuất hiện là chia chuỗi thành các đoạn bằng chuỗi tìm kiếm và sau đó nối lại chuỗi, đặt chuỗi thay thế giữa các đoạn.

javascript
const search = ' ';
const replace = '-';
const result = 'duck duck go'.replace(search, replace);
console.log(result); // => 'duck-duck go'

8. Cách tiếp cận này hoạt động, nhưng nó rất khó

Một cách tiếp cận khác là sử dụng

javascript
const search = ' ';
const replace = '-';
const result = 'duck duck go'.replace(search, replace);
console.log(result); // => 'duck-duck go'

9 với biểu thức chính quy có bật cờ toàn cầu

Thật không may, bạn không thể dễ dàng tạo biểu thức chính quy từ một chuỗi trong thời gian chạy, vì các ký tự đặc biệt của biểu thức chính quy phải được thoát

Cuối cùng, phương thức chuỗi

javascript
const searchRegExp = /duck/gi;
const replaceWith = 'goose';
const result = 'DUCK Duck go'.replace(searchRegExp, replaceWith);
result; // => 'goose goose go'

9 thay thế tất cả các lần xuất hiện của chuỗi

Tôi khuyên bạn nên sử dụng chuỗi. replaceAll() để thay thế chuỗi

Bạn biết những cách nào khác để thay thế tất cả các lần xuất hiện chuỗi?

Thích bài viết?

đề xuất cải tiến

Bài đăng chất lượng vào hộp thư đến của bạn

Tôi thường xuyên xuất bản bài viết có chứa

Các khái niệm JavaScript quan trọng được giải thích bằng các từ đơn giản
Tổng quan về các tính năng JavaScript mới
Cách sử dụng TypeScript và cách gõ
Thiết kế phần mềm và thực hành mã hóa tốt

Đăng ký nhận bản tin của tôi để nhận chúng ngay trong hộp thư đến của bạn

Đặt mua

Tham gia cùng 6946 người đăng ký khác

Giới thiệu về Dmitri Pavlutin

Nhà văn và huấn luyện viên công nghệ. Thói quen hàng ngày của tôi bao gồm (nhưng không giới hạn) uống cà phê, viết mã, viết, huấn luyện, vượt qua sự nhàm chán 😉

programming javascript

Thay thế JavaScript

Mục lục

1. Tách và nối mảng

2. thay thế () bằng một biểu thức chính quy toàn cầu

2. 1 Biểu thức chính quy từ một chuỗi

2. 2 thay thế () bằng một chuỗi

3. Phương thức replaceAll()

3. 1 Sự khác biệt giữa replaceAll() và replace()

4. chìa khóa rút ra

Thích bài viết?

Bài đăng chất lượng vào hộp thư đến của bạn

Giới thiệu về Dmitri Pavlutin

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội