ユーザー生成コンテンツを一貫して表示するために JavaScript で HTML エンティティをエンコードする方法

JavaScript で HTML エンティティをエンコードする

ユーザーが作成したコンテンツを操作する場合、®、&、©、™ などのエンティティが表示されない場合がありますブラウザ間で一貫して。 JavaScript には、これらのエンティティを HTML でエンコードするためのメソッドがいくつか用意されています。

HTML エンティティへの変換

シンボルを対応する HTML エンティティに変換するには、次のコードを使用します。

<code class="js">var encodedStr = rawStr.replace(/[\u00A0-\u9999<>\&amp;]/g, function(i) {
   return '&amp;#'+i.charCodeAt(0)+';';
});</code>

上付き文字として表示

エンコードされたエンティティをカスタム スタイルで上付き文字として表示するには、CSS を使用します。

<code class="css">sup {
  font-size: 0.6em;
  padding-top: 0.2em;
}</code>

実装例

<code class="js">var regs = document.querySelectorAll('®');
for (var i = 0, l =regs.length; i < l; ++i ) {
  var div = document.createElement('sup');
  var text = document.createTextNode(encodedStr);
  div.appendChild(text);
  regs[i].parentNode.insertBefore(div);
}</code>

このコード:

1. ® 記号が付いたすべての要素を選択します。
2. sup 要素を作成し、選択した要素の前に追加します。
3. エンコードされた HTML エンティティを sup 要素に追加します。

その他の考慮事項

• UTF8 文字エンコーディングとデータベース ストレージを使用して、適切な表示を確保してください。
• ブラウザのフォント設定は、特定の文字の外観に影響を与える可能性があります。

Documentation

• String.charCodeAt : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/charCodeAt
• HTML 文字エンティティ: http://www.chucke.com/entities。 html

以上がユーザー生成コンテンツを一貫して表示するために JavaScript で HTML エンティティをエンコードする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。