8

I am trying to write a function to create tags out of regular links and tags out of image links from the text in a text area.

it works the first time for both, but if i paste an "a href" tag in there, it double links it. it doesn't do the images because of the imageRegex check. any ideas how to get this to work?

keep in mind the textarea could have multiple urls of both types.

$("#message").blur(function() {  
    var imageRegex = /\.(png|jpg|jpeg|gif)$/;
    var s = $(this).val().replace(/(?:^|[^"'])(\b(?:https?|ftp):\/\/[a-z0-9-+&@#\/%?=~_|!:,.;]*[a-z0-9-+&@#\/%=~_|])/gim, function(str) {
        if (str.match(imageRegex)) {
            return('<img src="' + str + '" />');
        } else {
           return('<a href="' + str + '">' + str + '</a>');
        }       
    });  
    $(this).val(s);         
});
Ludovic Kuty
  • 4,868
  • 3
  • 28
  • 42
Chris Brickhouse
  • 650
  • 5
  • 15
  • 2
    +1 - is this a learning exercise, or for work? If the latter, I would recommend jQuery for this. – Adam Rackis Dec 16 '11 at 21:05
  • this is for a music message board i run. i will be switching this function to jquery when i can get the regex working, but the regex itself wouldn't change anyway. – Chris Brickhouse Dec 16 '11 at 21:12
  • i figured it out. will post the answer when the site allows me to, for other people to use – Chris Brickhouse Dec 16 '11 at 21:17
  • now the issue i'm having is not trying to link a url that is already linked once. having issues with the a tag, works with the img tag – Chris Brickhouse Dec 16 '11 at 21:42
  • 1
    Be aware that there are a lot of gotchas if you want to do this right. See: [my answer to a similar question](http://stackoverflow.com/a/5463604/433790) for some helpful links. – ridgerunner Dec 16 '11 at 21:46
  • yeah i've already run into a whole lot of issues. i will keep plugging away until i get it right. – Chris Brickhouse Dec 16 '11 at 21:51
  • Could you show an example of what's in your textarea to demonstrate the problem? – vol7ron Dec 16 '11 at 22:05
  • @AdamRackis, if you look at the code s/he's already using jQuery (or a very similar library, perhaps?). Though it would be good if s/he'd add that tag, to be clear about it. If s/he could post sample input and expected output, that'd be helpful. – David Thomas Dec 16 '11 at 22:07
  • @David - when I made my comment it wasn't at all apparent he was already using jQuery. He's added a lot of code to his question/ – Adam Rackis Dec 16 '11 at 22:11
  • the original code i posted wasn't jquery. – Chris Brickhouse Dec 16 '11 at 22:22
  • Hi @ChrisBrickhouse if my answer has solved your question please consider accepting it by clicking the check-mark. This indicates to the wider community that you've found a solution and gives some reputation to both the answerer and yourself. There is no obligation to do this. – Joe Thomas May 28 '16 at 04:01

1 Answers1

2

I'm not great at jQuery, but I made a vanillaJS solution to your problem. Check out this fiddle! http://jsfiddle.net/dv0s5onj/

 var yourString=document.getElementById('message').innerHTML;

var count=0;

var urls=yourString.match(/(?:^|[^"'])(\b(?:https?|ftp):\/\/[a-z0-9-+&@#\/%?=~_|!:,.;]*[a-z0-9-+&@#\/%=~_|])/gim);
// Make an array of urls

urls.forEach(function(v,i,a){
    var n =    yourString.indexOf(v,count); //get location of string

    if(v.match(/\.(png|jpg|jpeg|gif)$/)===null){// Check if image 
        // If link replace yourString with new  anchor tag
        yourString  = strSplice(yourString,n,v.length,'<a href="'+v+'">'+v+'</a>');
        count += (v.length*2)+16;// Increase count incase there are multiple of the same url.
    }else{
        // If link replace yourString with img tag
        yourString  = strSplice(yourString,n,v.length,'<img src="'+v+'" height="120px;" width="120px;"/>');
       count += v.length+14;// Increase count incase there are multiple of the same url.
    }
});

// A function to splice strings that I found on another StackOverflow Question.
function strSplice(str, index, count, add) {
  return str.slice(0, index) + (add || "") + str.slice(index + count);
}

//Replace the value of your element with your string
document.getElementById('message').innerHTML=yourString;
Joe Thomas
  • 5,807
  • 6
  • 25
  • 36