Monday, 9. July 2007, 02:27:17
在网页中需要显示含有HTML代码的文字，需要做一些文字替换。
服务器端的语言如PHP等，基本都提供这样的函数，比如PHP的函数htmlspecialchars，ASP的函数Sever.HTMLEncode。
本来以为JavaScript也会有现成的函数，找了一下发现没有。JavaScript有escape和unescape函数，不过，这两个函数是用来加密/还原非ASCII字符，而不是HTML的TAG变换。
终于找到两个方法如下：
// 方法一： 普通的文字替换function encodeHTML1(s) {
var str = s;
str = str.replace(/&/g, "&");
str = str.replace(/</g, "<");
str = str.replace(/>/g, ">");
str = str.replace(/"/g, """);
return str;
}
// 方法二： 利用DOM(或者说是DHTML)实现function encodeHTML2(s) {
var div = document.createElement('div');
div.appendChild(document.createTextNode(s));
str = div.innerHTML;
div.outerHTML = "";
return str;
}
为了测试以上函数，新作了一个HTML文件，文件内容如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>JavaScript Test</title>
<script type="text/javascript">
<!--
//*********************************
// 方法一： 普通的文字替换
//*********************************
function encodeHTML1(s) {
var str = s;
str = str.replace(/&/g, "&");
str = str.replace(/</g, "<");
str = str.replace(/>/g, ">");
str = str.replace(/"/g, """);
return str;
}
//*********************************
// 方法二： 利用DOM(或者说是DHTML)实现
//*********************************
function encodeHTML2(s) {
var div = document.createElement('div');
div.appendChild(document.createTextNode(s));
str = div.innerHTML;
div.outerHTML = "";
return str;
}
//*********************************
// 执行测试
//*********************************
var numClick = 0;
function executeTest() {
var input = document.getElementById('input');
var output = document.getElementById('output');
switch(numClick) {
case 0:
output.innerHTML = '不做处理的输出: <br />' + input.value;
numClick++;
break;
case 1:
output.innerHTML = 'encodeHTML1的输出: <br />' + encodeHTML1(input.value);
numClick++;
break;
case 2:
output.innerHTML = 'encodeHTML2的输出: <br />' + encodeHTML2(input.value);
numClick = 0;
break;
default:
break;
}
}
-->
</script>
</head>
<body>
<h2>JavaScript Test</h2>
<hr />
<b>Input:</b> <br />
<textarea id="input" name="input" rows="10" cols="50"></textarea>
<hr />
<b>Output:</b> <br />
<div id="output"></div>
<hr />
<input type="button" id="execute" name="btn_test" size="50" value="Execute Test" onclick="executeTest();" />
</body>
</html>
WIDGETIZE