Encoding and Decoding Entities

This JavaScript program demonstrates how to encode and decode HTML entities.

EncodeDecodeEntities.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>XoaX.net's JavaScript Demo</title>
		<script type="text/javascript" src="EncodeDecodeEntities.js"></script>
	</head>
	<body onload="Loaded()">
		<h3>Press F12 to see the log and see how various methods perform.</h3>
	</body>
</html>

EncodeDecodeEntities.js

function Loaded() {
	console.log("Encodes");
	const ksString = '<p>Insert HTML "Paragraph" & Test</p>';
	console.log(EncodeEntities(ksString));
	console.log(EncodeEntitiesViaTextArea(ksString));
	console.log(EncodeNumericEntities(ksString));
	console.log(EncodeViaTextNode(ksString));
	console.log(EncodeViaTextContent(ksString));
	console.log(EncodeNoRecode(ksString));

	const ksEncodedNumbers = EncodeNoRecode(ksString);
	console.log("Decodes of " + ksEncodedNumbers);
	console.log(DecodeViaTextArea(ksEncodedNumbers));
	console.log(DecodeViaReplace(ksEncodedNumbers));
	console.log(DecodeViaTextContent(ksEncodedNumbers));

	const ksEncodedNames = EncodeEntities(ksString);
	console.log("Decodes of " + ksEncodedNames);
	console.log(DecodeViaTextArea(ksEncodedNames));
	console.log(DecodeViaReplace(ksEncodedNames));
	console.log(DecodeViaTextContent(ksEncodedNames));
}

function EncodeEntities(qString) {
	const kqMapping = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;',"'": '&39;'};
	return String(qString).replace(/[&<>"']/g, c => kqMapping[c]);
}

// This does not encode single or double quotes
function EncodeEntitiesViaTextArea(qString) {
	const qTextAreaElement = document.createElement('textarea');
	qTextAreaElement.innerText = qString;
	return qTextAreaElement.innerHTML;
}

function EncodeNumericEntities(qString) {
	return qString.replace(/[\u00A0-\u9999<>\&]/g, i => '&#'+i.charCodeAt(0)+';');
}

function EncodeViaTextNode(qString) {
	let qDiv = document.createElement('div');
	let qTextNode = document.createTextNode(qString);
	qDiv.appendChild(qTextNode);
	return qDiv.innerHTML;
}

function EncodeViaTextContent(qString) {
	let qDiv = document.createElement('div');
	qDiv.textContent = qString;
	return qDiv.innerHTML;
}

function EncodeNoRecode(qString) {
	return qString.replace(/([\u00A0-\u9999<>&])(.|$)/g, function(cAsIs, cCurr, cNext) {
		if (cCurr !== '&' || cNext !== '#') {
			if (/[\u00A0-\u9999<>&]/.test(cNext)) {
				cNext = '&#' + cNext.charCodeAt(0) + ';';
			}
			return '&#' + cCurr.charCodeAt(0) + ';' + cNext;
		}
		return cAsIs;
	});
}

function DecodeViaTextArea(qString) {
	let qTextArea = document.createElement('textarea');
	qTextArea.innerHTML = qString;
	return qTextArea.value;
}

function DecodeViaReplace(qString) {
	return qString.replace(/&#([0-9]+);/g, function(cAsIs, cInt) {
		return String.fromCharCode(parseInt(cInt));
	});
}

function DecodeViaTextContent(qString) {
	const qParser = new DOMParser();
	const qDoc = qParser.parseFromString(qString, 'text/html');
	return qDoc.documentElement.textContent;
}

Core JavaScript

Encoding and Decoding Entities

EncodeDecodeEntities.html

EncodeDecodeEntities.js

Output