Trong bài viết này, chúng ta sẽ tìm hiểu cách thoát khỏi các ký tự đặc biệt html chỉ bằng cách sử dụng một dòng mã trong JavaScript. Đây là đoạn mã JavaScript một dòng sử dụng một trong những tính năng phổ biến nhất của ES6 => Arrow Function
Hãy xác định chức năng ngắn này
const escape = str => str.replace[/&/g, '&'].replace[//g, '>'].replace[/'/g, '''].replace[/"/g, '"'];
const escape = str => str.replace[/[&"']/g, m => [{ '&': '&', '', '"': '"', "'": ''' }][m]];
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
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 để kiểm tra 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
.. title="return confirm['Delete this item: ?';" ...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?%3FThô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
Trong phần này đã trình bày giải pháp thay thế các ký tự HTML đặc biệt bằng mã [kiểm tra danh sách ký tự tại đây]
Ghi chú. giải pháp này hoạt động dưới Nút. js.
// ONLINE-RUNNER:browser;
var HTMLUtils = new function[] {
var rules = [
{ expression: /&/g, replacement: '&' }, // keep this rule at first position
{ expression: //g, replacement: '>' },
{ expression: /"/g, replacement: '"' },
{ expression: /'/g, replacement: ''' } // or ' or '
// ' is not supported by IE8
// ' is not defined in HTML 4
];
this.escape = function[html] {
var result = html;
for [var i = 0; i < rules.length; ++i] {
var rule = rules[i];
result = result.replace[rule.expression, rule.replacement];
}
return result;
}
};
// Usage example:
var escapedHtml = HTMLUtils.escape['Hi! How are you?'];
// Printing in body:
document.body.innerHTML = escapedHtml; // we can display it as text too
// Printing in console:
console.log[escapedHtml]; // <div class="item">Hi! How are you?</div>
2. Ví dụ về thuộc tính innerText
Bằng cách đặt văn bản trên thành phần bằng cách sử dụng innerText và lấy lại văn bản đó bằng innerHTML, chúng tôi có thể thoát khỏi các ký tự HTML đặc biệt
Ghi chú. theo mặc định, phương pháp này không hoạt động trong Nút. js vì DOM không được hỗ trợ ở đó [thư viện bổ sung bắt buộc]
Làm cách nào để thoát khỏi các thực thể HTML trong JavaScript?
Làm cách nào tôi có thể thoát các ký tự đặc biệt HTML trong JavaScript? .Sử dụng Phương thức createTextNode[]Sử dụng thuộc tính textContentSử dụng phương thức thay thế[]Làm cách nào để sử dụng thoát trong JavaScript?
Javascript sử dụng '\' [dấu gạch chéo ngược] phía trước làm ký tự thoát . Để in dấu ngoặc kép, sử dụng các ký tự thoát, chúng tôi có hai tùy chọn. Đối với dấu nháy đơn. \' [dấu gạch chéo ngược theo sau bởi dấu nháy đơn] Đối với dấu ngoặc kép. \” [dấu gạch chéo ngược theo sau bởi dấu ngoặc kép]Làm cách nào để bỏ thoát HTML trong JavaScript?
Thực thể HTML Unescape có Vùng Văn bản . Thao tác này sẽ bỏ thoát văn bản, vì vậy chúng ta có thể trả lại văn bản chưa thoát sau đó bằng cách lấy văn bản từ vùng văn bản. Chúng tôi có một hàm htmlDecode lấy một chuỗi đầu vào làm tham số. put our escaped text in a text area. This will unescape the text, so we can return the unescaped text afterward by getting the text from the text area. We have an htmlDecode function that takes an input string as a parameter.Thoát khỏi HTML có nghĩa là gì?
Thoát trong HTML có nghĩa là bạn đang thay thế một số ký tự đặc biệt bằng ký tự khác . Trong HTML nó có nghĩa là thông thường, bạn thay thế e. e. g < hoặc > hoặc " hoặc &. Những ký tự này có ý nghĩa đặc biệt trong HTML. Hãy tưởng tượng, bạn viết Và văn bản sẽ xuất hiện dưới dạng hello, world. Và văn bản sẽ xuất hiện dưới dạng hello, world. Và văn bản sẽ xuất hiện dưới dạng hello, world. Và văn bản sẽ xuất hiện dưới dạng hello, world. Và văn bản sẽ xuất hiện dưới dạng hello, world. Và văn bản sẽ xuất hiện dưới dạng hello, world. Và văn bản sẽ xuất hiện dưới dạng hello, world. Và văn bản sẽ xuất hiện dưới dạng hello, world. Và văn bản sẽ xuất hiện dưới dạng hello, world. Và văn bản sẽ xuất hiện dưới dạng hello, world. Và văn bản sẽ xuất hiện dưới dạng hello, world. Và văn bản sẽ xuất hiện dưới dạng hello, world. Và văn bản sẽ xuất hiện dưới dạng hello, world. Và văn bản sẽ xuất hiện dưới dạng hello, world. Và văn bản sẽ xuất hiện dưới dạng hello, world. Và văn bản sẽ xuất hiện dưới dạng hello, world. Và văn bản sẽ xuất hiện dưới dạng hello, world. Và văn bản sẽ xuất hiện dưới dạng hello, world. Và văn bản sẽ xuất hiện dưới dạng hello, world. Và văn bản sẽ xuất hiện dưới dạng hello, world. Và văn bản sẽ xuất hiện dưới dạng hello, world. Và văn bản sẽ xuất hiện dưới dạng hello, world. Và văn bản sẽ xuất hiện dưới dạng hello, world. Và văn bản sẽ xuất hiện dưới dạng hello, world. Và văn bản sẽ xuất hiện dưới dạng hello, world. Và văn bản sẽ xuất hiện dưới dạng hello, world. Và văn bản sẽ xuất hiện dưới dạng hello, world. Và văn bản sẽ xuất hiện dưới dạng hello, world. Và văn bản sẽ xuất hiện dưới dạng hello, world. Và văn bản sẽ xuất hiện dưới dạng hello, world.