Làm cách nào để bỏ qua các ký tự đặc biệt trong JavaScript?

Giả sử bạn có một chuỗi chứa một số ký tự đặc biệt trong JavaScript. Và, vì lý do này hay lý do khác, bạn muốn loại bỏ những ký tự đặc biệt đó

Cách tốt nhất để làm điều đó là gì?

Để xóa các ký tự đặc biệt khỏi chuỗi trong JavaScript, hãy sử dụng phương thức

// Store phone number in a string
let myString = '+1 222 333 4444';

// Remove + sign
console.log(myString.replace(/[+]/g, ''));

// 1 222 333 4444

0. Khớp các ký tự đặc biệt với mẫu RegEx và thay thế chúng bằng dấu ngoặc kép trống

Phương thức

// Store phone number in a string
let myString = '+1 222 333 4444';

// Remove + sign
console.log(myString.replace(/[+]/g, ''));

// 1 222 333 4444

0 có cú pháp như sau

String.replace(pattern, replacement)

Phương thức

// Store phone number in a string
let myString = '+1 222 333 4444';

// Remove + sign
console.log(myString.replace(/[+]/g, ''));

// 1 222 333 4444

0 chấp nhận một chuỗi, tìm kiếm các kết quả trùng khớp với

// Store phone number in a string
let myString = '+1 222 333 4444';

// Remove + sign
console.log(myString.replace(/[+]/g, ''));

// 1 222 333 4444

3 và, tùy thuộc vào việc

// Store phone number in a string
let myString = '+1 222 333 4444';

// Remove + sign
console.log(myString.replace(/[+]/g, ''));

// 1 222 333 4444

3 có phải là toàn cầu hay không (sẽ nói thêm về điều đó trong giây lát), thay thế một hoặc tất cả các kết quả trùng khớp bằng

// Store phone number in a string
let myString = '+1 222 333 4444';

// Remove + sign
console.log(myString.replace(/[+]/g, ''));

// 1 222 333 4444

5, trong đó

• // Store phone number in a string
  let myString = '+1 222 333 4444';
  
  // Remove + sign
  console.log(myString.replace(/[+]/g, ''));
  
  // 1 222 333 4444

  3 phải luôn là biểu thức chính quy (RegEx). RegEx có thể tìm thấy kết quả phù hợp đầu tiên hoặc, nếu nó được đặt là toàn cầu bằng cách sử dụng cờ

  // Store phone number in a string
  let myString = '+1 222 333 4444';
  
  // Remove + sign
  console.log(myString.replace(/[+]/g, ''));
  
  // 1 222 333 4444

  7, tất cả các kết quả phù hợp

• // Store phone number in a string
  let myString = '+1 222 333 4444';
  
  // Remove + sign
  console.log(myString.replace(/[+]/g, ''));
  
  // 1 222 333 4444

  5 phải là một chuỗi hoặc một hàm được gọi bất cứ khi nào tìm thấy kết quả khớp

Để xóa các ký tự đặc biệt khỏi một chuỗi trong JavaScript, chúng tôi sẽ sử dụng phương pháp

// Store phone number in a string
let myString = '+1 222 333 4444';

// Remove + sign
console.log(myString.replace(/[+]/g, ''));

// 1 222 333 4444

0 với quy tắc RegEx toàn cầu tìm kiếm tất cả các ký tự phù hợp mà chúng tôi muốn xóa, sau đó thay thế chúng bằng dấu ngoặc kép trống (

// Store phone number in a string
let myString = '(+1) 222 333 4444';

// Remove brackets and + sign
console.log(myString.replace(/[(+)]/g, ''));

// 1 222 333 4444

0)

Làm như thế nào

Khi RegEx trở nên dài, nó có thể tiêu tốn rất nhiều sức mạnh xử lý. Vì vậy, bạn muốn làm cho biểu thức chính quy của mình tiết kiệm bằng cách giữ chúng ngắn gọn và đơn giản nhất có thể

(Tôi muốn kiểm tra các biểu thức chính quy của mình tại regex101. com. Ở trên cùng, nó hiển thị số bước và mili giây mà biểu thức đã thực hiện; . )

Để xóa các ký tự đặc biệt khỏi một chuỗi trong JavaScript bằng RegEx và phương thức

// Store phone number in a string
let myString = '(+1) 222 333 4444';

// Remove brackets and + sign
console.log(myString.replace(/[(+)]/g, ''));

// 1 222 333 4444

1, câu hỏi đầu tiên bạn cần tự hỏi mình là…

Bạn muốn loại bỏ những ký tự đặc biệt nào?

Điều này xác định các yêu cầu cho biểu thức chính quy của bạn. Tùy thuộc vào việc bạn có thể trả lời câu hỏi này hay không, mẫu RegEx của bạn sẽ trông khác đi

Xóa các ký tự đặc biệt đã biết

Giả sử bạn đã lưu trữ một số điện thoại trong một chuỗi bắt đầu bằng dấu cộng trong một biến có tên là

// Store phone number in a string
let myString = '(+1) 222 333 4444';

// Remove brackets and + sign
console.log(myString.replace(/[(+)]/g, ''));

// 1 222 333 4444

2

Để bỏ dấu cộng, bạn có thể áp dụng phương thức

// Store phone number in a string
let myString = '+1 222 333 4444';

// Remove + sign
console.log(myString.replace(/[+]/g, ''));

// 1 222 333 4444

0 với biểu thức chính quy sau

// Store phone number in a string
let myString = '+1 222 333 4444';

// Remove + sign
console.log(myString.replace(/[+]/g, ''));

// 1 222 333 4444

Nếu số điện thoại được định dạng khác—ví dụ: mã quốc gia được đặt trong dấu ngoặc vuông và được thêm vào trước dấu cộng—bạn sẽ cần mở rộng RegEx của mình sang bên dưới

// Store phone number in a string
let myString = '(+1) 222 333 4444';

// Remove brackets and + sign
console.log(myString.replace(/[(+)]/g, ''));

// 1 222 333 4444

Bây giờ có những tình huống bạn muốn thay thế ký tự đặc biệt bằng khoảng trắng chứ không phải không có gì. Giả sử rằng các phần khác nhau của số điện thoại được phân tách bằng dấu gạch ngang. Để có được một số điện thoại dễ đọc, bạn có thể muốn làm điều này

// Store phone number in a string
let myString = '1-222-333-4444';

// Replace dash with blank space
console.log(myString.replace(/[-]/g, ' '));

// 1 222 333 4444

psst. Nếu bạn chưa quen với việc phát triển web, bạn có thể kiểm tra tất cả các đoạn mã này bằng cách mở công cụ dành cho nhà phát triển của trình duyệt ngay bây giờ, sao chép/dán chúng vào bảng điều khiển và nhấn enter

Xóa các ký tự đặc biệt không xác định

Điều gì sẽ xảy ra nếu bạn muốn xóa các ký tự đặc biệt khỏi một chuỗi—nhưng bạn không thể chắc chắn những ký tự đặc biệt nào sẽ có trong đó?

Bạn có thể tiếp cận vấn đề này một cách tổng quát và tạo một biểu thức chính quy tìm kiếm kết quả phù hợp với mọi thứ trừ các chữ cái tiếng Anh, chữ số, dấu chấm câu phổ biến (dấu phẩy, dấu chấm phẩy, dấu gạch ngang, dấu chấm, dấu chấm than, dấu chấm hỏi) và khoảng trắng

// Store HTML markup with call to action in a string
let myString = 'To get support, dial #SUPPORT or call +1 222 333 4444!';

// Remove DOM elements and special characters
console.log(myString.replace(/[^a-zA-Z0-9,;\-.!? ]/g, ''));

// To get support, dial SUPPORT or call 1 222 333 4444!

Sau đó, bạn có thể điều chỉnh quy tắc RegEx khi cần để triển khai

Ví dụ: các ngôn ngữ khác có các bộ ký tự khác nhau, vì vậy bạn cần điều chỉnh biểu thức chính quy để đảm bảo rằng việc sử dụng phương thức

// Store phone number in a string
let myString = '+1 222 333 4444';

// Remove + sign
console.log(myString.replace(/[+]/g, ''));

// 1 222 333 4444

0 của bạn không ăn theo các chữ cái không phải tiếng Anh

Ngoài ra, tùy thuộc vào những ký tự đặc biệt mà bạn muốn được lưu trữ trong

// Store phone number in a string
let myString = '(+1) 222 333 4444';

// Remove brackets and + sign
console.log(myString.replace(/[(+)]/g, ''));

// 1 222 333 4444

2, bạn có thể muốn hoặc không muốn thêm/xóa một số vào/khỏi biểu thức chính quy của mình

Xóa thẻ HTML

Hãy thử các biểu thức chính quy ở trên đối với các chuỗi chứa các thẻ HTML, và bạn sẽ thấy rằng, mặc dù nó loại bỏ các dấu ngoặc nhọn (

// Store phone number in a string
let myString = '(+1) 222 333 4444';

// Remove brackets and + sign
console.log(myString.replace(/[(+)]/g, ''));

// 1 222 333 4444

6), nó vẫn để lại tên của các thẻ (i. e. , div, p, b, i, v.v. ) hoặc các thuộc tính chứa trong chúng (i. e. , href, lớp, id, phong cách)

Nếu chuỗi của bạn có các ký tự đặc biệt vì nó chứa đánh dấu HTML được phân tích cú pháp, bạn sẽ cần tiếp cận RegEx của mình theo cách khác

// Store HTML markup in a string
let myString = '
Call us to get support!
';

// Remove HTML tags from string
console.log(myString.replace(/<[^>]*>/g, ''));

// Call us to get support!

Bạn cũng có thể kết hợp biểu thức chính quy cho các thẻ HTML với biểu thức cho các ký tự đặc biệt trong cùng một quy tắc bằng cách tách chúng bằng một thanh dọc (

// Store phone number in a string
let myString = '(+1) 222 333 4444';

// Remove brackets and + sign
console.log(myString.replace(/[(+)]/g, ''));

// 1 222 333 4444

7)

// Store call to action in a string
let myString = '
To get support, dial #SUPPORT or call +1 222 333 4444!
';

// Remove special characters from call to action
console.log(myString.replace(/<[^>]*>|[^a-zA-Z0-9,;\-.!?<> ]/g, ''));

// To get support, dial SUPPORT or call 1 222 333 4444!

Các mẫu RegEx để sử dụng

Chỉ Giữ Chữ Cái

Khớp tất cả các ký tự và ký hiệu ngoại trừ các chữ cái trong bảng chữ cái tiếng Anh và khoảng trống

/[^a-zA-Z ]/g

Chỉ Giữ Chữ Cái và Chữ Số

Khớp tất cả các ký tự và ký hiệu ngoại trừ các chữ cái trong bảng chữ cái tiếng Anh, các chữ số từ 0 đến 9 và khoảng trống

/[^a-zA-Z0-9 ]/g

Chỉ giữ các chữ cái, chữ số và dấu chấm câu

Khớp tất cả các ký tự và ký hiệu ngoại trừ các chữ cái trong bảng chữ cái tiếng Anh, các chữ số từ 0 đến 9, dấu phẩy, dấu hai chấm, dấu chấm phẩy, dấu gạch ngang, dấu chấm, dấu chấm hỏi, dấu chấm than và khoảng trống

/[^a-zA-Z0-9,:;\-.?! ]/g

Tóm lại là

Phương pháp

// Store phone number in a string
let myString = '+1 222 333 4444';

// Remove + sign
console.log(myString.replace(/[+]/g, ''));

// 1 222 333 4444

0 rất dễ sử dụng. Mặt khác, RegEx có thể khó thành thạo

Dành thời gian để suy nghĩ về các đầu vào của phương thức này—bạn có thể mong đợi điều gì một cách hợp lý sẽ được lưu trữ trong chuỗi đó—sau đó tạo một biểu thức chính quy đáp ứng đầy đủ hầu hết các trường hợp sử dụng

Thử nghiệm với các đầu vào thực sẽ giúp bạn kiểm tra độ rộng và độ sâu của RegEx của mình và bạn có thể sẽ phát hiện ra một vài trường hợp cạnh cần tính đến. Sẽ luôn có ngoại lệ và thật tốt khi có một số loại giám sát khi phương pháp của bạn gặp phải chúng

Làm cách nào để thoát các ký tự đặc biệt trong chuỗi JavaScript?

Làm cách nào để thay thế các ký tự đặc biệt trong JavaScript?

Làm cách nào để thoát các ký tự đặc biệt trong regex JavaScript?

Làm cách nào để sử dụng ký tự thoát trong JavaScript?