jquery的html方法里包含特殊字符的处理

在使用jquery的html（）方法时，有时候里面添加的html代码含有一些特殊字符，需要进行转义。

 

如下例子：

inst_html = "<a style=color:white' onmouseover = '";  
inst_html += "javascript:showme('"+inst.instId+"_"+valId+"');";  
inst_html += "'  ";  
$("#inst_div_"+valId).html(inst_html);  

 

如果这样直接写的话，在chrome和FF浏览器下，没有问题，但在IE8下会报错。

解决方法就是将javascript里面的'进行转义改成'，这样就不报错了。

 

改为：

inst_html = "<a style=color:white' onmouseover = '";  
inst_html += "javascript:showme(&#39;"+inst.instId+"_"+valId+"&#39;);";  
inst_html += "'  ";  
$("#inst_div_"+valId).html(inst_html);  

 

 

var entityMap = {
  '&': '&',
  '<': '&lt;',
  '>': '&gt;',
  '"': '&quot;',
  "'": '&#39;',
  '/': '&#x2F;',
  '`': '&#x60;',
  '=': '&#x3D;'
};

function escapeHtml (string) {
  return String(string).replace(/[&<>"'`=\/]/g, function (s) {
    return entityMap[s];
  });
}

 https://stackoverflow.com/questions/24816/escaping-html-strings-with-jquery

 

当我们用FCK编辑器保存信息至数据库后保存的html都是转义过后的，当我们读取展现在页面上的时候我们就需要进行反转义才行，不然会显示HTML标签。其实这一系列都很简单，代码见下所示：

 

//HTML转义
function HTMLEncode(html){
  var temp = document.createElement ("div");
  (temp.textContent != null) ? (temp.textContent = html) : (temp.innerText = html);
  var output = temp.innerHTML;
  temp = null;
  return output;
}


//HTML反转义
function HTMLDecode(text){
  var temp = document.createElement("div");
  temp.innerHTML = text;
  var output = temp.innerText || temp.textContent;
  temp = null;
  return output;
}