如何在 JavaScript 中對 HTML 實體進行編碼以實現一致的使用者生成內容顯示？-js教程-PHP中文網

如何在 JavaScript 中對 HTML 實體進行編碼以實現一致的使用者生成內容顯示？

Susan Sarandon

發布： 2024-10-31 07:08:30

原創

801 人瀏覽過

How to Encode HTML Entities in JavaScript for Consistent User-Generated Content Display?

在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>

登入後複製

範例實作

此代碼：
選擇所有帶有®符號的元素。

建立一個sup元素並將其加入到所選元素之前。

將編碼的 HTML 實體附加到 super 元素。

其他注意事項

使用 UTF8 字元編碼和資料庫儲存確保正確顯示。

瀏覽器字體配置可能仍會影響某些字元的外觀。

文件

String.charCodeAt ：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference /Global_Objects/String/charCodeAtHTML 字元實體：http://www.chucke.com/entities。 html

以上是如何在 JavaScript 中對 HTML 實體進行編碼以實現一致的使用者生成內容顯示？的詳細內容。更多資訊請關注PHP中文網其他相關文章！