1. 原生JavaScript寫法:
function htmlDecode(input){ var e = document.createElement('div'); e.innerHTML = input; return e.childNodes.length === 0 ? "" : e.childNodes[0].nodeValue; } htmlDecode("<img src='myimage.jpg'>");
2. JQuery寫法:
function htmlDecode(value){ return $('<div/>').html(value).text(); }
第一個函數使用原生的JavaScript方法創建一個DIV元素,然后將需要反轉義的字符串賦值給它的innerHTML屬性,最后返回DIV元素的nodeValue屬性的值。第二個函數則使用JQuery的方法,其基本原理和第一個函數相同。由於DIV元素都只是在內存中創建,並未append或inert到頁面上,所以不會對現有的頁面產生任何影響。
最后,我們將一開始的那段代碼改成下面的這種方式:
var jsonData = { title: $('<div/>').html("<%= data.name? data.name : title %>").text(), desc: $('<div/>').html("<%= data.nontent? data.nontent : '' %>").text(), image: "<%- data.img? data.img : '' %>" };
這樣便可以在JavaScript中對服務器端返回的字符串進行HTML反轉義操作了。