AJAX页面输出HTML标记
2011-06-02 18:57 沐海 阅读(5060) 评论(1) 编辑 收藏 举报页面输出HTML标记:
后台中从数据库取出来的是 “<”。我们有两种方式:
1. HTMLDECODE()转换
我要是说的就是第二种:
如果我们利用分页的存储过程+AJAX直接得到所有数据(JSON类型)。那么这样的“<”在JS中。我们利用innerHTML写入页面中
展示的形式是“<P>”这种形式并不是我们想要的。我们想让它进一步解析。例如“<img>”不显示,而直接显示“图片”
一种笨方法(只有火狐支持)
见:
JQuery AJAX 加载 HTML代码“<”形式的。怎么解析成"<"形式,并且把"<img>"解析成图片输出到浏览器中。function htmldecode(fstring)
fstring = replace(fstring, ">", ">")
fstring = replace(fstring, "<", "<")
fstring = replace(fstring, " ", chr(32))
fstring = replace(fstring, " ", chr(9))
fstring = replace(fstring, """, chr(34))
' 双引号过滤
fstring = replace(fstring, chr(39), "'")
fstring = replace(fstring, "&", "&")
htmldecode = fstring
end function
Html的Encode和Decode在服务器端是很容易实现的,就拿ASP.net来说,调用现成的函数System.Web.HttpContext.Server.HtmlEncode或HtmlDecode就能简单了事。 但随着Ajax的发展,人们越来越重视javascript或vbscript的编程,这就使得大家不得不用这些脚本语言解决一些曾经不长解决的问题,Html的Encode / Decode就是一个这样的例子,javascript好像并没有现成的函数,网上的相关代码也很少,主要思想大都是用正则表达式来替换(replace)"<"、">"、"&"等符号,其实有一个很巧妙的办法能解决这个问题,请看下面两个函数
<script type="text/javascript">
function htmlEncode (str){
var div = document.createElement("div");
var text = document.createTextNode(str);
div.appendChild(text);
return div.innerHTML;
}
function htmlDecode (str){
var div = document.createElement("div");
div.innerHTML = str;
return div.innerHTML;
}
</script>
功能同函数名,htmlEncode是让document.createTextNode把html代码转换成文本了,而htmlDecode是通过设置div的innerHTML使得浏览器对文本(编码后的html)做了代码自动调整,还原成了html,从而实现了编码/解码功能。 这个方法在IE Firefox Opera上面均测试成功,别的浏览器不行。
(同我的JQUERY的那篇思想是一样的。JQuery AJAX 加载 HTML代码“<”形式的。怎么解析成"<"形式,并且把"<img>"解析成图片输出到浏览器中。)
都没有经过验证
方法一:
用的浏览器内部转换器实现转换,方法是动态创建一个容器标签元素,如DIV,将要转换的字符串设置为这个元素的innerText,然后返回这个元素的innerHTML,即得到经过HTML编码转换的字符串。
function HTMLEncode ( input )
{
var converter = document.createElement("DIV");
converter.innerText = input;
var output = converter.innerHTML;
converter = null;
return output;
}
当然,还可以用相同的方法实现对字符串的HTMLDecode解码,但有个问题就是紧跟在字符"<"后面的非空字符将连同字符"<"同时显示不出来。当然,对字符串作相应处理是可以解决这个问题的,比如在字符"<"后面加个空格,解码后再去掉就行,这是后话。毕竟,要使用HTMLDecode方法解码,自然是字符串已经经过HTMLEncode方法编码了,而经过HTMLEncode编码后的字符串,是不可能有字符"<"存在的。
function HTMLDecode ( input )
{
var converter = document.createElement("DIV");
converter.innerHTML = input;
var output = converter.innerText;
converter = null;
return output;
}
方法二:
<script language=
function HTMLEnCode(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 HTMLDeCode(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;
}
</script>
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· 展开说说关于C#中ORM框架的用法!
· SQL Server 2025 AI相关能力初探
· Pantheons:用 TypeScript 打造主流大模型对话的一站式集成库