Help us understand the problem. What is going on with this article?

JavaScriptでサロゲートペアを含む文字列をHTML Entityに変換する

HTML Entityへ変換

通常の文字列ならcharCodeAtで解決できますが、サロゲートペアは文字が崩れてしまうのでcodePointAtを利用します。

function convert(value) {
    let result = '';

    for (const word of value) {
        result += `&#x${word.codePointAt(0).toString(16)};`;
    }

    return result;
}

Example

console.log(convert('😇')); // > 😇
<p>こんにちは&#x1f607;</p>

結果:

こんにちは😇

HTML Entityから元に戻す

復元する場合はString.fromCharCodeの代わりにString.fromCodePointを利用します。

function revert(str) {
    return str.replace(/&#(.*?);/g, (m, p1) => String.fromCodePoint(`0${p1}`));
}

Example

console.log(revert('こんにちは&#x1f607;&#x1f607;&#x1f607;&#x1f607;')); // > こんにちは😇😇😇😇

HTML Entityとは

HTML エンティティとは、アンパサンド (&) で始まりセミコロン (;)で終わるテキスト (文字列) のひと固まりです。エンティティは(通常は HTML コードとして解釈される)予約済み文字や、(ノーブレークスペースのように) 見えない文字を表示するためによく使用されます。標準キーボードでは入力が難しい文字の代わりに使用することもできます。

https://developer.mozilla.org/ja/docs/Glossary/Entity より引用

何がうれしいの?

絵文字などのサロゲートペアに対応していないようなCMSなどでもサロゲートペアが使えるようになります(たぶん)。

※ HTMLを直接記述できるようなものの場合のみ

参考文献

soten_bluesky
最近RPAを始めたへっぽこフロントエンドエンジニア。 JavaScriptとかWebアクセシビリティに興味があります。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした