后台字符串嵌入前台语言输出
web语言分为后台和前台，如果后台语言嵌入方式将字符串输出到前台语言中，需要按照前台语言的要求进行转义。
因为前台各个语言都有自身的保留字符， 用于规定自身的语法格式，如果后台字符串直接输出则可能会跟前台的语言的保留字符冲突。
具体分为以下三种：
1、 向HTML中输出，作为HTML标签对中的内容 或者 属性值字符串的内容输出，
如果输出的内容想原样展示，为了避免被HTML语言翻译错误，需要使用后台语言接口进行转义，
一般名字叫 encodeHTML，
将 HTML语法使用字符翻译为 HTML 实体：
例如 将 & 翻译为
<input value="<%=encodeHTML(name)%>">
==>
<input value=" "> <!-- 控件值显示为 一个 & -->
2、 向Javascript语言中输出，作为Javascript字符串的内容，
对应字符串"XXX"中的XXX的全部或者部分内容，需要使用后台语言接口进行转义，
一般名字叫encodeJS， 将后台字符串中的每一个字符转义为Javascript转义形式，
例如 将 " 翻译为 \"
var name = “<%=name%>”;
==>
var name = "\"";
3、 向XML数据格式中输出，需要类似HTML转义的接口，使用也相同。
一般取名为 encodeXML
负责如下XML常用字符转义：
字符 |
转义字符 |
描述 |
|
& |
& |
和 |
|
< |
< |
小于号 |
|
> |
> |
大于号 |
|
" |
" |
双引号 |
|
‘ |
' |
单引号 |
DOM API （text &
HTML）
在前台语言中，主要是HTML 和 JS之间：
1、如果使用JS在DOM节点中，原样显示文本内容，需要将此字符串设置到DOM节点的innerText 或者 textContent
（firefox）；
2、字符串包括合法html标签，并且作者就是想使用这些字符串改变DOM的内容，需要将此字符串设置到DOM节点的innerHTML属性。
两者使用场景需要明确，不能误用。
不能将需要原样输出的使用innerHTML属性设置，否则，对于用户可修改的参数，万一其被修改为合法的HTML语言，则页面展示为HTML元素，此为XSS攻击提供了漏洞。
也不能将需要按照HTML染显示的字符串，使用文本节点属性设置，给用户显示显示HTML代码是显然的不合理的，程序员例外（例如博客园的代码展示区）。
上面所说的两种DOM API，对应JQuery的html() 和 text()。
Javascript操作HTML DOM也牵扯到HTML转义事情，例如想组织一个字符串输出到html接口，
此字符串中含有需要原样输出的内容，还包括需要按照HTML渲染显示的字符串，
可以使用JQuery接口组合使用来完成，实现功能类似后台语言中的encodeHTML, 如下代码例子：
<html>
<head>
<script type="text/javascript" src="./jquery/jquery-1.9.1.js"></script>
</head>
<body>
<div id="test"></div>
<div id="test1"></div>
<input type="text" id="inputText">
<script>
$("#test").text("<div>aa<</div>")
$("#test1").html($("#test").html() + "<div>OOOOO</div>")
$("#inputText").val($("#test").html());
</script>
</body>
</html>
JS反向decodeHTML操作，与上面操作相反：
var decoded = $("<div/>").html(encodedStr).text();
<html>
<head>
<script type="text/javascript" src="./jquery/jquery-1.9.1.js"></script>
</head>
<body>
<div id="test"></div>
<input type="text" id="inputText">
<script>
$("#test").html("<<div>f</div>")
$("#inputText").val($("#test").html()); //html arg
$("#inputText").val($("#test").text()); // text in html DOM
</script>
</body>
</html>
原始的JS封装的 HTMLEncode 和 HTMLDecode 实现接口：
<script type=”text/javascript”>
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;
}function HTMLDecode(text)
{
var temp = document.createElement(“div”);
temp.innerHTML = text;var output = temp.innerText || temp.textContent;
temp = null;
return output;
}var html = “<br>dffdfqqqqq”;
var encodeHTML = HTMLEncode(html);
alert(“方法一：” +encodeHTML);var decodeHTML = HTMLDecode(encodeHTML);
alert(“方法一：” +decodeHTML); </script>
WEB语言转义总结,码迷,mamicode.com