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à
0javascript
const resultingString = pieces.join[replace];
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
1 thànhjavascript
const resultingString = pieces.join[replace];
2 bằng chuỗijavascript
const resultingString = pieces.join[replace];
3javascript
const resultingString = pieces.join[replace];
javascript
const pieces = string.split[search];
- Sau đó nối các mảnh đặt chuỗi
4 ở giữajavascript
const resultingString = pieces.join[replace];
javascript
const resultingString = pieces.join[replace];
Ví dụ: hãy thay thế tất cả khoảng trắng
5 bằng dấu gạch nốijavascript
const resultingString = pieces.join[replace];
6 trong chuỗijavascript
const resultingString = pieces.join[replace];
7javascript
const resultingString = pieces.join[replace];
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
8 chia chuỗi thành nhiều mảnh.javascript
const resultingString = pieces.join[replace];
9javascript
const resultingString = pieces.join[replace];
Sau đó, các mảnh
0 được nối bằng cách chènjavascript
const search = ' ';
const replaceWith = '-';
const result = 'duck duck go'.split[search].join[replaceWith];
console.log[result]; // => 'duck-duck-go'
6 vào giữa chúng, kết quả là chuỗijavascript
const resultingString = pieces.join[replace];
2javascript
const search = ' ';
const replaceWith = '-';
const result = 'duck duck go'.split[search].join[replaceWith];
console.log[result]; // => 'duck-duck-go'
Đâ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
3 tìm kiếm và thay thế các lần xuất hiện của biểu thức chính quyjavascript
const search = ' ';
const replaceWith = '-';
const result = 'duck duck go'.split[search].join[replaceWith];
console.log[result]; // => 'duck-duck-go'
4 bằng chuỗijavascript
const search = ' ';
const replaceWith = '-';
const result = 'duck duck go'.split[search].join[replaceWith];
console.log[result]; // => 'duck-duck-go'
5javascript
const search = ' ';
const replaceWith = '-';
const result = 'duck duck go'.split[search].join[replaceWith];
console.log[result]; // => 'duck-duck-go'
Để làm cho phương thức
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 quyjavascript
const search = ' ';
const replaceWith = '-';
const result = 'duck duck go'.split[search].join[replaceWith];
console.log[result]; // => 'duck-duck-go'
- Nối
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'
8javascript
const search = ' ';
const replaceWith = '-';
const result = 'duck duck go'.split[search].join[replaceWith];
console.log[result]; // => 'duck-duck-go'
- Hoặc khi sử dụng hàm tạo biểu thức chính quy, hãy thêm
9 vào đối số thứ hai.javascript
const search = ' ';
const replaceWith = '-';
const result = 'duck duck go'.split[search].join[replaceWith];
console.log[result]; // => 'duck-duck-go'
0javascript
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 thay thế tất cả các lần xuất hiện của
5 bằngjavascript
const resultingString = pieces.join[replace];
6javascript
const resultingString = pieces.join[replace];
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ữ
3 [lưu ý cờ toàn cầujavascript
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'
7] khớp với khoảng trắngjavascript
const search = ' ';
const replaceWith = '-';
const result = 'duck duck go'.split[search].join[replaceWith];
console.log[result]; // => 'duck-duck-go'
5javascript
const resultingString = pieces.join[replace];
6 thay thế tất cả các kết quả trùng khớp củajavascript
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ằngjavascript
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, kết quả làjavascript
const resultingString = pieces.join[replace];
2javascript
const search = ' ';
const replaceWith = '-';
const result = 'duck duck go'.split[search].join[replaceWith];
console.log[result]; // => 'duck-duck-go'
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ờ
0 vào biểu thức chính quyjavascript
const searchRegExp = /\s/g;
const replaceWith = '-';
const result = 'duck duck go'.replace[searchRegExp, replaceWith];
console.log[result]; // => 'duck-duck-go'
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
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 searchRegExp = /\s/g;
const replaceWith = '-';
const result = 'duck duck go'.replace[searchRegExp, replaceWith];
console.log[result]; // => 'duck-duck-go'
7].javascript
const search = ' ';
const replaceWith = '-';
const result = 'duck duck go'.split[search].join[replaceWith];
console.log[result]; // => 'duck-duck-go'
1 trận đấu vớijavascript
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'
6javascript
const searchRegExp = /\s/g;
const replaceWith = '-';
const result = 'duck duck go'.replace[searchRegExp, replaceWith];
console.log[result]; // => 'duck-duck-go'
Gọi
7 thay thế tất cả các kết quả phù hợp của chuỗi conjavascript
const searchRegExp = /\s/g;
const replaceWith = '-';
const result = 'duck duck go'.replace[searchRegExp, replaceWith];
console.log[result]; // => 'duck-duck-go'
1 bằngjavascript
const searchRegExp = /\s/g;
const replaceWith = '-';
const result = 'duck duck go'.replace[searchRegExp, replaceWith];
console.log[result]; // => 'duck-duck-go'
9javascript
const searchRegExp = /\s/g;
const replaceWith = '-';
const result = 'duck duck go'.replace[searchRegExp, replaceWith];
console.log[result]; // => 'duck-duck-go'
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ự
0 vì chúng có ý nghĩa đặc biệt trong biểu thức chính quyjavascript
const searchRegExp = /duck/gi;
const replaceWith = 'goose';
const result = 'DUCK Duck go'.replace[searchRegExp, replaceWith];
result; // => 'goose goose go'
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
1 thành một biểu thức chính quy. Nhưngjavascript
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émjavascript
const searchRegExp = /duck/gi;
const replaceWith = 'goose';
const result = 'DUCK Duck go'.replace[searchRegExp, replaceWith];
result; // => 'goose goose go'
Thoát khỏi ký tự
4 giải quyết vấn đề. Hãy thử bản demo cố địnhjavascript
const searchRegExp = /duck/gi;
const replaceWith = 'goose';
const result = 'DUCK Duck go'.replace[searchRegExp, replaceWith];
result; // => 'goose goose go'
2. 2 thay thế [] bằng một chuỗi
Nếu đối số đầu tiên
3 củajavascript
const resultingString = pieces.join[replace];
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ủajavascript
const searchRegExp = /duck/gi;
const replaceWith = 'goose';
const result = 'DUCK Duck go'.replace[searchRegExp, replaceWith];
result; // => 'goose goose go'
3javascript
const resultingString = pieces.join[replace];
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
8 chỉ thay thế lần xuất hiện đầu tiên của khoảng trắngjavascript
const searchRegExp = /duck/gi;
const replaceWith = 'goose';
const result = 'DUCK Duck go'.replace[searchRegExp, replaceWith];
result; // => 'goose goose go'
3. Phương thức replaceAll[]
Cuối cùng, phương thức
9 thay thế tất cả các lần xuất hiện của chuỗijavascript
const searchRegExp = /duck/gi;
const replaceWith = 'goose';
const result = 'DUCK Duck go'.replace[searchRegExp, replaceWith];
result; // => 'goose goose go'
3 bằngjavascript
const resultingString = pieces.join[replace];
5javascript
const search = ' ';
const replaceWith = '-';
const result = 'duck duck go'.split[search].join[replaceWith];
console.log[result]; // => 'duck-duck-go'
Hãy thay thế tất cả các lần xuất hiện của
5 bằngjavascript
const resultingString = pieces.join[replace];
6javascript
const resultingString = pieces.join[replace];
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
4 thay thế tất cả các lần xuất hiện của chuỗijavascript
const search = '+';
const searchRegExp = new RegExp[search, 'g']; // Throws SyntaxError
const replaceWith = '-';
const result = '5+2+1'.replace[searchRegExp, replaceWith];
5 bằngjavascript
const resultingString = pieces.join[replace];
6javascript
const resultingString = pieces.join[replace];
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ỗijavascript
const searchRegExp = /duck/gi;
const replaceWith = 'goose';
const result = 'DUCK Duck go'.replace[searchRegExp, replaceWith];
result; // => 'goose goose go'
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
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ềujavascript
const search = '+';
const searchRegExp = new RegExp[search, 'g']; // Throws SyntaxError
const replaceWith = '-';
const result = '5+2+1'.replace[searchRegExp, replaceWith];
- Nếu đối số
3 là một chuỗi, thìjavascript
const resultingString = pieces.join[replace];
1 thay thế tất cả các lần xuất hiện củajavascript
const search = ' ';
const replace = '-';
const result = 'duck duck go'.replace[search, replace];
console.log[result]; // => 'duck-duck go'
3 bằngjavascript
const resultingString = pieces.join[replace];
5, trong khijavascript
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ênjavascript
const search = ' ';
const replaceWith = '-';
const result = 'duck duck go'.split[search].join[replaceWith];
console.log[result]; // => 'duck-duck-go'
- Nếu đối số
3 là một biểu thức chính quy không toàn cục, thìjavascript
const resultingString = pieces.join[replace];
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'
7javascript
const search = ' ';
const replace = '-';
const result = 'duck duck go'.replace[search, replace];
console.log[result]; // => 'duck-duck go'
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.
8. Cách tiếp cận này hoạt động, nhưng nó rất khójavascript
const search = ' ';
const replace = '-';
const result = 'duck duck go'.replace[search, replace];
console.log[result]; // => 'duck-duck go'
Một cách tiếp cận khác là sử dụng
9 với biểu thức chính quy có bật cờ toàn cầujavascript
const search = ' ';
const replace = '-';
const result = 'duck duck go'.replace[search, replace];
console.log[result]; // => 'duck-duck go'
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
9 thay thế tất cả các lần xuất hiện của chuỗijavascript
const searchRegExp = /duck/gi;
const replaceWith = 'goose';
const result = 'DUCK Duck go'.replace[searchRegExp, replaceWith];
result; // => 'goose goose go'
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 muaTham 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 😉