javascript - JavaScript/jQuery を使用して属性値として HTML エンティティを割り当てます

Question

私は css-tricks でこのテクニックに従って、ウェブサイトにアイコンを追加しています: http://css-tricks.com/html-for-icon-font-usage/

私はCSSでこれを持っています：

[data-icon]:before {
  font-family: Symbol;
  content: attr(data-icon);
  speak: none;
}

ただし、私のインターフェイスの一部は jQuery を使用して生成されます。そのようなコントロールの 1 つを次に示します。

var $control = $('<div>', {
    'aria-hidden':'true'
    , 'data-icon': '&#57372;'
});

\e01c私はそれを, \\e01c,としてエンコードしようとしましたが、おそらく試しました。結果は常に同じです。アンパサンドの後のすべてが画面にレンダリングされます。これは、アンパサンドが&ソースコードのように表示されるか、バックスラッシュが表示されるためです。

CSSコンテンツを連結してみました：

content: "&" attr(data-icon) ";";

データに数値を含めるだけですが、アンパサンドは独自にエンコードされて表示されます。

このエンティティをエンコードしてページに正しく出力する方法はありますか?

score 5 · Accepted Answer

JavaScript でコードポイント 57372 をエンコードするには、'\ue01c'.

Unicode はそれを私的使用領域の割り当てられていないコードポイントとして定義しているため、うまくレンダリングされないことに注意してください。":

貸切エリア

範囲: E000-F8FF

私用エリアには文字割り当てが含まれていないため、このエリアには文字コード表や名前リストは提供されていません。

たぶん、別のコードポイントを意味していたのでしょう。

score 2 · Accepted Answer

これは少しハックですが、うまくいくはずです:

'data-icon': $("<span>&#57372;</span>").contents().get(0).nodeValue

次のように機能します。

$("<span>&entity;</span>")type の子を 1 つ持つ span 要素を作成しますtextNode。.contents()テキストノードを含むすべての子ノードを抽出するために使用され、属性nodeValueに割り当てられdata-iconます。

2 に答える 2