web-dev-qa-db-ja.com

jquery .text（）およびunicode

"Open Lock"文字 をHTMLリンクテキストに表示したい。

直接実行すると、_<a id="myId">&#x1f512;</a>_で正しく表示されますが、次のようにjQuery .text()関数で動的に変更する方法はありません。

_ $("#myID").text(openLockText);
_

OpenLockTextには何を入れればよいですか？

javascriptjqueryhtmlunicode
31
janesconference

JavaScriptは内部的にUTF-16のみをサポートしています。

これは拡張された32ビットUTF文字（「Basic Multilingual Plane」にはありません）であるため、「UTF-16サロゲートペア」を挿入する必要があります。これは、リンク先と同じページで役立ちます。

0xD83D 0xDD13

つまり.

$('#myId').text('\ud83d\udd13');

詳細は RFC 4627 にあります。これは厳密に言うとJSONの形式です。

38
Alnitak

文字を引用符付きの文字列として直接そこに置くことができます。

$("#myID").text('????');

ファイルがUTF-8でエンコードされ、適切に 文字エンコードを宣言する である場合。 （理論的には、代わりにUTF-16またはUTF-32を使用することもできますが、ブラウザーがそれらをサポートすることは期待できません。）

ECMAScript標準によると、ソースドキュメントで非BMP文字を直接サポートすることはオプションですが、最新のブラウザではそれらを使用できます。当然、UTF-8を処理できるエディターが必要であり、いくつかのインプットメソッドが必要です。たとえば、 my 完全なUnicode入力 ユーティリティ。

質問には気づかれていないいくつかの間違いが含まれています。id属性値では大文字と小文字が区別されるため、スペルmyIdをmyIDに修正する必要があります。また、OPEN LOCK文字はU + 1F512ではなくU + 1F513であるため、参照&#x1f512;は誤った文字を返します。

さらに、OPEN LOCKを含むフォントはほとんどなく、ブラウザー、特にIEは、システム内の一部のフォントにグリフが含まれていても、グリフを見つけることが困難な場合があるため、ブラウザーにヘルプを提供し、文字を含むことがわかっているフォントのリストを宣言する必要があります。優先順に。例：

<style>
#myID { font-family: Symbola, Quivira, Segoe UI Symbol; }
</style>
<a id="myID">stuff</a>
<script>
 $("#myID").text('????');
</script>

非BMP文字は内部的にサロゲートペアとして表され、ペアのコンポーネントに\u表記を使用して書き込むことができます、しかし、これは非常に直感的ではありません

8
Jukka K. Korpela

edited— Ifこれは、単一のUTF-16文字で表すことができるUnicodeコードポイントであり、使用できますこのような状況でのJavaScriptエスケープシーケンス：

_$('#foo').text('\uXXXX');
_

ただし、キャラクターにはより多くのビットが必要なため、それは機能しません。文字をUTF-16として表すことができるバイトシーケンスを構築することはおそらく可能ですが、それは面倒です。 .html()を使用します。

すべてのフォントがそのような「エキゾチックな」コードポイントのグリフを提供するわけではないことに注意してください。私の経験では、信じられないほど醜いものを提供するものです。

8
Pointy

次のスクリプトは、UTF32 16進値をUTF16ペアに変換する必要があります

function toUTF16Pair(hex) {
  hex = hex.replace(/[&#x;]/g,'');
    var x = parseInt(hex, 16);
    if (x >= 0x10000 && x <= 0x10FFFF) {
        var first = Math.floor((x - 0x10000) / 0x400) + 0xD800;
        var second = ((x - 0x10000) % 0x400) + 0xDC00;
        return {
            first: first.toString(16).toUpperCase(),
            second: second.toString(16).toUpperCase(),
          combined: '\\u'+first.toString(16).toUpperCase() + '\\u'+second.toString(16).toUpperCase()
        };
    } else {
        return {}
    }
}
<input type='text' id='in' />
<input type='button' value='Click' onclick="document.getElementById('result').innerHTML = toUTF16Pair(document.getElementById('in').value).combined" />
<p id='result'></p>
2
Matas Vaitkevicius