利用正则实现简单模板替换功能

最近做了不少H5项目,功能比较简单,为减少体积且便于利用无线团队的其他模块前端库基于zepto。这个项目中有因为页面是由前端渲染了的,所以自然有很多拼字符串的操作。在zepto中找了半天也没有找到一个类似kissy中subsititute函数的功能,于是自己写了一个。用起来还算顺手,所以放上来大家交流下。为了避免与HTML属性的JSON格式冲突,通配符借鉴了ruby的方案,使用了#{}。对zepto还不是很熟悉,有更好的方案欢迎大家留言指出。

/**
 * @fileOverview 简单字符串工具类.
 * @since   2014.06.19
 */

;(function($, util){

var REG_PROP_NAME = (
      '(?:' //属性名称可以是字母或由引号引起的字符串
    +     '\\w+'
    +     "|'(?:[^\\']|\\\\.)+'"
    +     '|"(?:[^\\"]|\\\\.)+"'
    + ')'
);

var readProp = function(obj, propStr){
    var i, c, prop, val, len;
    var reg = new RegExp(REG_PROP_NAME, 'g');
    var props = propStr.match(reg).map(function(i){ 
        return i.trim().replace(/^['"]|['"]$/g, ''); 
    });

    len = props.length;    
    if( len == 1 ){
        val = obj[props[0]];
        return (typeof val != undefined) ? val : '';
    }

    for(i=0, c=len-1; i < c; i++){
        prop = props[i];
        if(typeof obj[prop] == undefined){
            return '';
        }
        obj = obj[prop];        
    }    

    val = obj[props[len-1]];
    return (typeof val != undefined) ? val : '';
};

var StrUtil = {
    /**
     * 将模板中的变量替换为值后返回.
     * @param  {String}tmpl
     * @parma  {JSON}props
     * @return {String}
     * @public
     * @example 
     *   var tmpl  = 'hello #{name}, #{age}, \#{name}';
     *   var props = {name: 'zhang-san', age: 20};
     *   console.log(util.str.sub(tmpl, props); // => hello zhang-san, 20, #{name}
     * 
     *   var tmpl2 = (
     *       'name: #{user.name} \n'
     *     + 'age : #{user.age } \n'
     *     + 'address: \n'
     *     + '   home-town: #{user.address."home-town"} \n'
     *     + '   current-city: #{user.address.city} \n'
     *   );
     *   
     *   var props = { 
     *      user: { 
     *          name: 'zhang-san', 
     *          age: 20,
     *          address: {
     *              "home-town" : "hebei",
     *              city: 'bei-jing'
     *          }                
     *      } 
     *   };
     *  
     *   console.log(util.str.sub(tmpl2, props));
     */
    sub : function(tmpl, obj){    
        var reg = new RegExp((
               '\\\\(.)'      //转义字符
            +  '|#\\{\\s*('   //或者#{prop1.prop2."prop-3"}
            +       REG_PROP_NAME   
            +      '(?:' 
            +           '\\.'
            +           REG_PROP_NAME
            +      ')*'
            +  ')\\s*\\}'
        ), 'gi');

        var func = function(m, $1, $2){
            return ($1 != undefined) ? $1 : readProp(obj, $2); 
        };

        return tmpl.replace(reg, func);
    }
};

util.str = StrUtil;

})(window.$, window.util || (window.util = {})); 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值