javaScriptを渡す方法キーまたは機能への参照は?
-
09-10-2019 - |
質問
<script type='text/javascript'>
// I have template and info
var img_template = "<img src='{src}' width='{width}' height='{height}' title='{title}' />";
var img_info = {
src : 'http://myimage.com/img.jpg',
width: '100px',
height: '100px',
title: 'My Image'
}
// I want to put info to template but It's not work.
// How should I do ?
var my_image = img_template.replace(/{(.+?)}/g, img_info['$1']);
</script>
解決
交換に関数を使用します。
<script type='text/javascript'>
var img_template = "<img src='{src}' width='{width}' height='{height}' title='{title}' />";
var img_info = {
src : 'http://myimage.com/img.jpg',
width: '100px',
height: '100px',
title: 'My Image'
}
var my_image = img_template.replace(/{(.+?)}/g, function(a,b){
return img_info[b];
});
</script>
他のヒント
var my_image = img_template.replace(/{(.+?)}/g, function(m,v){return img_info[v];});
の例 http://www.jsfiddle.net/gaby/3lu4h/
使用の詳細 置換メソッドのパラメーターとして機能します
var my_image = img_template.replace(/{(.+?)}/g, function(match, group1){
return img_info[group1];
});
のコールバック関数が必要です replace()
.
var img_template = "<img src='{src}' width='{width}' height='{height}' title='{title}' />";
var img_info = {
src : 'http://myimage.com/img.jpg',
width: '100px',
height: '100px',
title: 'My Image'
};
// callback function will be executed for each match
var my_image = img_template.replace(/{([^}]+)}/g, function(match, group1) {
// return lookup value or the empty string
return img_info[group1] || "";
});
または、再利用可能な形式で:
function HtmlTemplate(html) {
this.template = html;
this.render = function(info) {
return this.template.replace(/{([^}]+)}/g, function(match, group1) {
return info[group1] || "";
});
};
}
var imgTemplate = new HtmlTemplate("<img src='{src}' width='{width}' height='{height}' title='{title}' />");
// later
var img = imgTemplate.render(img_info);
所属していません StackOverflow