CODEWITHSUNDEEP
jqueryasp.net-mvcgoogle-chromejquery-templatesdouble-quotes
John
John

Reputation: 3402

Why does jQuery templates add double quotes to some strings

Background

I'm working with jQuery templates, ASP.Net MVC Razor views and Twitter.

Problem

Using jQuery templates with some strings automatically results in those strings being wrapped in "

Details

I created a jQuery template that looks like this:

<script id="twitterResultsTemplate" type="text/x-jquery-tmpl">
        <div class="tweetItem">
            <div class="userAvatar"><img src="${profile_image_url}" alt="${from_user} Image" /></div>
            <div class="tweetSummary">
                <div class="bd">before ${text.parseUserName().parseHashTag()} after</div>
                <div>${created_at}</div>
                <div class="ft">${prettyDate(created_at)}</div>
            </div>
        </div>        
        <br style="clear: both;" />
</script>

The following javascript formats the username and hash tags

String.prototype.parseUsername = function () {
    return this.replace(/[@]+[A-Za-z0-9-_]+/g, function (u) {
        var username = u.replace("@", "")
        return u.link("http://twitter.com/" + username);
    });
};

String.prototype.parseHashtag = function () {
    return this.replace(/[#]+[A-Za-z0-9-_]+/g, function (t) {
        var tag = t.replace("#", "%23")
        return t.link("http://search.twitter.com/search?q=" + tag);
    });
};

Unfortunately, what's happening is that the text is being wrapped inside double-quotes. So,

What I expect to get is:

<div>before @user Hello World #hello #world after</div>

Instead, what I get is:

<div>"before @user Hello World #hello #world after"</div>

Why are double quotes automatically being inserted? More importantly, how do I prevent it or fix it?

UPDATE

I have determined that this only happens when @ is included in the text . . . which happens any time a username is included.

SOLUTION

I'm not exactly sure why this solution works, but it does. I'll update this post later as I get a better understanding of the problem.

Change (doesn't work)

<div class="bd">before ${text.parseUserName().parseHashTag()} after</div>

To: (works)

<div class="bd">before {{html text.parseUserName().parseHashTag()}} after</div>

Upvotes: 4

Views: 1034

Answers (1)

John
John

Reputation: 3402

I'm not exactly sure why this solution works, but it does. I'll update this post later as I get a better understanding of the problem.

Change (doesn't work)

<div class="bd">before ${text.parseUserName().parseHashTag()} after</div>

To: (works)

<div class="bd">before {{html text.parseUserName().parseHashTag()}} after</div>

Upvotes: 2

Related Questions