替换dom元素中的占位符

Question

鉴于像这样的圆顶元素：

<div>
    <ul>
        {{placeholder|value1}}
    </ul>
    <a href="{{placeholder|value2}}">{{placeholder|value3}}</a>
</div>

和包含值的json字符串：

var placeholder = {"values": {"value1" : "<li>hello</li>", "value2" : "#", "value3": "hello again"}}

以通用方式替换dom元素中的值的正确方法是什么，即上面的示例仅用于说明，占位符值可以出现在元素中的任何位置。

js fiddle：http://jsfiddle.net/8RPkY/

Answer 1

通常，我会删除一些代码以递归遍历所有DOM节点：

• 如果是元素，则迭代其属性并替换占位符，然后递归
• 如果是文本节点，请在其内容中替换占位符

Buuuuut ......在这种情况下，你可能最好用正则表达式进行核对：

output = input.replace(/\{\{placeholder\|(.*?)\}\}/g,function(_,k) {
     return placeholder[k] || _;
});

在这种特殊情况下，用正则表达式解析HTML是可以的，因为......好吧，正则表达式本身与HTML无关，也不会以任何方式影响底层HTML。

演示：http://jsfiddle.net/8RPkY/2/