HTML的元素嵌入data,如何解碼資料
阿新 • • 發佈：2020-12-15
在html中，往往會直接嵌入資料到元素的屬性中，在使用的時候直接將這些屬性解析成對應的資料型別，供後面使用。例如：
<table class="xxxx" id="123" data-toggle="datagrid" data-url="{{$.BaseUrl}}{{$index}}" data-options={{MapToStr .Option}} data-width="100%" class="table table-bordered"></table> //在需要用的地方[一般在元件中使用]，獲取相關屬性 <script type="text/javascript"> var option=$("#123").data() //假設url引數可以是string,也可以是一個數組 var urlPara=option.url; try{ urlPara=JSON.parse(option.url) //容易報錯 }catch(e){ console.log(option.url+"----err----"+e) } if(urlPara instanceof Array){ //按陣列處理 }else{pre //按string處理 } </script>>
問題：
當嵌入的資料為陣列型別的時候，如"[%22http://www.w3school.com.cn/My%20first/%22%20%22%http://www.w3school.com.cn/My first/"]"這樣解析就會報錯，報錯內容為：
bjui-all.js:20776 error：!!!SyntaxError: Unexpected token % in JSON at position 1
原因：
因為這個字串中含有html編碼“%22”等，導致解析錯誤；所以只需要將這些字元解碼，然後再重新解析，即可得到正確的資料結構了
方案：
使用umescapse,decodeURI,decodeURIComponent等函式解碼，在解析字串到正確的資料結構。
urlPara=JSON.parse(decodeURI(option.url))
相關知識點回顧
1、知識連結
2、快速回顧
| 函式 | 描述 |
|---|---|
| decodeURI() | 解碼某個編碼的 URI。 |
| decodeURIComponent() | 解碼一個編碼的 URI 元件。 |
| encodeURI() | 把字串編碼為 URI。 |
| encodeURIComponent() | 把字串編碼為 URI 元件。 |
| escape() | 對字串進行編碼。 |
| eval() | 計算 JavaScript 字串，並把它作為指令碼程式碼來執行。 |
| getClass() | 返回一個 JavaObject 的 JavaClass。 |
| isFinite() | 檢查某個值是否為有窮大的數。 |
| isNaN() | 檢查某個值是否是數字。 |
| Number() | 把物件的值轉換為數字。 |
| parseFloat() | 解析一個字串並返回一個浮點數。 |
| parseInt() | 解析一個字串並返回一個整數。 |
| String() | 把物件的值轉換為字串。 |
| unescape() | 對由 escape 編碼的字串進行解碼 |
3、拓展：字串轉換成其他資料結構
參考BJUI框架的程式碼，將字串轉換成其他資料型別，轉換成物件：
toObj: function() {
var obj = null
try {
obj = (new Function('return '+ this))()
} catch (e) {
obj = this
BJUI.debug('String toObj：Parse "String" to "Object" error! Your str is: '+ this)
}
return obj
}