嵌套元素中的文本替换

Question

我的页面上有一个看起来像这样的元素：

<div id="product-123">
    <h3>${Title}</h3>
    <div>
        ${Description}
    </div>
    <div>
        ${Price}
    </div>
</div>

我有一个看起来像这样的JSON对象：

var Product = {
    'Title': 'Potion of Stamina',
    'Description': 'Restores stamina greatly.',
    'Price': '$100.00'
}

我需要用Product.Title替换$ {Title}，用Product.Description等替换$ {Description}。

到目前为止，我可以匹配元素中的替换字符串：

$('#product-123').html().match(/\$\{\w*\}/g)
// returns ["${Title}", "${Description}", "${Price}"]

我也可以用简单的东西替换替换字符串：

$('#product-123').html().replace(/\$\{(\w*)\}/g, '$1')
// returns
//"<div id="product-123">
//    <h3>Title</h3>
//    <div>
//        Description
//    </div>
//    <div>
//        Price
//    </div>
//</div>"

但这些都不起作用：

$('#product-123').html().replace(/\$\{(\w*)\}/g, Product[$1])
$('#product-123').html().replace(/\$\{(\w*)\}/g, Product['$1'])
$('#product-123').html().replace(/\$\{(\w*)\}/g, '' + Product[$1])
$('#product-123').html().replace(/\$\{(\w*)\}/g, Product['/$1'])

每个只是用undefined替换替换字符串。

我该怎么办？

Answer 1

$('#product-123').html().replace(/\$\{(\w*)\}/g, function($0,$1){return Product[$1];});

当您在字符串外使用匹配项时，需要将它们作为函数参数传递。

Answer 2

这样做：（http://jsbin.com/EPEyAsa/3/edit）

if (!String.prototype.supplant) {
    String.prototype.supplant = function (o) {
        return this.replace(/{([^{}]*)}/g,
            function (a, b) {
                var r = o[b];
                return typeof r === 'string' || typeof r === 'number' ? r : a;
            }
        );
    };
}




var Product = {
    'Title': 'Potion of Stamina',
    'Description': 'Restores stamina greatly.',
    'Price': '$100.00'
}

var t= $("#t").clone().html().supplant(Product);


$("body").append(t);