前端在處理後端資料庫所送來顯示的資料時，若遇上名稱內有單引號、雙引號…等特殊字元，會需要一些額外的處理功夫來避免顯示上出現錯誤。這邊筆記下處理的相關邏輯。
內容
大致上可分為兩種：
1. 以 node.innerText 渲染到網頁特殊字元可直接正確渲染，無須轉換成 Html Entity 或是 Decimal Code
|
1 2 3 |
<span style="display:none"> "[{"id":1111,"name":"L'hotel","cname":"München GmbH"}]" </span> |
2. 將字串塞入到 HTML 標籤內的屬性需將特殊字元轉換成 HTML Entity 或是 Unicode Character 。當渲染到網頁上後，透過 JavaScirpt 的 JSON.parse()，將值給還原。
這邊會有兩種做法：
途徑一：先透過 php 的 json_encode ( default option )， 然後再渲染到 HTML 的標籤屬性中
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<?php $accounts = "{"999":{"id":999,"name":"+-\<>'"ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ×ØÙÚÛÜÝÞßàáâãäåæçèéêëìíîïðñòóôõö÷øùúûüýþÿΑαΒβΓγΔδΕεΖζΗηΘθΙιΚκΛλΜμΝνΞξΟοΠπΡρΣσΤτΥυΦφΧχΨψΩω"}}" /** * convert special characters for displaying in HTML * * @return string */ function convert_special_characters_for_html($str){ $convertTargetList = array( "\"" => """, "'" => "'", "<" => "<", ">" => ">", "\\" => "\" ); if(!is_null($str)){ foreach ($convertTargetList as $key => $value) { $str = str_replace("$key", "$value", $str); } } return $str; } echo "<input type='hidden' value='" . convert_special_characters_for_html(json_encode($accounts)) . "'/>" ?> |
途徑二：取得值後透過 JavaScript 轉換再渲染到 HTML 的標籤屬性中
參考資料
- myString.replace( VARIABLE, “”) …… but globally
- What is the HtmlSpecialChars equivalent in JavaScript?
- Escaping HTML strings with jQuery
- HTML Entity List
