博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
AJAX页面输出HTML标记
阅读量:5860 次
发布时间:2019-06-19

本文共 2545 字,大约阅读时间需要 8 分钟。

页面输出HTML标记:

后台中从数据库取出来的是 “&lt”。我们有两种方式:

1. HTMLDECODE()转换

我要是说的就是第二种:

如果我们利用分页的存储过程+AJAX直接得到所有数据(JSON类型)。那么这样的“&lt”在JS中。我们利用innerHTML写入页面中

展示的形式是“<P>”这种形式并不是我们想要的。我们想让它进一步解析。例如“<img>”不显示,而直接显示“图片”

一种笨方法(只有火狐支持)

见:

第二种方法。利用正则表达式对HTML标签进行解析。在JS中解析<img>形式。这样。我们在innerHTML时显示的就是图片了。
这个正则我也没找到。如果大家找到了。可以发给我。谢谢哈。
思路是这样的:
其实。存入数据库中的HTML。只是简单的把<B> 变成了&lt;B&gt;,</B> 变成了&lt;/B&gt;,
附:

function htmldecode(fstring)

  fstring = replace(fstring, "&gt;", ">")
  fstring = replace(fstring, "&lt;", "<")
  fstring = replace(fstring, " ", chr(32)) 
  fstring = replace(fstring, " ", chr(9))
  fstring = replace(fstring, "&quot;", chr(34))
 ' 双引号过滤
  fstring = replace(fstring, chr(39), "&#39;")
  fstring = replace(fstring, "&amp;", "&") 
  htmldecode = fstring 
end function

 

 

 

Html的Encode和Decode在服务器端是很容易实现的,就拿ASP.net来说,调用现成的函数System.Web.HttpContext.Server.HtmlEncode或HtmlDecode就能简单了事。     但随着Ajax的发展,人们越来越重视javascript或vbscript的编程,这就使得大家不得不用这些脚本语言解决一些曾经不长解决的问题,Html的Encode / Decode就是一个这样的例子,javascript好像并没有现成的函数,网上的相关代码也很少,主要思想大都是用正则表达式来替换(replace)"<"、">"、"&"等符号,其实有一个很巧妙的办法能解决这个问题,请看下面两个函数

功能同函数名,htmlEncode是让document.createTextNode把html代码转换成文本了,而htmlDecode是通过设置div的innerHTML使得浏览器对文本(编码后的html)做了代码自动调整,还原成了html,从而实现了编码/解码功能。     这个方法在IE Firefox Opera上面均测试成功,别的浏览器不行。 

(同我的JQUERY的那篇思想是一样的。)

都没有经过验证

方法一:

用的浏览器内部转换器实现转换,方法是动态创建一个容器标签元素,如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=javascript>   

   function    HTMLEnCode(str)   
   {   
         var    s    =    "";   
         if    (str.length    ==    0)    return    "";   
         s    =    str.replace(/&/g,    "&gt;");   
         s    =    s.replace(/</g,        "&lt;");   
         s    =    s.replace(/>/g,        "&gt;");   
         s    =    s.replace(/    /g,        "&nbsp;");   
         s    =    s.replace(/\'/g,      "'");   
         s    =    s.replace(/\"/g,      "&quot;");   
         s    =    s.replace(/\n/g,      "<br>");   
         return    s;   
   }   
   function    HTMLDeCode(str)   
   {   
         var    s    =    "";   
         if    (str.length    ==    0)    return    "";   
         s    =    str.replace(/&gt;/g,    "&");   
         s    =    s.replace(/&lt;/g,        "<");   
         s    =    s.replace(/&gt;/g,        ">");   
         s    =    s.replace(/&nbsp;/g,        "    ");   
         s    =    s.replace(/'/g,      "\'");   
         s    =    s.replace(/&quot;/g,      "\"");   
         s    =    s.replace(/<br>/g,      "\n");   
         return    s;   
   }   
   </script>   

转载地址:http://olejx.baihongyu.com/

你可能感兴趣的文章
用cmake生成利用VTK库类的visual studio 2010 MFC工程
查看>>
老博客的文章
查看>>
每次登陆linux总是提示:you hava a new mail
查看>>
要么滚回家里去,要么就拼命
查看>>
α测试,β测试以及λ测试
查看>>
Sublime Text3快速编译php
查看>>
我的友情链接
查看>>
android-menudrawer导入分享
查看>>
emacs里用ebrowse解析已有的c++工程
查看>>
DBUnit数据库测试
查看>>
获取 Maven Java web 项目 Resourse / ClassPath 下的文件 路径
查看>>
为什么你总成为不了架构师?
查看>>
WinRAR命令行参数
查看>>
eclipse添加freemarker插件
查看>>
程序员的简单接口压测
查看>>
我的友情链接
查看>>
移动端多端适配
查看>>
uefi与GPT
查看>>
我的友情链接
查看>>
读取配置(初稿)
查看>>