Tôi đã viết một chức năng nhỏ bé làm điều này. Nó chỉ thoát ", &, < và > (nhưng thường thì đó là tất cả những gì bạn cần). Nó thanh lịch hơn một chút sau đó các giải pháp được đề xuất trước đó ở chỗ nó chỉ sử dụng một .replace() để thực hiện tất cả các chuyển đổi. .EDIT 2: Reduced code complexity making the function even smaller and neater, if you're curious about the original code see end of this answer.) Nội phân chính - Trốn thoát / và 'quá
- Chức năng Escapehtml gốc
- Kéo và thả
- Hỗ trợ trình duyệt
- Ví dụ kéo và thả HTML
- Tạo một phần tử có thể kéo
- Những gì để kéo - OnDragStart và SetData ()
- Dùng ở đâu - Ondragover
- Làm giảm - ondrop
- Nhiều ví dụ hơn
function escapeHtml(text) {
'use strict';
return text.replace(/[\"&<>]/g, function (a) {
return { '"': '"', '&': '&', '<': '<', '>': '>' }[a];
});
}
Đây là JavaScript đơn giản, không có jQuery được sử dụng. Trốn thoát / và 'quáChức năng Escapehtml gốc Kéo và thảEDIT 2: Shortened this function too, in the same way.) function escapeHtml(text) {
'use strict';
return text.replace(/[\"&'\/<>]/g, function (a) {
return {
'"': '"', '&': '&', "'": ''',
'/': '/', '<': '<', '>': '>'
}[a];
});
}
Hỗ trợ trình duyệt Ví dụ kéo và thả HTML Adding function escapeHtml(text) {
'use strict';
return text.replace(/[\"&'\/<>]/g, function (a) {
return {
'"': '"', '&': '&', "'": ''',
'/': '/', '<': '<', '>': '>'
}[a];
});
}
2 and function escapeHtml(text) {
'use strict';
return text.replace(/[\"&'\/<>]/g, function (a) {
return {
'"': '"', '&': '&', "'": ''',
'/': '/', '<': '<', '>': '>'
}[a];
});
}
3 to the list of escaped characters isn't all that useful, since they do not have any special meaning in HTML and do not need to be escaped.Chức năng Escapehtml gốcKéo và thả The original function used a
variable (chr) to store the object needed for the .replace() callback. This variable also needed an extra anonymous function to scope it, making the function (needlessly) a little bit bigger and more complex. var escapeHtml = (function () {
'use strict';
var chr = { '"': '"', '&': '&', '<': '<', '>': '>' };
return function (text) {
return text.replace(/[\"&<>]/g, function (a) { return chr[a]; });
};
}());
Hỗ trợ trình duyệt
Ví dụ kéo và thả HTML
Tạo một phần tử có thể kéoNhững gì để kéo - OnDragStart và SetData ()
Kéo và thảHỗ trợ trình duyệt
Hỗ trợ trình duyệtVí dụ kéo và thả HTML
| Tạo một phần tử có thể kéo | | | | | |
|---|
| Những gì để kéo - OnDragStart và SetData () | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
Ví dụ kéo và thả HTMLTạo một phần tử có thể kéo Tạo một phần tử có thể kéoNhững gì để kéo - OnDragStart và SetData ()
Nhiều ví dụ hơn Nhiều ví dụ hơn Đây là JavaScript đơn giản, không có jQuery được sử dụng.
Chỉnh sửa để đáp lại nhận xét của MKMENT. Hàm trên có thể dễ dàng được mở rộng để bao gồm bất kỳ ký tự. Để chỉ định nhiều ký tự hơn để thoát ra, chỉ cần chèn cả hai vào lớp ký tự trong biểu thức chính quy (nghĩa là bên trong /[...]/g) và như một mục nhập trong đối tượng chr. (Chỉnh sửa 2: Đã rút ngắn chức năng này, theo cùng một cách.)
Tạo một phần tử có thể kéoNhững gì để kéo - OnDragStart và SetData ()
Những gì để kéo - OnDragStart và SetData ()Dùng ở đâu - Ondragover Làm giảm - ondrop Nhiều ví dụ hơn Đây là JavaScript đơn giản, không có jQuery được sử dụng.
ev.dataTransfer.setData("text", ev.target.id);
} Chỉnh sửa để đáp lại nhận xét của MKMENT.
Dùng ở đâu - OndragoverLàm giảm - ondrop Nhiều ví dụ hơn Đây là JavaScript đơn giản, không có jQuery được sử dụng.
Làm giảm - ondropNhiều ví dụ hơn Đây là JavaScript đơn giản, không có jQuery được sử dụng. Chỉnh sửa để đáp lại nhận xét của MKMENT.
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
} Hàm trên có thể dễ dàng được mở rộng để bao gồm bất kỳ ký tự. Để chỉ định nhiều ký tự hơn để thoát ra, chỉ cần chèn cả hai vào lớp ký tự trong biểu thức chính quy (nghĩa là bên trong /[...]/g) và như một mục nhập trong đối tượng chr. (Chỉnh sửa 2: Đã rút ngắn chức năng này, theo cùng một cách.) - Lưu ý rằng việc sử dụng
function escapeHtml(text) {
'use strict';
return text.replace(/[\"&'\/<>]/g, function (a) {
return {
'"': '"', '&': '&', "'": ''',
'/': '/', '<': '<', '>': '>'
}[a];
});
}
0 cho dấu nháy đơn (thực thể tượng trưng function escapeHtml(text) {
'use strict';
return text.replace(/[\"&'\/<>]/g, function (a) {
return {
'"': '"', '&': '&', "'": ''',
'/': '/', '<': '<', '>': '>'
}[a];
});
}
1 có thể đã được sử dụng thay thế - nó được định nghĩa trong XML, nhưng ban đầu không được đưa vào thông số HTML và do đó có thể không được hỗ trợ bởi tất cả các trình duyệt. mã hóa ký tự). Tôi cũng nhớ lại việc đọc ở đâu đó rằng việc sử dụng các thực thể thập phân được hỗ trợ rộng rãi hơn là sử dụng thập lục phân, nhưng dường như tôi không thể tìm thấy nguồn cho điều đó bây giờ. (Và không thể có nhiều trình duyệt ngoài kia không hỗ trợ các thực thể thập lục phân.) - Lưu ý: Thêm
function escapeHtml(text) {
'use strict';
return text.replace(/[\"&'\/<>]/g, function (a) {
return {
'"': '"', '&': '&', "'": ''',
'/': '/', '<': '<', '>': '>'
}[a];
});
}
2 và function escapeHtml(text) {
'use strict';
return text.replace(/[\"&'\/<>]/g, function (a) {
return {
'"': '"', '&': '&', "'": ''',
'/': '/', '<': '<', '>': '>'
}[a];
});
}
3 vào danh sách các ký tự đã trốn thoát không phải là hữu ích, vì chúng không có bất kỳ ý nghĩa đặc biệt nào trong HTML và không cần phải thoát ra. - Dữ liệu kéo là ID của phần tử bị kéo ("Drag1")
- Nối phần tử kéo vào phần tử thả
Nhiều ví dụ hơnThí dụCách kéo (và thả) một hình ảnh qua lại giữa hai yếu tố: Hãy tự mình thử »
| 
