search

Làm cách nào để chuyển đổi các ký tự đặc biệt HTML trong JavaScript?

Ngày đăng: 23/12/2022
Trả lời: 0
Lượt xem: 193

Mọi ngôn ngữ lập trình đều có các ký tự đặc biệt - các ký tự có ý nghĩa đặc biệt như xác định một biến, cuối dòng hoặc ngắt trong một số dữ liệu. JavaScript cũng không khác, vì vậy nó cung cấp một số chức năng mã hóa và giải mã các ký tự đặc biệt

Show

Nếu bạn đang tương tác giữa PHP và JavaScript, bạn cũng cần phải làm quen với các hàm PHP để mã hóa và giải mã các ký tự đặc biệt, đó là lý do tại sao chúng tôi đã tạo công cụ đặc biệt này để thử nghiệm và so sánh các hàm khác nhau

Mã hóa và giải mã bằng JavaScript và PHP

Biểu mẫu bên dưới cho phép bạn xem đầu ra của các hàm khác nhau được sử dụng để mã hóa các ký tự đặc biệt khi chúng xuất hiện ở dạng văn bản thuần túy hoặc tham số URL (theo dấu '?' trong URL). Trang này gọi các hàm PHP trực tiếp bằng cách sử dụng Ajax thay vì mô phỏng JavaScript. Nếu bạn có một chuỗi để giải mã, thay vào đó hãy sử dụng các nút bên phải

Các chức năng này thực hiện thay thế trên một số ký tự nhất định như được hiển thị trong bảng ở cuối trang và được mô tả ngắn gọn tại đây

  • Hàm thoát JavaScript thay thế hầu hết các ký hiệu dấu chấm câu bằng mã hex tương đương, nhưng được phát hiện là không phù hợp khi mã hóa ký tự UNICODE và đã được thay thế bằng hàm encodeURI
  • Hàm encodeURIComponent là một phần mở rộng của encodeURI, điểm khác biệt là nó cũng thoát khỏi các ký tự sau. , / ?. @ & = + $
  • Về phía PHP, sự khác biệt duy nhất giữa urlencode và rawurlencode là cái sau thoát khỏi ký tự trong khi urlencode sử dụng + thay thế được chấp nhận rộng rãi
  • Hàm htmlentities thoát các ký tự có ý nghĩa đặc biệt bên trong HTML bằng cách chèn các thực thể HTML vào vị trí của chúng (ví dụ:. & thay cho &). Xem bài viết của chúng tôi về Mã ký tự ASCII để biết thêm chi tiết
  • Tất cả các chức năng đều có chức năng 'giải mã' bổ sung mà hầu như ngược lại

Thoát khỏi dấu ngoặc kép và dấu ngoặc đơn

Một chức năng PHP thiết yếu khác có ích khi truyền dữ liệu sang JavaScript là dấu gạch chéo bổ sung sẽ thêm dấu gạch chéo ngược trước. dấu gạch chéo ngược, dấu ngoặc đơn và dấu ngoặc kép

Ví dụ: để lặp lại một biến PHP thành mã JavaScript

let sampleRawHTMLStr="";
let encodedOutput=encodeHTMLEntities(sampleRawHTMLStr);
// output: <py-script></py-script>
4

Trong HTML, chúng tôi sử dụng dấu ngoặc kép và trong dấu ngoặc đơn JavaScript, do đó, bất kỳ dấu ngoặc kép nào trong mã JavaScript sẽ cần được thoát để chúng không xung đột với dấu ngoặc kép HTML hoặc JavaScript

Để biết thêm chi tiết về cách thoát các biến PHP để sử dụng trong JavaScript, hãy xem bài viết liên quan của chúng tôi. Chuyển các biến PHP sang JavaScript

Bảng ký tự được mã hóa

Tại đây, bạn có thể thấy các hàm JavaScript và PHP khác nhau áp dụng như thế nào cho một loạt các ký tự phổ biến

Đầu vàoJavaScriptPHPescapeencodeURIencodeURIThành phầnurlencoderawurlencodehtmlentities%20%20%20+%20. %21. %21%21. @@@%40%40%40@#%23#%23%23%23#$%24$%24%24%24$%%25%25%25%25%25%^%5E%5E% . %3A. %3A%3A%3A. ;%3B;%3B%3B%3B;;. "%22%22%22%22%22"'%27''%27%27'\%5C%5C%5C%5C%5C\///%2F%2F%2F/?%3F?%3F

Thông số kỹ thuật của RFC 1738 khiến cho việc đọc trở nên hấp dẫn - vì tài liệu này đã 10 năm tuổi nhưng vẫn có thể áp dụng được

No plugins required. 2 strategies — (1) A HTML element & (2) Regex pattern implementations.

Trước khi đi sâu vào chi tiết triển khai, phần sau đây nhằm mục đích giới thiệu cách mã hóa/giải mã đoạn mã HTML tương ứng để chỉ định ngữ cảnh cho phần còn lại của bài viết này

Image by Author | Showcases the raw html string transformed into unicode characters <py-script></py-script> and vice-versaWhy is this necessary?

Các tài liệu kỹ thuật nói chung thường bao gồm các đoạn mã như một phần nội dung của nó để người đọc tự tham khảo trong tương lai. Do đó, khi các tài liệu nói trên được biên dịch kỹ thuật số và hiển thị ở định dạng HTML, do đó, việc mã hóa các thực thể HTML của các đoạn mã sẽ cần thiết để hiển thị và xem chính xác. Trong trường hợp cụ thể, vui lòng xem phần đã xuất bản sau đây đã nêu bật các khía cạnh của việc hiển thị đoạn mã trong bất kỳ tài liệu định dạng HTML nào

6 Thuộc tính & thẻ HTML hữu ích nhưng ít được biết đến

Các thẻ này tồn tại vì lý do chính đáng… Bao gồm ví dụ + trường hợp sử dụng

Trung bình. com

  • Note: Tags and 
     in particular have exemplified this in the above content.

Như đã nêu bởi nhà văn đồng nghiệp Vit Tertiumnon trong bài đăng của anh ấy

JS. Cách giải mã các thực thể HTML

Nếu bạn muốn thay đổi   và các thực thể HTML khác thành các ký tự đặc biệt thông thường

tertinon. Trung bình. com

Không có chức năng tích hợp JavaScript nào để mã hóa hoặc giải mã các thực thể HTML

Do đó, tôi cũng tin rằng sẽ có ích nếu chia sẻ hai phương tiện riêng biệt (đã được chứng minh) để thực hiện nhiệm vụ này theo chương trình cho những người khác trong cộng đồng trực tuyến

Method I. Using a HTML DOM Element

(Ghi chú. Chỉ là tuyên bố từ chối trách nhiệm, cách tiếp cận này ban đầu được lấy từ cùng một nhà văn phương tiện Vit Tertiumnon từ bài đăng của anh ấy ở trên nhưng có một số điều chỉnh nhất định)

  • Để mã hoá
function encodeHTMLEntities(text) {
  let textArea = document.createElement('textarea');
  textArea.innerText = text;
  let encodedOutput=textArea.innerHTML;
  let arr=encodedOutput.split('
');
  encodedOutput=arr.join('\n');
  return encodedOutput;
}
  • Cách sử dụng
let sampleRawHTMLStr="";
let encodedOutput=encodeHTMLEntities(sampleRawHTMLStr);
// output: <py-script></py-script>
  • Để giải mã 
    let sampleRawHTMLStr="";
    let encodedOutput=encodeHTMLEntities(sampleRawHTMLStr);
    // output: <py-script></py-script>
    1
function decodeHTMLEntities(text) {
  let textArea = document.createElement('textarea');
  textArea.innerHTML = text;
  return textArea.value;
}
  • Cách sử dụng
let decodedOutput=decodeHTMLEntities(encodedOutput);
// output:

Phương pháp II. Sử dụng các mẫu regex

Ngoài ra, cũng có thể sử dụng các mẫu biểu thức chính quy trong JavaScript để đạt được đầu ra mong muốn tương tự như trên

  • Để mã hoá
function encodeHTMLEntities(rawStr) {
  return rawStr.replace(/[\u00A0-\u9999<>\&]/g, ((i) => `&#${i.charCodeAt(0)};`));
}
  • Cách sử dụng
let sampleRawHTMLStr="";
let encodedOutput=encodeHTMLEntities(sampleRawHTMLStr);
// output: <py-script></py-script>
  • Để giải mã 
    let sampleRawHTMLStr="";
    let encodedOutput=encodeHTMLEntities(sampleRawHTMLStr);
    // output: <py-script></py-script>
    1
________số 8
  • Cách sử dụng
let decodedOutput=decodeHTMLEntities(encodedOutput);
// output:

Tóm tắt Phương pháp I & Phương pháp II

Dựa trên mỗi đầu ra tương ứng, cả hai phương pháp đã quản lý để mã hóa thành công 

let sampleRawHTMLStr="";
let encodedOutput=encodeHTMLEntities(sampleRawHTMLStr);
// output: <py-script></py-script>
3 —

I.