JSFiddle - React, Tailwind, and code Playground

by Sergei Sokolov

HTML

<p>
ниже – див, содержимое которого «зашифруем»:
</p>
<div id="toCode">
	<p>
	ПРивет, мир!
	</p>
</div>
<div class="sepa"><button id="btn-copy">Скопировать html ↓</button></div>
<textarea rows="5" cols="50" id="out">
здесь будет "код"
</textarea>
<br>
<button id="btn-encode">зашифровать</button>
<button id="btn-decode">расшифровать</button>

CSS

#toCode{
	padding: 2px; margin:2px; background-color:#FF9;
}
.sepa {border-top: 1px solid #999;border-bottom: 1px solid #999;}

JavaScript

/**
 * для вопроса https://toster.ru/q/435481
 * Как преобразовать HTML-код в указанный формат?
 */

var els = {
  out: document.getElementById("out"),
	toCode: document.getElementById("toCode")
},
btns = {
  encode: document.getElementById("btn-encode"),
	decode: document.getElementById("btn-decode"),
	copy: document.getElementById("btn-copy")
}

function encode(s) {
  var i, out = "";
	for( i = 0; i < s.length; i++) out += s.charCodeAt(i) + '!';
	return out;
}

function decode(s) {
  return s.split('!').map(function(n){return String.fromCharCode(n)}).join('');
}

function onEncode(){
  els.out.innerHTML = encode(
	  els.toCode.innerHTML
	);
}

function onDecode() {
  els.out.innerHTML = decode( els.out.innerHTML);
}

function onCopy() {
  els.out.innerHTML = els.toCode.innerHTML;
}

btns.encode.addEventListener('click', onEncode);
btns.decode.addEventListener('click', onDecode);
btns.copy.addEventListener('click', onCopy);