How to use proper injection of variable in javascript

Question

How to use proper injection of product id in javascript.

  $(".vote_count").wrap("<a id='id' href='countvotes/{product_id}'</a>");

T.J. Crowder · Accepted Answer · 2015-10-24 15:00:32Z

1

If your question is: "I have a product_id variable and want to put it where I have {product_id} in this code," there are three answers: (The answers are essentially the same if you're talking about id instead, just make the appropriate changes.)

String concatenation:

$(".vote_count").wrap("<a id='id' href='countvotes/" + product_id + "'></a>");

ES2015 (aka ES6) template strings:

$(".vote_count").wrap(`<a id='id' href='countvotes/${product_id}'></a>`);

Any of several templating engines.

Usually, best to combine those with encodeURIComponent, because you're outputting a URI, and so if product_id has things in it (like /) that have special meaning in URIs, you need to escape them. So:

$(".vote_count").wrap("<a id='id' href='countvotes/" + encodeURIComponent(product_id) + "'></a>");

or

$(".vote_count").wrap(`<a id='id' href='countvotes/${encodeURIComponent(product_id)}'></a>`);

Taking that a bit further: Since you're outputting the content of an HTML attribute, you also have to ensure that what you're outputting is valid HTML text. There's no built-in for that, but it's a trivial function to write:

var escapes = {
    '&': '&amp;',
    '<': '&lt;',
    '"': '&quot;'
};
function escapeHTML(str) {
    return str.replace(/[&<"]/g, function(ch) {
        return escapes[ch];
    };
}

(There's no need to escape >, but you can if you like.)

Using that, I always enclose my attributes in double quotes (since those are what I'm escaping).

So:

$(".vote_count").wrap('<a id="id" href="countvotes/' + escapeHTML(encodeURIComponent(product_id)) + '"></a>");

and

$(".vote_count").wrap(`<a id="id" href="countvotes/${escapeHTML(encodeURIComponent(product_id))}"></a>`);

Side note: You were missing the closing > on the <a tag. That's fixed in the above.

edited Oct 24, 2015 at 15:00

answered Oct 24, 2015 at 14:46

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

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

2 Comments

T.J. Crowder Over a year ago

@DanielA.White: Done. And HTML handling, too. :-)

jamo Over a year ago

@T.J.Crowder Thank you very much!

Oleksandr T. · Accepted Answer · 2015-10-24 14:48:21Z

1

For ES5, like this

$(".vote_count").wrap('<a id="id" href="countvotes/' + encodeURIComponent(product_id) + '"></a>');

For ES6 you can use string templates

$(".vote_count").wrap(`<a id="id" href="countvotes/${encodeURIComponent(product_id)}"></a>`);

edited Oct 24, 2015 at 14:48

answered Oct 24, 2015 at 14:45

Oleksandr T.

77.6k17 gold badges177 silver badges145 bronze badges

1 Comment

jamo Over a year ago

@Alexander Thanks for the help bro!

Collectives™ on Stack Overflow

How to use proper injection of variable in javascript

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related