Transform all text links into actual links

Question

How can I transform all text links in a page into actual links?

For example, I want to change all text links like this:

<p>http://www.google.com</p>

or in a table like this:

<td>http://www.google.com</td>

into this:

<a href="http://www.google.com">http://www.google.com</a>

and this:

<td><a href="http://www.google.com">http://www.google.com</a></td>

Why do you have pages with addresses that are not hyperlinks? — Lee Taylor, Apr 01 '13 at 01:37
@LeeTaylor, you have never seen this before? For example what about a blog page where someone pastes in a hyperlink and you want to automatically link it. I think this is a really good question and does not deserve a down vote. — Jess, Apr 01 '13 at 02:00
@Jessemon Yes, of course. I was asking to try to elicit some more information on how much control the OP has on the content within his pages. — Lee Taylor, Apr 01 '13 at 02:05
@LeeTaylor. Okay cool. I think it is a good idea to make the hyperlinks on the server-side if possible. :D — Jess, Apr 01 '13 at 02:08
@Jessemon - Exactly, that's what I was trying to allude to... — Lee Taylor, Apr 01 '13 at 02:10

score 1 · Answer 1 · edited May 23 '17 at 10:25

1

I think this question has been asked before.

Here is the answer:

jQuery Text to Link Script?

edited May 23 '17 at 10:25

Community

1
1

answered Apr 01 '13 at 02:04

Jess

22,018
18
118
135

Alcides Queiroz · Accepted Answer · 2013-04-01T02:32:32.893

This is what you need:

<html>
<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script>
    function createLinks(){
      $('p, td').filter(function() {
        return this.innerHTML.match(/(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&amp;:/~\+#]*[\w\-\@?^=%&amp;/~\+#])?/);
      }).each(function(){
        var link = $('<a>', { href: this.innerHTML,
                              text: this.innerHTML });

        if(this.tagName == "P")
          this.parentNode.replaceChild(link[0], this);
        else{
          this.removeChild(this.childNodes[0])
          this.appendChild(link[0]);
        }
      });
    }

    $(document).ready(function(){
      $('#create_links').click(function(){
        createLinks();
      });
    });
  </script>
  <style>
    a{
      display:block;
    }
  </style>
</head>
<body>
  <p>This shouldn't became a link</p>
  <p>http://www.thisshouldbecamealink.com</p>
  <p>http://www.anotherlink.com</p>
  <table>
    <tr>
      <td>Not a link</td>
    </tr>
    <tr>
      <td>http://www.validlink.com</td>
    </tr>
  </table>
  <button id="create_links">Create links</button>
</body>
</html>

Transform all text links into actual links

2 Answers2