Auto create hyperlinks from multiple URLs in a text box

12 posts by 4 authors in: Forums > CMS Builder
Last Post: June 25   (RSS)

By gkornbluth - May 11, 2020

Hi All,

Does anyone have a favorite script that they’re willing to share, for automatically converting URLs in a text box to hyperlinks when the page is displayed?

Preferably with the ability to do some CSS formatting and modification of the link text

There are scads of snippets out there but I figured I’d ask here first, before fighting my way through them.

Thanks,

Jerry Kornbluth

The first CMS Builder reference book is now available on-line!

Take advantage of a free 3 month trial subscription, only for CMSB users, at: http://www.thecmsbcookbook.com/trial.php

By gregThomas - May 12, 2020

Hey Jerry,

Would it be possible to provide me with an example of how the URL's are formatted in the textbox? Is it one per line:

https://www.example.com
https://www.example.com
https://www.example.com
https://www.example.com

Something like this?

Greg Thomas

PHP Programmer - interactivetools.com

By gregThomas - May 14, 2020 - edited: May 14, 2020

Hey Jerry,

Your mention of the forum made me think of a really easy way to do this. Do you have a copy of the Simple Forum plugin? If you do, it comes with a function that will convert any URL's it finds to links as well as removing any malicious looking HTML from a string. If you had the Simple Forum plugin installed you could call the function anywhere in your site like this:

<?php
  include_once 'cmsb/lib/viewer_functions.php'; //Include the viewer functions (if not already included)
  $testString = 'Here is my test string with a URL: https://www.google.com'; //Example string which you want any URLs converted to links.
  $testString = sforum_cleanAndFormatHTML($testString); //Forum function to convert the url to a link.
  echo $testString; //Display the string

If you don't have that plugin, I found this article from css-tricks.com that explains how you can convert a URL to a link:

https://css-tricks.com/snippets/php/find-urls-in-text-make-links/

I've not tested the method in this article, but css-tricks are normally reputable. It also looks like it wouldn't be difficult to modify this method to add the span around the link.

Thanks!

Greg Thomas

PHP Programmer - interactivetools.com

By gkornbluth - May 14, 2020

Hi Greg,

Thanks for looking and for your discoveries.

No I don't have the simple forum plugin, but I looked at the css-tricks code briefly and I think that between that and another idea I have for the 'link text' it should work.

I'll post how it turns out.

Jerry Kornbluth

The first CMS Builder reference book is now available on-line!

Take advantage of a free 3 month trial subscription, only for CMSB users, at: http://www.thecmsbcookbook.com/trial.php

By kitsguru - May 22, 2020

`jerry

You don’t need the span, just add the class and style to the A element.

------------



Jeff Shields

By gkornbluth - May 22, 2020

Hey Jim,

When I do that it, often doesn't style the link text.

Maybe I'm doing something wrong...

Thanks,

Jerry Kornbluth

The first CMS Builder reference book is now available on-line!

Take advantage of a free 3 month trial subscription, only for CMSB users, at: http://www.thecmsbcookbook.com/trial.php

By kitsguru - May 22, 2020

Jerry

If that is a rhetorical question, then I shouldn't respond, BUT...

since you asked. I have a couple of observations.

Using inline styles is bad practice. Also I am not sure what your class text-font does but I assume it sets the font, size and colour.

I would create a new class in your css.


// usage <a href="#" class="text-font auto-link">LINK TEXT</a>
.auto-link {
  text-decoration: underline; // not necessary with border-bottom applied
  color: #FFF; 
  border-bottom: 2px solid #fff;
}

.auto-link:hover,
.auto-link:focus {
  text-decoration: none; 
  color: #FFF; 
  border-bottom: 2px solid #ccc;
}

I should point out that the text-decoration and border-bottom applied at the same time will conflict, use one or the other. Also you might want to add a :hover/:focus variant for the class shown above. Apply these classes to the A element and get rid of the span.

Using the class allows you to change the styling once without needing to find and replace all the occurrences of style.

------------



Jeff Shields

By gkornbluth - May 22, 2020

Thanks for taking the time to answer so thoroughly, Jim

Good points

Jerry Kornbluth

The first CMS Builder reference book is now available on-line!

Take advantage of a free 3 month trial subscription, only for CMSB users, at: http://www.thecmsbcookbook.com/trial.php

By equinox - June 25

Hey Greg, following up on this suggestion...what happens in the forum (with that hyperlink conversion piece) to any image links - does it convert them, too, or leave them alone? Thanks in advance.

Cheers,

“There are only two ways to live your life. One is as though nothing is a miracle." ~ Albert Einstein