HTMLリンクテキストに「OpenLock」文字を表示したいのですが。
直接実行すると、で正しく表示されますが、次のように<a id="myId">🔒</a>
jQuery.text()
関数で動的に変更する方法が見つかりませんでした。
$("#myID").text(openLockText);
openLockTextには何を入れる必要がありますか?
HTMLリンクテキストに「OpenLock」文字を表示したいのですが。
直接実行すると、で正しく表示されますが、次のように<a id="myId">🔒</a>
jQuery.text()
関数で動的に変更する方法が見つかりませんでした。
$("#myID").text(openLockText);
openLockTextには何を入れる必要がありますか?
Javascript は内部的に UTF-16 のみをサポートします。
これは拡張 32 ビット UTF 文字であるため (「Basic Multilingual Plane」にはありません)、「UTF-16 サロゲート ペア」を挿入する必要があります。これは、リンク先の同じページで提供されています。
0xD83D 0xDD13
すなわち
$('#myId').text('\ud83d\udd13');
詳細については、RFC 4627を参照してください。これは厳密には JSON の形式です。
編集済み—単一のUTF-16文字で表すことができるUnicodeコードポイントである場合、次のような状況でJavaScriptエスケープシーケンスを使用できます。
$('#foo').text('\uXXXX');
ただし、キャラクターはより多くのビットを必要とするため、それは機能しません。文字をUTF-16として表現できるバイトシーケンスを構築することはおそらく可能ですが、それは面倒です。私は一緒に行き.html()
ます。
すべてのフォントがそのような「エキゾチック」なコードポイントのグリフを提供するわけではないことに注意してください。私の経験では、非常に醜いフォントを提供します。
引用符で囲まれた文字列として、文字を直接そこに置くことができます。
$("#myID").text('');
ファイルが UTF-8 でエンコードされていて、文字エンコーディングを適切に宣言している場合に限ります。(理論的には、代わりに UTF-16 または UTF-32 を使用することもできますが、ブラウザーがそれらをサポートすることは想定されていません。)
ECMAScript 標準によると、ソース ドキュメントで非 BMP 文字を直接サポートすることはオプションですが、最新のブラウザーではそれらを使用できます。当然、UTF-8 を処理できるエディターが必要であり、いくつかの入力メソッドが必要です。たとえば、私の完全な Unicode 入力ユーティリティを参照してください。
この質問には、見過ごされていたいくつかの間違いが含まれています。id
属性値は大文字と小文字が区別されるため、スペルmyId
を に修正する必要がありますmyID
。また、OPEN LOCK 文字は U+1F512 ではなく U+1F513 であるため、参照🔒
は間違った文字になります。
さらに、OPEN LOCK を含むフォントはほとんどなく、ブラウザー、特に IE では、システム内のフォントにグリフが含まれている場合でも、グリフを見つけるのが難しい場合があるため、ブラウザーにヘルプを提供し、その文字を含むことがわかっているフォントのリストを宣言する必要があります。優先順に。例:
<style>
#myID { font-family: Symbola, Quivira, Segoe UI Symbol; }
</style>
<a id="myID">stuff</a>
<script>
$("#myID").text('');
</script>
非 BMP 文字は内部的にサロゲート ペアとして表され、ペアのコンポーネントの表記法を使用して記述でき\u
ますが、これは非常に直感的ではありません。
次のスクリプトは、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>