Mã hóa văn bản thành các thực thể HTML
Hướng Dẫn : Hướng dẫn sử dụng:
Nhập văn bản: Nhập văn bản bạn muốn mã hóa vào khung đầu tiên.
Nút "Mã hóa": Nhấn vào nút "Mã hóa" để chuyển đổi văn bản thành các thực thể HTML.
Nút "Làm mới": Sử dụng nút "Làm mới" để xóa nội dung hiện tại trong khung nhập văn bản.
Khung mã hóa: Văn bản đã mã hóa sẽ hiển thị trong khung dưới.
Nút "Copy": Nhấn vào nút "Copy" để sao chép nội dung đã mã hóa vào clipboard.
Cách hoạt động:
Mã hóa văn bản: Văn bản sẽ được mã hóa để thay thế các ký tự đặc biệt bằng các thực thể HTML tương ứng.
Làm mới khung nhập: Xóa sạch nội dung khung nhập để dễ dàng nhập văn bản mới. Sao chép kết quả: Dễ dàng sao chép văn bản đã mã hóa để sử dụng trong mã HTML của bạn.
HƯỚNG DẪN TẠO CÔNG CỤ MÃ HÓA VĂN BẢN THÀNH CÁC THỰC THỂ HTML :
Code HTML tạo công cụ Mã hóa văn bản thành các thực thể HTML (HTML Entity Encoder)
Ở khung mã hóa có thêm nút copy code
Ở khung nhập dữ liệu có thêm nút làm mới (xoá)
Dưới đây là mã HTML để tạo một công cụ mã hóa văn bản thành các thực thể HTML:
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Công Cụ Mã Hóa Văn Bản Thành Các Thực Thể HTML</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 20px;
display: flex;
flex-direction: column;
align-items: center;
}
h1 {
color: #333;
}
textarea {
width: 100%;
max-width: 600px;
height: 150px;
margin-bottom: 10px;
padding: 10px;
font-size: 16px;
border-radius: 5px;
border: 1px solid #ccc;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
border-radius: 5px;
border: none;
background-color: #4CAF50;
color: white;
margin-right: 10px;
}
.button-group {
display: flex;
justify-content: flex-start;
margin-bottom: 20px;
}
#encodedText {
width: 100%;
max-width: 600px;
height: 150px;
padding: 10px;
font-size: 16px;
border-radius: 5px;
border: 1px solid #ccc;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
background-color: #f0f0f0;
margin-bottom: 10px;
}
</style>
</head>
<body>
<h1>Mã hóa văn bản thành các thực thể HTML</h1>
<!-- Khung nhập văn bản -->
<textarea id="inputText" placeholder="Nhập văn bản cần mã hóa..."></textarea>
<div class="button-group">
<button onclick="encodeToHTMLEntities()">Mã hóa</button>
<button onclick="clearInput()">Làm mới</button>
</div>
<!-- Khung mã hóa kết quả -->
<textarea id="encodedText" placeholder="Văn bản đã mã hóa sẽ hiển thị ở đây..." readonly></textarea>
<div class="button-group">
<button onclick="copyToClipboard()">Copy</button>
</div>
<script>
// Hàm mã hóa văn bản thành các thực thể HTML
function encodeToHTMLEntities() {
const inputText = document.getElementById("inputText").value;
const encodedText = inputText.replace(/[\u00A0-\u9999<>\&]/gim, function(i) {
return '&#'+i.charCodeAt(0)+';';
});
document.getElementById("encodedText").value = encodedText;
}
// Hàm xóa nội dung trong khung nhập văn bản
function clearInput() {
document.getElementById("inputText").value = '';
}
// Hàm sao chép nội dung từ khung mã hóa vào clipboard
function copyToClipboard() {
const encodedText = document.getElementById("encodedText");
encodedText.select();
encodedText.setSelectionRange(0, 99999); // Dành cho thiết bị di động
document.execCommand("copy");
alert("Đã sao chép mã hóa vào clipboard!");
}
</script>
</body>
</html>Bạn có thể sử dụng mã này để mã hóa các ký tự đặc biệt trong văn bản thành các thực thể HTML tương ứng.
