Auto create hyperlinks from multiple URLs in a text box

Hi Greg, Thanks for looking at this one.

The links could be one per line, or they could be interspersed in the text.

I guess I've been spoiled by the forum where links are automatically created for any URL.

In this particular instance, I've been creating a set of FAQs for performing musicians that want to 'up their game' in this virtual world where we currently find ourselves.

You can see the result at http://www.jazzonJStreet.com/faq.php

Each topic record has a text box and a number of links to examples and to pertinent videos.

For each topic, I've been entering the following a number of times in its text box field: <a href="#"><span class="text_font" style="text-decoration:underline; color:#FFF; border-bottom: 2px solid white;" >LINK TEXT</span></a>, and then filling in the specific information for that link, which gets a bit tedious.

I was hoping to find a more automated solution (preferably with specific URL and link text combinations) that someone had already created, so that I could concentrate on the content rather than the programming.

Hope that makes more sense.

Stay Safe!

Jerry Kornbluth

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!

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

`jerry

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

Hey Jim,

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

Maybe I'm doing something wrong...

Thanks,

Jerry Kornbluth

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.

Thanks for taking the time to answer so thoroughly, Jim

Good points

Jerry Kornbluth

Hey Equinox,

Here's an image link:

http://www.jkwebdesigns.com/apr.png

Jerry Kornbluth