---
title: JavaScript Html格式轉換
tags: JavaScript
---
JavaScript Html格式轉換
===
###### tags: `JavaScript`

### :memo: 編譯結果怎麼不如預期?
當HTML渲染時，常常有資料需要顯示在畫面上，<font color="red">**為何資料無法如預期顯示？**</font>

> 1. 前端畫面處理並生成(Html, javascript)時，資料被HTML重新渲染
> 2. 原HTML文本內已含有特殊符號，轉換成Web畫面即被視為HTML Tags

由於在HTML編譯過程中，許多文字/標點符號被視為 HTML Tags符號
導致特殊符號經過處理後，與原先樣子相差十萬八千里
因此在處理 <font color="green">**javascript取值**</font> 上需要特別特別的注意、小心！

---
#### :orange_book: 特殊符號介紹

常用的符號使用如下表，若想要更了解可以點這 :arrow_right: [請點此](https://footmark.com.tw/news/web-design/html/special-symbol-table-html/)

|<div style="width=15vw">特殊符號</div>|<div style="width:16vw">指定字元</div>|<div style="width:16vw">代表意義</div>|
|------|------|------|
|" |\&quot; |雙引號 |
|& |\&amp; |&記號 |
|< |\&lt; |小於 |
|> |\&gt; |大於 |
|ˆ |\&circ; |進格修飾抑揚符 |
|˜ |\&tilde; |小波浪符號 |
| |\&ensp; |半格空格 |
| |\&emsp; |全格空格 |
|– |\&ndash; |半格破折號 |
|€ |\&euro; |歐元符號 |
|© |\&copy; |版權符號 |
|® |\&reg; |註冊商標 |
|° |\&deg; |度 |

---

#### :mag_right: javascript 解碼 / 編碼 方法

萬一資料含有特殊符號需要顯示畫面上，可以使用javascript做預前處理

// encode 編碼
function encodeHTMLText(msgText){
    let textarea = document.createElement("textarea");
    textarea.innerText = msgText;
    return textarea.innerHTML;
}

// decode 解碼
function decodeHTMLText(msgText){
    let textarea = document.createElement("textarea");
    textarea.innerHTML = msgText.replace(/\r\n/g, "\\r\\n"); // 轉換換行符號
    return textarea.value;
}

// -----------------------------------------------
// -------------------- Using --------------------
// -----------------------------------------------

var encodeText = "@$M>@#%JIsdfa<>"
var decodeText = "&lt;?&gt;)JSOIHF(#@*%&amp;(@$(@)$#@D"

> encodeHTMLText(encodeText)
> '@$M&gt;@#%JIsdfa&lt;&gt;'
> decodeHTMLText(decodeText)
> '<?>)JSOIHF(#@*%&(@$(@)$#@D'

以上的 【編碼 / 解碼】可以製作成共用function
因為會遇到HTML特殊轉換符號的時機應該會有不少次 (?
在前端頁面塞入相對應資料，一旦資料被HTML編碼，就會變成不相同的資訊

:::info
:bulb: **經驗分享**

網頁開發經常使用JS POST取得資訊，並不會發生 Encode/Decode 問題
但在使用 .NET MVC 開發後，有時需要預準備部分資訊在畫面上
結果網頁啟動後才發現文字全部被轉成亂碼，查詢問題發生來源
才知道HTML編譯時資料部分被自動轉換成HTML格式 :sweat_smile:
:::

---

### :computer: 連結

<div class="link-Table">

| 參考網站 | 連結 |
|:---------------------------------------------- |:--------------------------------------------------------:|
| Javascript Html encode/decode 轉換 | [:link:][Javascript Html encode/decode 轉換] |
| HTML Entities Encoder / Decoder | [:link:][HTML Entities Encoder / Decoder] |
| 奇技淫巧之当你不得不 decode HTML Entity 字符串 | [:link:][奇技淫巧之当你不得不 decode HTML Entity 字符串] |
| HTML 特殊字元編碼符號對照表 | [:link:][HTML 特殊字元編碼符號對照表] |

[Javascript Html encode/decode 轉換]:
https://tertiumnon.medium.com/js-how-to-decode-html-entities-8ea807a140e5

[HTML Entities Encoder / Decoder]: https://www.web2generators.com/html-based-tools/online-html-entities-encoder-and-decoder

[奇技淫巧之当你不得不 decode HTML Entity 字符串]:https://juejin.cn/post/7002186401802371109

[HTML 特殊字元編碼符號對照表]:https://footmark.com.tw/news/web-design/html/special-symbol-table-html/

</div>

<style>
div.link-Table > table th:nth-of-type(1) {
width: 80vw;
}

div.link-Table > table th:nth-of-type(2) {
width: 10vw;
}
</style>