HTML Entityへ変換
通常の文字列ならcharCodeAtで解決できますが、サロゲートペアは文字が崩れてしまうのでcodePointAtを利用します。
function convert(value) {
return [...value].map((word) => {
return `&#x${word.codePointAt(0).toString(16)};`;
}).join('');
}
Example
const result = convert('😇')
console.log(result); // > 😇
<p>こんにちは😇</p> // こんにちは😇
HTML Entityから元に戻す
復元する場合はString.fromCharCodeの代わりにString.fromCodePointを利用します。
function revert(str) {
return str.replace(/&#(.*?);/g, (_, p1) => String.fromCodePoint(`0${p1}`));
}
Example
const result = revert('こんにちは😇😇😇😇');
console.log(result); // > こんにちは😇😇😇😇
HTML Entityとは
HTML エンティティとは、アンパサンド (&) で始まりセミコロン (;)で終わるテキスト (文字列) のひと固まりです。エンティティは（通常は HTML コードとして解釈される）予約済み文字や、(ノーブレークスペースのように) 見えない文字を表示するためによく使用されます。標準キーボードでは入力が難しい文字の代わりに使用することもできます。
https://developer.mozilla.org/ja/docs/Glossary/Entity より引用
何がうれしいの？
CMSなどにHTMLを直接入力できるような状況なら、CMSがサロゲートペアに対応していない場合でも絵文字を出力させることができるようになります。