替换dom元素中的占位符

Question

Given a dome element like this:

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

and a json string containing the values:

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

what would be the correct way to replace the values in the dom element in a generalised way ie the example above is only for illustration and the placeholder|value can appear anywhere in the element.

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

Answer 1

Normally, I'd drop in some code to recursively iterate through all DOM nodes:

• If it's an Element, then iterate through its Attributes and replace placeholders, then recurse
• If it's a Text node, replace placeholders in its contents

Buuuuut... in this case you may just be better off nuking it with a regex:

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

In this particular case, it's okay to parse HTML with regex because... well, the regex itself has nothing to do with HTML and does not affect the underlying HTML in any way.

Demo: http://jsfiddle.net/8RPkY/2/