首頁  >  文章  >  web前端  >  如何在 JavaScript 中對 HTML 實體進行編碼以實現一致的使用者生成內容顯示?

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

Susan Sarandon
Susan Sarandon原創
2024-10-31 07:08:30773瀏覽

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>

範例實作

  1. 此代碼:
  2. 選擇所有帶有®符號的元素。
建立一個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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn