How to render a javascript variable in an HTML attribute using jQuery

Question

Using the following code:

<div class="whatever" addthis:title="Hi, your name is [firstName]"></div>

If I have a JS variable like this

var name = John

How would I replace the "[firstName]" with my JS variable in the first code snippet using jQuery?

It's ok if I need to set the attribute using jQuery to begin with like:

$('.whatever').attr( 'addthis:title', 'Hi, your name is [firstName].' );

Joseph Silber · Accepted Answer · 2011-09-20 05:14:32Z

4

Simply run replace on your string...:

var name = 'John';
$('.whatever').attr('addthis:title', function(i, attr){
    return attr.replace('[firstName]', name);
});

P.S. Are you sure you want an attribute addthis:title, not simply title? That's invalid HTML! If you want to create your own attributes, prefix them with data-:

<div class="whatever" data-addthis-title="Hi, your name is [firstName]"></div>

edited Sep 20, 2011 at 5:14

answered Sep 20, 2011 at 5:07

Joseph Silber

221k59 gold badges369 silver badges292 bronze badges

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

1 Comment

say Over a year ago

Work perfectly. Regarding the invalid attribute, it's being used by the "Add This" social plugin.

Lee · Accepted Answer · 2011-09-20 05:11:02Z

0

Did you try it? Your example code contains all the pieces you need.

var name = "John";
var element = $('.whatever');
var newAttrValue = element.attr('addthis:title').replace(/\[firstName\]/, name);
element.attr('addthis:title', newAttrValue);

answered Sep 20, 2011 at 5:11

Lee

13.5k1 gold badge34 silver badges46 bronze badges

Collectives™ on Stack Overflow

How to render a javascript variable in an HTML attribute using jQuery

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related