string replacement in javascript when contains `{}`

Question

I use the templates and javascript to generate the htmls for an json data, this is the tempalte:

    <div id="template">
        <div class="iwContainer">
            <div class="iwHeaderContainer">
                <div class="iw-title-container">
                    <span class="titleText">${name}</span> <a target="_blank" href="detail?fid=${id}" class="titleLink">Detail</a>
                </div>
            </div>
            <div class="iwRichContainer">
                <div class="iw-g-font">Address：${address}</div>
            </div>
            @{setsearchTemplate}
        </div>
    </div>

Js:

buildInfoContent : function(item) {
    var tmp = $("#template").html();
    if (tmp) {
        tmp = tmp.replace(/\$\{(\w*)\}/g, function(m, key) {
            return item.hasOwnProperty(key) ? item[key] : "";
        });
        return tmp;
    }
}

And I call it:

buildInfoContent({name:'name',id:2,address:'address'});

And all of the palcehodler are replaced but the ${id}.

Through firebug I found that the temlate is something like this:

.........<span class="titleText">${name}</span> <a target="_blank" href="detail?fid=$%7bid%7d" class="titleLink">Detail</a>.......

So the id is not replaced, how to fixe it?

:(. I test no another machine, it works, but not on my own machine. — hguser
– hguser, Commented Jun 7, 2013 at 2:42

anson · Accepted Answer · 2013-06-07 17:18:29Z

1

It looks like your browser is encoding your {} characters. You'll have to account for that in your regexp...

This is untested but... /\$(\{|%7b)(\w*)(\}|%7d)/

This should do it, or something very similar...The idea is their though. Sometimes browsers do funky things with special characters.

EDIT: To match the key (the middle matched group), try using the 3rd argument passed to your callback, like in this example : Fiddle

edited Jun 7, 2013 at 17:18

answered Jun 7, 2013 at 2:47

anson

4,1742 gold badges25 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

hguser Over a year ago

Thanks, I use your regexp and I use this function :function(m, key) {key=RegExp.$2; return item.hasOwnProperty(key) ? item[key] : ""; } I wonder if this contains any potential problems?

anson Over a year ago

You should be able to just copy the regex above over the current regex youre using, you shouldn't have to change any other code.

hguser Over a year ago

No, without change other code, the key will be { not the property name.

anson Over a year ago

I gotcha you are right, you want the second matched group of the 3.

hguser Over a year ago

I am goint to be crazy, the Regexp.$2 return empty in IE.

Collectives™ on Stack Overflow

string replacement in javascript when contains `{}`

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related