Programmatically add hyperlink to span class in html with Jquery

Question

Does anyone have any idea how I can do this? I want my content writer to be able to add span classes to certain numerical amounts that then automatically hyperlink to a pre-defined URL. Example:

And the price at John's hardware shop are<span class="john-shop">$2.35</span>

Can this be done with php or even css?

Grateful for any help.

desired outcome:

And the price at John's hardware shop are <a href="http://www.johns-shop.com"><span class="john-shop"> $2.35</span></a>

Ok, after much trial and error, this code works. Hope it helps someone else. The "link.js" contains this code:

$( document ).ready(function() {
    $('.john-shop').contents().wrap('<a href="http://www.johns-shop.com"></a>');
  });

and this is the test html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/link.js"></script>
<title></title>
</head>
<body>
And the price at John's hardware shop are<span class="john-shop">$2.35</span>
</body>
</html>

Can you add the desired result. What is the final line of code that you want to generate? — multimediaxp, Dec 18 '13 at 03:29
I can use whatever does the job. Added desired outcome. @EddyXP — Rich Stevens, Dec 18 '13 at 03:36
I haven't tried anything as no idea how to do it. I assume jquery might be what I need? I need to specify a whole bunch of links that programmatically insert themselves into text. — Rich Stevens, Dec 18 '13 at 03:44

score 3 · Accepted Answer · edited May 23 '17 at 11:59

3

Since you specified in your comment

I can use whatever does the job.

So here is the jQuery solution for that:

$('.john-shop').contents().wrap('<a href="http://www.johns-shop.com"></a>');

Fiddle Here

P.S. It won't be possible to achieve this using html/css simply, as far as I know. You must use javascript in order to achieve that.

UPDATE You may find a pure javascript related solution here at make hyperlink from javascript

edited May 23 '17 at 11:59

Community

1
1

answered Dec 18 '13 at 03:45

Kamran Ahmed

11,809
23
69
101

Thanks @Kamran. Pretty well versed in html/css but nothing else. Where would I add this code, can this be separate to the actual rendered page? – Rich Stevens Dec 18 '13 at 03:47
Don't you know about jquery? – Kamran Ahmed Dec 18 '13 at 03:47
I know what it is but I am no expert. – Rich Stevens Dec 18 '13 at 03:49
Then I am afraid that you won't able to achieve this using jquery. However, I have updated my question with a reference to Javascript related solution. You may have a look at that, if it helps. – Kamran Ahmed Dec 18 '13 at 03:52
Just noticed the Fiddle thing, thanks, this is exactly what I needed. – Rich Stevens Dec 18 '13 at 08:02

Programmatically add hyperlink to span class in html with Jquery

1 Answers1