javascript && jQuery 实现html转义

背景：

做快站项目遇到的一个bug，一图胜千言，bug如下图：

这个问题只在某些帐号下出现，绝大数其他帐号都是正常的，正常情况下是这个样子的：

为啥会因帐号而已呢？猜测是因为前端渲染模板所用的数据惹得祸 :（

分析

查看DOM结构：

正常情况下，蓝框内的所有li标签应该都在红筐内。

再看渲染模板用的数据：

果然，数据里面含有html标签，可我在渲染模板之前没有做转义处理，恩，XSS攻击就是这么来的。

解决方案

• jQuery 实现html转义

function htmlEncode(value){  
  return $('<div/>').text(value).html();  
}  
//Html解码获取Html实体  
function htmlDecode(value){  
  return $('<div/>').html(value).text();  
}  

借助text()和html()函数来转译html

text() : 方法获取/设置的是匹配元素的文本内容，且会将HTML中的预留字符（如大于号（>））转换成html字符实体，以便于正确显示.
html(): 方法是获取/设置匹配元素的html内容。

• javascript 实现html转译

//编码
function html_encode(str)  
    {  
        var s = "";  
        if (str.length == 0) return "";  
        s = str.replace(/&/g, ">");  
        s = s.replace(/</g, "<");  
        s = s.replace(/>/g, ">");  
        s = s.replace(/ /g, " ");  
        s = s.replace(/\'/g, "'");  
        s = s.replace(/\"/g, """);  
        s = s.replace(/\n/g, "<br>");  
        return s;  
    }  
  
//解码  
function html_decode(str)  
{  
    var s = "";  
    if (str.length == 0) return "";  
    s = str.replace(/>/g, "&");  
    s = s.replace(/</g, "<");  
    s = s.replace(/>/g, ">");  
    s = s.replace(/ /g, " ");  
    s = s.replace(/'/g, "\'");  
    s = s.replace(/"/g, "\"");  
    s = s.replace(/<br>/g, "\n");  
    return s;  
}