Clickable link into the div via jQuery

Question

I have dynamic HTML structure. Like this:

 <div class="message-text">Lorem ipsum http://google.com dolour sit
 amet<br>&nbsp;</div>

I want click this http link and other all links.

How can I find it and make clickable via jQuery?

what you mean with "make clickable via jquery"??? You can add an id to the div and use $('#idDiv').click(...) to catch the click event — Alist3r, Apr 01 '14 at 15:27
Wrap the url inside a `` tag then handle click using event delegation on the div see [documentation](http://api.jquery.com/on/#on-events-selector-data) — Stphane, Apr 01 '14 at 15:27

score 1 · Answer 1 · answered Apr 01 '14 at 15:32

If I understand you right, you could use a normal hyperlink:

<div class="message-text">Lorem ipsum<a href="http://google.com">http://google.com</a> dolour sit amet<br>&nbsp;</div>

If for whatever reason that is not in option, you could try javascript:

<script type="text/javascript">

var a = document.createElement('a');
var linkText = document.createTextNode("Lorem ipsum http://google.com dolour sit
 amet<br>&nbsp;");
a.appendChild(http://google.com);
a.href = "http://google.com";
document.body.appendChild(a);

I hope this helps you at all!

score 0 · Answer 2 · edited May 23 '17 at 12:28

0

In case you are trying to dynamically replace plain text URLs to clickable URLs (its HTML representation) there is a quite good discussion here

edited May 23 '17 at 12:28

Community

1
1

answered Apr 01 '14 at 15:46

Igor Escobar

1,047
1
12
13

score 0 · Answer 3 · answered Apr 01 '14 at 16:52

This isn't an exhaustive answer, but it may get you started. You have to take the text, turn it into a url then put it back. Here is how. And here is my fiddle.

$(function(){
    var newStr;
   var matchStr=$("div.message-text").html();
   var REGEX_MATCHER_URL = LINK_DETECTION_REGEX = /(([a-z]+:\/\/)?(([a-z0-9\-]+\.)+([a-z]{2}|aero|arpa|biz|com|coop|edu|gov|info|int|jobs|mil|museum|name|nato|net|org|pro|travel|local|internal))(:[0-9]{1,5})?(\/[a-z0-9_\-\.~]+)*(\/([a-z0-9_\-\.]*)(\?[a-z0-9+_\-\.%=&amp;]*)?)?(#[a-zA-Z0-9!$&'()*+.=-_~:@/?]*)?)(\s+|$)/gi

   $("div.message-text").each(function(index, div){
     var newDiv;
     var oldDiv;
     var oldTextArray;
     var oldDivHtml = $(div).html();
     $(div).html(""); // clear it

     var matches = oldDivHtml.match(REGEX_MATCHER_URL);
     $.each(matches, function(index, value){
       var holder = oldDivHtml.split(value);
       $(div).append(holder[0]);
       $(div).append($("<a>").attr("href", value).html(value));
       $(div).append(' ' + holder[1]);
     });
   });

});

Clickable link into the div via jQuery

3 Answers3