Chuyển url thành html <a> thẻ và hình ảnh url thành <img> thẻ với biểu thức chính quy javascript

Question

Tôi đang cố viết chức năng tạo thẻ ngoài liên kết và thẻ thông thường ra khỏi liên kết hình ảnh từ văn bản trong vùng văn bản.

nó hoạt động lần đầu tiên cho cả hai, nhưng nếu tôi dán một thẻ "a href" vào đó, nó sẽ liên kết đôi nó. nó không làm hình ảnh vì kiểm tra imageRegex. bất kỳ ý tưởng làm thế nào để có được điều này để làm việc?

hãy nhớ rằng vùng văn bản có thể có nhiều url của cả hai loại.

$("#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);   
}); 

Answer 1

Tôi không giỏi jQuery, nhưng tôi đã đưa ra giải pháp vanillaJS cho vấn đề của bạn. Kiểm tra này 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;