js/java利用占位符动态替换文本

近期项目有个需求,需要将库里配置的一段内容,动态调整某个数值,如“分享得xx积分”,因为我这个项目是一个公共组件,是给别的项目嵌套的,这个动态值是需要从别人的页面获取,所以考虑通过js的占位符来替换动态值:

占位符,其实就是替换字符串中某个特殊的占位字符,js实现如下:

1
2
3
4
5
6
7
String.prototype.placeForStr = function(){
if(arguments.length==0)
return this;
for(var s=this, i=0; i<arguments.length; i++)
s = s.replace(new RegExp("\\{"+i+"\\}","g"), arguments[i]);
return s;
};

调用:

1
2
3
var str = "我刚成功体验了{0}“一键体检”智能服务,健康体检得{1}分,邀请你也来试试,有电信专家保驾护航,安全又放心!";
console.log(str.placeForStr("china","100"));
//控制台打印:我刚成功体验了china“一键体检”智能服务,健康体检得100分,邀请你也来试试,有电信专家保驾护航,安全又放心!

然后我们只需要从页面获取placeForStr函数的传参数据即可实现配置内容的动态替换,这样有几个占位符,传几个参数即可。但是要注意参数必须按顺序传递 ,那嵌套公共组件的宿主页面,怎么设置参数,可以方便组件按顺序获取?我的解决方案是采用数组传参方式,因为数组可以指定顺序设置,也可以动态长度,实现如下:

  1. 调整占位符函数placeForStr的入参类型为Array:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    String.prototype.placeForArray = function(ary){
    if(!ary instanceof Array)
    return this;
    if(ary.length == 0){
    return this.replace(new RegExp("\\{[0-9]{1,}\\}","g"), ' ');
    }
    for(var s=this, i=0; i<ary.length; i++)
    s = s.replace(new RegExp("\\{"+i+"\\}","g"), ary[i]);
    return s;
    };
  2. 宿主页面参数存放方式:

    1
    2
    3
    <input type="hidden" value="china" place="0"/>
    <input type="hidden" value="100" place="1"/>
    <input type="hidden" value="hello" place="2"/>
  3. 调用

    1
    2
    3
    4
    5
    6
    7
    8
    9
    var dataArray = new Array();
    $("input[place]").each(function(){
    var index = $(this).attr('place');
    dataArray[index] = $(this).val();
    })
    var str = "我刚成功体验了{0}“一键体检”智能服务,健康体检得{1}分,邀请你也来试试,有电信专家保驾护航,安全又放心!";
    console.log(str.placeForArray(dataArray));
    //控制台打印:我刚成功体验了china“一键体检”智能服务,健康体检得100分,邀请你也来试试,有电信专家保驾护航,安全又放心!

这样我们就很好的解决了 1、页面数据规范存入:有几个占位数据,就写几个隐藏域,顺序由属性“place”指定;2、数据获取和调用:jQuery根据属性选择器获取这批指定的数据,然后根据place按顺序存入数组,最后调用占位符替换函数。

java实现同上。

坚持原创技术分享,您的支持将鼓励我继续创作!
分享