注册 登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

Copper peas ' Bolg

Keep On Moving...This Is My Life...

 
 
 

日志

 
 

【原】js中动态创建的html与js剥离的方法,模仿smarty  

2011-05-03 17:54:09|  分类: javascript |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

测试代码 ,整理代码在最后

<script type="text/javascript">
<!--
/*
var value='aaaa';
var make='bbbb';
var jack='cccc';
var han='dddd';
var html={};
    html.table="<table><tr><td>ccc{@value@}2131@321{ds}adsd{@make@}sf{@jack@}dadsad{@han@}sadsadsd</td></tr></table>";

var sql="<table><tr><td>ccc{@value@}2131@321{ds}adsd{@make@}sf{@jack@}dadsad{@han@}sadsadsd</td></tr></table>";
      
 arr=html.table.match(/{@\w+@}/ig);
 for(var v in arr)
 {
       var patt = /{@(\w+)@}/i;
       var valuearr = patt.exec(arr[v]);
       sql=sql.replace(new RegExp(valuearr[0],"ig"), eval(valuearr[1]));
 }

document.write(sql);

 

 


*/


var strings="<table><tr><td class=dsad{@i@}>ccc{@value[i]@}2131@321sfdad</td></tr></table>";
var value=[1111111111111,55555555555555];
var text="";
for (var i in value)
{
    var string=strings;
    var arr=string.match(/{@(\w+|\w+\[\w+\])@}/ig);
 //alert(arr);
 for(var v in arr)
 {        
    var patt = /{@(\w+|\w+\[\w+\])@}/i;
       var valuearr = patt.exec(arr[v]);
       var zkh=valuearr[0].replace(new RegExp("[\[]","ig"),"[\\[]");
       string=string.replace(new RegExp(zkh,"ig"), eval(valuearr[1]));
 } 
 text=text+string;
 
}
alert(text);

//-->
</script>

 

 

 

整理代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> js动态创建html标签与js完全剥离方法 </title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 </head>
<body>
<script type="text/javascript">
<!--
/*
 *  @time:2011-5-4
 * @user:chenweihan
 *  @解析js html模版
 *  example:js_html({string:html.errexits})
 */
function js_html(json)
{
 //循环重新定义对应变量
  for(var jsoni in json)
  {
    eval ("var "+jsoni+"=json."+jsoni+";");  
  }
  //匹配替换
  var arr=string.match(/{@(\w+|\w+\[\w+\]|\w+\[\w+\]\.\w+|\w+\.\w+)@}/ig);
  if(arr!=null)
  {
   for(var htmljs=0; htmljs<arr.length;htmljs++)
   {        
   var patt = /{@(\w+|\w+\[\w+\]|\w+\[\w+\]\.\w+|\w+\.\w+)@}/i;
   var valuearr = patt.exec(arr[htmljs]);
   valuearr[0]=valuearr[0].replace(new RegExp("[\[]","ig"),"[\\[]");
   string=string.replace(new RegExp(valuearr[0],"ig"), eval(valuearr[1]));
    }
  }
  return string;
}


/*静态的html*/
var html={};
    html.table    = "<table><tr><td class=dsad>ccc{@value@}2131@3{@ccccc@}21sfdad</td></tr></table>";
    html.tablearr = "<table><tr><td class=dsad{@i@}>ccc{@value[i]@}2131@321{@han@}sfdad</td></tr></table>";
 html.tableobj = "<table><tr><td class=dsad{@i@}>ccc{@obj[i].aa@}2131321sfdad</td></tr></table>";

 

/*案例一 一般变量*/
var ccccc='jjjj';
var value='aaaa';
alert(js_html({string:html.table}));

/*案例二  数组变量*/
var han="like";
var value=[1111111111111,55555555555555];
var text="";
for (var i in value)
{
    var string=js_html({i:i,string:html.tablearr}); 
 text=text+string;
}
alert(text);

/*案例三  json数组变量*/
var texts="";
var obj=[{aa:"aa",bb:"bb"},{aa:"cc",bb:"dd"}];
for (var i in obj)
{
    var strings=js_html({i:i,string:html.tableobj,obj:obj}); 
 texts=texts+strings;
}

alert(texts);
//-->
</script>

</body>
</html>

 

 

 

 

  评论这张
 
阅读(140)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018