Làm cách nào để bạn chuyển các ký tự đặc biệt trong javascript?

Xem các ký tự đặc biệt của Pen JavaScript Escapes để sử dụng trong HTML - string-ex-31 của w3resource [@w3resource] trên CodePen

Cải thiện giải pháp mẫu này và đăng mã của bạn qua Disqus

Trước. Viết hàm JavaScript kiểm tra xem một chuỗi có kết thúc bằng hậu tố được chỉ định không.
Tiếp theo. Viết hàm JavaScript để xóa các ký tự ASCII không in được.

Mức độ khó của bài tập này là gì?

Kiểm tra kỹ năng Lập trình của bạn với bài kiểm tra của w3resource

JavaScript. Lời khuyên trong ngày

Lọc các giá trị duy nhất

Đối với tất cả những người hâm mộ ES6 của bạn, chúng ta có thể tạo một mảng mới chỉ chứa các giá trị duy nhất bằng cách sử dụng đối tượng Set với toán tử Spread

HTML contains special characters such as ‘,’ ‘/,’ and many more such as single and double commas. These special characters are used for the HTML tag, such as ‘’ is used to close the HTML tag. This tutorial teaches us to escape HTML special characters in JavaScript.

Bây giờ, câu hỏi đặt ra là nếu chúng ta muốn sử dụng các ký tự này bên trong nội dung HTML thì sao?

Ví dụ: chúng ta cần hiển thị chuỗi bên dưới cho trình duyệt

 tutorialsPoint 

Nếu chúng tôi thêm trực tiếp chuỗi trên vào HTML, nó được coi là thẻ in đậm nhưng chúng tôi muốn sử dụng nó dưới dạng chuỗi

Để khắc phục vấn đề trên, chúng ta phải sử dụng Unicode cho tất cả các ký tự đặc biệt. Ở đây, chúng tôi sẽ thay thế tất cả các ký tự đặc biệt bằng Unicode để thoát khỏi các ký tự đặc biệt HTML và sử dụng chúng bên trong chuỗi HTML

Có nhiều cách tiếp cận khác nhau để giải quyết vấn đề trên được đưa ra dưới đây

• Sử dụng Phương thức createTextNode[]
• Sử dụng thuộc tính textContent
• Sử dụng phương thức thay thế[]

Sử dụng phương thức createTextNode[]

Trong cách tiếp cận này, chúng ta sẽ sử dụng phương thức createTextNode[] từ HTML DOM. Chúng ta chỉ cần truyền chuỗi cho phương thức làm đối số, phương thức này trả về chuỗi được mã hóa

cú pháp

Var converted_string = document.createTextNode[string];

Thông số

• Chuỗi - Chúng ta có thể chuyển bất kỳ chuỗi HTML nào làm đối số để thoát khỏi các ký tự đặc biệt và mã hóa nó

ví dụ 1

Ví dụ dưới đây minh họa việc sử dụng phương thức createTextNode[string] trong JavaScript

   
Escape HTML special Chars in JavaScript.
   
 String After escaping the special characters: 
   
 
   

Đối với đầu ra ví dụ trên, người dùng có thể quan sát thấy rằng chúng tôi đã tạo một chuỗi được mã hóa bằng cách sử dụng phương thức createTextNode[] và chèn nó vào HTML DOM. Nó hiển thị các ký tự đặc biệt mà không coi chúng là một thành phần thẻ

Sử dụng thuộc tính textContent

Chúng ta có thể tạo một phần tử HTML trong JavaScript và thêm chuỗi HTML. Chúng ta có thể sử dụng thuộc tính textContent của phần tử HTML Textarea và chèn chuỗi HTML. Sau đó, chúng ta có thể lấy chuỗi được mã hóa bằng Unicode bằng thuộc tính innerHTML

cú pháp

let textAreaDiv = document.createElement[ 'textarea' ];
textAreaDiv.textContent = HTML_String;
let encoded_string = textAreaDiv.innerHTML;

Thông số

• HTML_string - Chúng tôi có thể chuyển bất kỳ chuỗi HTML nào mà chúng tôi muốn mã hóa thành tham số này

ví dụ 2

Người dùng có thể làm theo ví dụ dưới đây để xem trình diễn của phương pháp trên

   
Escape HTML special Chars in javascript.
   
 String After escaping the special characters. 
   
 
   

Người dùng có thể thấy trong đầu ra bên dưới cách chúng tôi có thể mã hóa chuỗi bằng thuộc tính textContent

Sử dụng phương thức Replace[]

Trong cách tiếp cận này, chúng ta sẽ sử dụng phương thức replace[] của JavaScript. Chúng ta có thể sử dụng phương thức replace[] để thay thế ký tự này bằng ký tự khác. Ở đây, chúng ta sẽ thay thế tất cả các ký tự đặc biệt trong chuỗi HTML bằng Unicode của chúng bằng cách sử dụng phương thức replace[]

cú pháp

html_string.replace[ old_char, new_char ]

Thông số

• Html_string − Đây là một chuỗi mà chúng ta cần thoát khỏi các ký tự đặc biệt

• Old_char − Là một ký tự trong chuỗi cần được thay thế

• New_char − Là ký tự mà chúng ta sẽ thêm vào chuỗi tại vị trí của ký tự cũ

ví dụ 3

Ví dụ dưới đây minh họa cách chúng ta có thể mã hóa chuỗi HTML bằng cách thay thế các ký tự đặc biệt bằng phương thức replace[]

   
Escape HTML special chars
   
 Result after escaping the special characters. 
   
   

Người dùng có thể thấy rằng chúng tôi đã thay thế thành công tất cả các ký tự đặc biệt bằng cách sử dụng phương thức thay thế và chúng tôi có thể hiển thị chuỗi nguyên trạng với các ký tự đặc biệt

Sự kết luận

Trong hướng dẫn này, chúng ta đã học được ba cách để thay thế các ký tự đặc biệt trong HTML. Người dùng có thể sử dụng bất kỳ phương pháp nào theo yêu cầu của họ

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

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

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